javascriptでマウスオーバー時に画像を切り替える方法を教えてください

締切済

質問者：electedcat
質問日時：2009/10/09 02:41
回答数：2件

例でいうと、下記のページのような施設案内を作りたくて四苦八苦しております。
http://takasaka.ueda-gakuen.ed.jp/shisetu/index. …

単純に文字や、画像からのマウスオーバーの画像切り替えはできます。
ただ、施設の地図の中に文字をリンクさせる方法がわからず、困っています。
地図の画像を、文字を含めた部分ごとにスライスして、そこにリンク指定でいいのでしょうか？その際、リンクの指定先を、変化する画像部分にどう指定するかもわかりません。勉強不足なのは百も承知ですが、取り急ぎこのようなものをつくる必要があり、どなたか助けていただけないでしょうか？
どうぞ、よろしくお願い致します

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.1

回答者： babu_baboo
回答日時：2009/10/09 08:48

ごめん、くわしいせつめいはなし！

これからどらいぶだからね。ばぶぅ～

ぜんかくくうはくははんかくになおしてね
<!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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！！
何とか形にすることができました。
もうひとつだけ、お聞きしたいのですが
マウスオーバーをした時以外は、この画像↓
　<img src="./img/0.gif" width="640" height="240" id="photo" alt="">　
に戻るようにしたいのですが、
何か方法はありますでしょうか・・・？
よろしくお願い致します。

通報する

お礼日時：2009/10/09 21:34