- ベストアンサー
javascriptによる画像切り替えについてわからなくて困っています
javascriptによる画像切り替えについてわからなくて困っています。 初心者ですので説明もわかりにくいかもしれませんが、ぜひご指導をお願いします。 添付画像のように、サイドバーにボタン数個、大きな画像（#main_img)とあって、ボタンにオンマウスで#main_imgが切り替わり、ボタンをクリックするとリンク先に移動できるようにしたいのです。 「javascript ロールオーバー 切り替え クリック リンク」といったキーワードで検索したのですが、ロールオーバー切り替えはできるけれどリンク先に移動できなかったり、ボタン画像画像そのものが切り替わるものだったり、なかなか思ったとおりのサンプルを見つけることができません。 カスタマイズするだけの知識もないので、大変困っています。 このようなサンプルスクリプトを紹介しているところがあったら教えていただけないでしょうか？
- N_moon
- お礼率66% (30/45)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
・ボタン自体はロールオーバーするのかどうか？ ・mainの画像は表示するだけなのか、リンクも効くようにするのか？ （多分、ボタンの画像とは違う画像が表示されるのですよね？） ・マウスアウト時のmain画像はそのままでよいのか？ などがよくわからないので、適当にしています。 とりあえずデータを「通常のボタンのURL」、「マウスオン時のボタンURL」、「mainに表示する画像URL」の3つを1セットにして、ボタンの数だけ。（ご提示の例では5個） マウスオン、アウトでボタンの画像も変化。 main画像はマウスオンのときだけ入れ替え。 同時にリンク先も入れ替え。 …と言う感じのサンプルです。 (全部バラバラに指定できるようにしているけど、規則性があればもっと簡略化が可能） <html> <head><title>test</title> <style type="text/css"> #navi div { float:left; padding-right:5px; } #navi a { display:block; } #navi div a img { width:150px; height:40px; border:0; } #navi img#main_img { width:400px; height:200px; border:0; } </style> <script type="text/javascript"> function test(evt) { //通常のボタン, マウスオン時のボタン, mainに表示する画像 var data = [ 'btn1.gif,btn1_on.gif,A.jpg', 'btn2.gif,btn2_on.gif,B.jpg', 'btn3.gif,btn3_on.gif,C.jpg', 'btn4.gif,btn4_on.gif,D.jpg', 'btn5.gif,btn5_on.gif,E.jpg' ]; var t = evt.target || evt.srcElement; if (t.nodeName != 'IMG') return; var img = document.getElementById('navi').getElementsByTagName('DIV')[0].getElementsByTagName('IMG'); var i, idx=-1, d, main = document.getElementById('main_img'); for (i=0; i<img.length; i++) if(img[i]==t) {idx=i; break; } if (idx > -1 && idx < data.length) { d = data[idx].split(','); if (evt.type=='mouseover') { t.src = d[1]; main.src = d[2]; main.parentNode.href = t.parentNode.href; } else { t.src = d[0]; } } } </script> </head> <body> <div id="navi"> <div onmouseover="test(event)" onmouseout="test(event)"> <a href="xx1.html"><img src="btn1.gif" alt="btn1"></a> <a href="xx2.html"><img src="btn2.gif" alt="btn2"></a> <a href="xx3.html"><img src="btn3.gif" alt="btn3"></a> <a href="xx4.html"><img src="btn4.gif" alt="btn4"></a> <a href="xx5.html"><img src="btn5.gif" alt="btn5"></a> </div> <a href="xx1.html"> <img src="A.jpg" alt="main" id="main_img"> </a> </div> </body> </html>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
ロールオーバーが実現できているならあとはボタンを<a href="hoge.htm"><img src="fuga.jpg"></a>と リンクすればよいのでは？
補足
質問した時点で見つけたスクリプトだとa href=""にスクリプトが入っていました。 その後見つけたサイトで解決策を見つけました。 http://www.ziyotoy.net/lab/multi_rollover/# アドバイスありがとうございました
お礼
ありがとうございます！ 最初の方への細くのサイトとあわせて参考にさせていただきました！