- 締切済み
javascriptでマウスオーバー時に画像を切り替える方法を教えてください
例でいうと、下記のページのような施設案内を作りたくて四苦八苦しております。 http://takasaka.ueda-gakuen.ed.jp/shisetu/index.htm 単純に文字や、画像からのマウスオーバーの画像切り替えはできます。 ただ、施設の地図の中に文字をリンクさせる方法がわからず、困っています。 地図の画像を、文字を含めた部分ごとにスライスして、そこにリンク指定でいいのでしょうか？その際、リンクの指定先を、変化する画像部分にどう指定するかもわかりません。勉強不足なのは百も承知ですが、取り急ぎこのようなものをつくる必要があり、どなたか助けていただけないでしょうか？ どうぞ、よろしくお願い致します
- electedcat
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
- babu_baboo
- ベストアンサー率51% (268/525)
ごめん、くわしいせつめいはなし！ これからどらいぶだからね。ばぶぅ～ ぜんかくくうはくははんかくになおしてね <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <style type="text/css"> ul { list-style-type: none; } #p0 { position: absolute; top:300px; left: 50px; } #p1 { position: absolute; top:350px; left: 100px; } #p2 { position: absolute; top:400px; left: 150px; } #p3 { position: absolute; top:450px; left: 200px; } .hv { font-size: 80%; color: #f80; } </style> <body> <div> <img src="./img/0.gif" width="640" height="240" id="photo" alt=""> </div> <ul id="map"> <li id="a0"> <a href="#" id="p0">教室</a> <a href="#" id="p1">教室</a> </li> <li id="b0"> <a href="#" id="p2">図書室</a> <a href="#" id="p3">図書室</a> </li> </ul> <script type="text/javascript"> //@cc_on var map = { 'a0': [ '教室', '理科', './img/0.gif' ], 'b0': [ '図書室', '本がないけど','./img/1.gif' ] }; document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'mouseover', (function ( get, set ) { var mo; var mt; return function ( evt ) { var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; var p, li, txt; if( mo ) { set( get( mo, 'nodeName', 'LI'), mt[0], '' ); mo = null; } if( 'A' !== e.nodeName ) return; if( (p = get( e, 'id', 'map' ) ) && ( li = get( e, 'nodeName', 'LI') ) ) { txt = map[ li.id ]; set( li, txt[1], 'hv' ); document.getElementById( 'photo' ).src = txt[2]; mt = txt; mo = e; } }; })( function ( node, type, val ) { return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null; }, function ( p, txt, cs ) { var a = p.getElementsByTagName( 'A' ), c = 0, o; while( o = a[ c++ ] ) o.firstChild.nodeValue = txt, o.className = cs; } ), false ); </script>
お礼
ありがとうございます！！ 何とか形にすることができました。 もうひとつだけ、お聞きしたいのですが マウスオーバーをした時以外は、この画像↓ <img src="./img/0.gif" width="640" height="240" id="photo" alt=""> に戻るようにしたいのですが、 何か方法はありますでしょうか・・・？ よろしくお願い致します。
お礼
ありがとうございました。 的確な答えをくださって、本当に助かりました。 勉強不足と非難もせずに、教えてくださり 感謝しております。