- ベストアンサー
添付画像のように1～5のテキスト部分にマウスオーバーで赤枠のところにそ
添付画像のように1～5のテキスト部分にマウスオーバーで赤枠のところにそれぞれの画像を表示させる ホームページテクニックを教えて下さい。コピーして応用して使える簡単な方法が良いです。
- kohakura
- お礼率71% (5/7)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
検索すれば、あちこちにたくさんころがっていそうなスクリプトですが、回答がないみたいなので… ＞マウスオーバーで赤枠のところにそれぞれの画像を表示させる 画像に「赤枠」の部分がないので、よくわかってないのですが、ご参考まで。 （レイアウトはいい加減です） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div#target div { float:left; } div#target ol { width:150px; cursor:pointer; color:red; } div#target ol img { display:none; } div#target div.screen { width:300px; height:150px; border:1px solid #00f; } </style> </head> <body> <div id="target"> <div> <ol type="1"> <li>text1<img src="A.jpg" alt="A"></li> <li>text2<img src="B.jpg" alt="B"></li> <li>text3<img src="C.jpg" alt="C"></li> <li>text4<img src="D.jpg" alt="D"></li> <li>text5<img src="E.jpg" alt="E"></li> </ol> </div> <div class="screen"> <img src="defalt" alt=""> </div> </div> <script type="text/javascript"> <!-- (function(id) { //@cc_on @set @V = (@_jscript_version <= 5.8) function eventfunc(e) { var p, t = e./*@if(@V)srcElement @else @*/target/*@end @*/; if (t.nodeName != "LI") return; p = t.parentNode.parentNode.nextSibling; while (p && p.nodeName != "DIV") p = p.nextSibling; if (p.className != "screen") return; if ((t = getImg(t)) && (p = getImg(p))) p.src = t.src, p.alt = t.alt; } function getImg(e) { var c = e.firstChild; while(c && c.nodeName != "IMG") c = c.nextSibling; return c?c:null; } var e = document.getElementById(id); if (e) { e = e.getElementsByTagName("OL")[0]; e./*@if(@V)attachEvent("on" + @else @*/addEventListener(/*@end @*/"mouseover", eventfunc, false); } })("target"); // ←id of div //--> </script> </body> </html>
お礼
ご回答頂きましてありがとうございます。 赤枠では青枠の間違いでした。 内容自体よく分かりませんが、何とかコピーして 使わせて頂きます。