タイトルの通りなのですが、、
クリッカブルマップのリンク部分にマウスをあわせると色が変わるようにしたいです。
このような感じです↓
http://www.pstar.jp/home/fr_101.html
いろいろ調べてみましたが、どうしてもわかりません。
すみません・・よろしくお願いします。。
No.3ベストアンサー
- 回答日時:
スクリプトを使うのでちょっと面倒ですが下記のソースを参考にしてください。
(マウスをあわせるとimage_aからimage_bに入れ替える)ヘッダー内の記述はそのままコピーでOKです。
Bodyタグ内では入れ替えるイメージをあらかじめ読み込む設定があります。画像が小さければこのBodyの記述はなくてもいいかも。
ID番号を替えていけば1つのページに複数の設定が可能です。
<html>
<head>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('iamge_b.jpg')">
<img src="image_a.jpg" id="Image1" onmouseover="MM_swapImage('Image1','','image_b.jpg',1)" onmouseout="MM_swapImgRestore()" />
</body>
</html>
No.2
- 回答日時:
色を変えるというより、画像を置き換えています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
iframeのソースを取得したい
-
ブラウザのウィンドウサイズに...
-
IE11 javascriptについて
-
ラジオボタンをクリックしたい
-
if(document.all && navigator....
-
関数でy=g(x)のgとは何の略です...
-
google apps scriptの終了のさせ方
-
Coinmarketcap api
-
functionから別のfunctionを実...
-
HTMLで作った時報アプリが動き...
-
JavaScriptで決まった「時刻」...
-
二次元配列を使って順位をだす...
-
javaScriptのコードの修正をお...
-
【正規表現】【javascript】CR...
-
C#OpenCv V4にのエラーに関する...
-
Perlの配列をJavaScriptに渡せ...
-
ASP.NET MVCでObjectをjsに渡す
-
メールフォームの日付入力フォ...
-
ジェネレーターの作り方
-
複数ファイルで使うグローバル...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptの基本的なことだと...
-
Latexに関する質問です。
-
DOM要素を削除しても、イベント...
-
文字を一文字ずつ表示
-
Null またはオブジェクトではあ...
-
excle VBA とweb上の検索を利用...
-
FireFoxのjavascriptで自動でキ...
-
UWSCでオンクリックのボタンを...
-
ラジオボタンでreadonlyの切替え
-
JavaScript window.openで開く...
-
responseTextについて
-
乗換案内 VBAで操作したい
-
webページ上のTabキーの動き
-
XMLでのAttributeを持ったNode...
-
Javascriptで定期的にF5を押す...
-
クリッカブルマップのリンク部...
-
ie操作 フレームのURLが...
-
LaTeX:数式を等号揃えにする方法
-
連動するセレクトボックスの内...
-
TexでΣの添え字の位置直し
おすすめ情報