• 締切済み

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

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

みんなの回答

回答No.2

　　　if( 'A' !== e.nodeName ) { 　　　　document.getElementById( 'photo' ).src = './img/0.gif'; 　　　　return; 　　　}

electedcat
質問者

お礼

ありがとうございました。 的確な答えをくださって、本当に助かりました。 勉強不足と非難もせずに、教えてくださり 感謝しております。

回答No.1

ごめん、くわしいせつめいはなし！ これからどらいぶだからね。ばぶぅ～ ぜんかくくうはくははんかくになおしてね <!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>

electedcat
質問者

お礼

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 画像の横から記事を書き始める方法

    　Fc2でブログを始めて１週間。画像右側の余白の部分に記事を入れる方法が分からず四苦八苦しています。サルでも分かるように教えていただけませんか。

  • 画像にJavaScriptを指定すると枠がつきます

    普通のリンクや文字に指定するときはそんなことはないのですが、画像にJavaScriptを指定するとリンク色の枠がつきます。 これはどうしたら取れるのでしょうか？ 初歩的な質問ですみません。よろしくお願いいたします。

  • ワードに貼り付けられた画像の中の文字数を数えたい

    ワード文書の文字数を数えているのですが、その文書の中に、画像が貼り付けられたものがあり、 その部分は手で数えなければならず、四苦八苦しています。（全体が150枚、画像だけで、半分ぐらいあるので）簡単に数えられる方法はないでしょうか。ワード2007だとテキストボックスはカウントしてくれるのですが、画像内の文字まではカウントしてくれません。etypistを使って画像を抽出しようかと思いましたが、ＰＤＦその他の画像ファイルしかよみこんでくれないので、これも使えません。 何かよい方法を教えてください。

  • (CSS)縦メニューを一枚画像で作るには・・

    縦型のメニューを一枚画像で作っているのですが 同じようなサンプルがありませんでしたので四苦八苦しています・・。 上部のピンクの画像の個所リンク無しで 以下のメニューの高さは一定ではありません・・・。 高さ２７pxと22pxの画像の組み合わせのメニューになります。 このようなデザインのメニューでも一枚画像で出来るものでしょうか・・？ 何卒ご指導いただければ有難いです・・！

    • ベストアンサー
    • CSS
  • Photoshop スライスした画像の保存時の設定

    Photoshop7.0(Win)にて写真画像の上にレイヤーで文字を書き、その文字の部分だけをGIFアニメで動かすようにしました。 スライスツールで文字の部分のみをGIFにし、他の部分はJPEGにしてWeb用に保存・・・するところまでは出来たのですが、 JPEG部分の画質設定をスライスごとに変えることが出来ません。 人の顔のところは高画質に、背景などは標準画質に・・・などとJPEG圧縮率をそれぞれ変えて保存したいのですが、 一つのスライスを選択して画質を設定すると、 他のスライスも同じ設定に変わってしまいます。 ImageReadyでも同じ結果でした。 それぞれのスライスの画質を買えて保存することは無理なのでしょうか？

  • ロールオーバーボタン

    ホームページをつくるのに、ロールオーバーボタンをつけたいと思っています。 持っているソフトはIllustrator10、Photoshop6で、Win2000です。 四苦八苦して、1個だけでしたら、ImageReadyでつくれるようになったのですが、 複数のボタンが並んでいる1枚の画像からそれぞれにロールオーバーを設定する方法がわかりません。 スライスを先に指定しても全然意味ナシみたいでしたし・・・。 簡単にできる方法や説明（上記ソフトを使って）のサイトがあったら教えていただけますか。

  • ｃｓｓでリンクの文字と画像の場合の効果を使い分けたいのですが・・・。

    ホームページのリンクで、文字のリンク部分はチョコっと凹んだようになって点々のアンダーラインがでるような指定をしたいのですが、画像（写真など）にリンクを張った時は何も起こらないようにしたいのですがそういう指定はできますか？ できるならどのようにすればいいのでしょうか？

  • リンクにマウスオーバーで指定の場所に文字や画像など

    リンクにマウスオーバーすると、指定した場所に文字とか画像とかを表示させたいのです。 リンクページで、バナーに触れると、上の辺りにあった空白部分（テキストボックスでもなんでもいいですし空白じゃなくてもいいです）の中に、 バナーと管理人名、説明etc...と説明が出るようにしたいです。 わかりにくくて申し訳ないです。 今まで、HEAD内に <script language="JavaScript"> <!-- function sp(msg){ if(msg==""){linkinfo.innerHTML="..."; }else{linkinfo.innerHTML=msg;}} //--> </script> と入力し、適当なテキストエリア <p><textarea width="300" height="70" id="linkinfo"></textarea></p> とかを表示させ、リンクのaの中に onMouseOver=sp("説明１"); onMouseOut=sp("マウスを離れた時の説明（基本的には説明１と同じ内容ですが）"); を入れて、 リンク（画像も文字も）触れると、テキストエリアに説明１やらが出てくる方法を使っていました。 しかし、テキストエリアはタグが使えないので、画像の表示ができなくて… インラインフレームはあまり使いたくないのですが、他に方法がなかったらインラインフレームでこんな感じに表示できるタグを教えて下さい。 ちなみに、「今まで、HAD内に～」のサンプルはこちらです。→http://www49.atpages.jp/kstr/mmm.html

  • クリックで画像切替、表示された画像から各ページへリンクする方法

    クリックで画像切替、表示された画像から各ページへリンクする方法 下記のような、左側の画像をクリックすると、右側の画像がクリックした画像に切り替わり、 切り替わった右側の画像からそれぞれ関連ページへリンクをつけたいと思っています。 ■何もしていない状態↓ 画像1 画像2 画像3　　画像Ａ（画像1） 画像4 画像5 ■左側の画像2をクリックした場合↓ 中央の画像Ａの部分に画像2を表示 表示された画像Ａ（画像2）をクリックすると関連ページへリンク 画像1 画像2 画像3　　画像Ａ（画像2） 画像4 画像5 画像の切り替えは色々調べると出てきたのですが、それぞれ切り替えた画像からのリンクの やり方がどうしてもわかりませんでした。 初心者なので、部分的ではなく一式書き方をお教えいただけましたら幸いです。 よろしくお願いいたします。

  • MovableType4の画像挿入時の５００エラーです

    MovableType4に関しての質問です。 先日、いつものようにブログを作成していたのですが、急に画像の画像の挿入、ファイルの挿入を選択すると５００エラーが発生し数日たっても回復しません。これ以外は作動し投稿も出来ます。何か変わったことを行なったと考えると、画像をサムネイルを指定してその後、おかしくなった気がします。サーバー元に問い合わせたら、サーバーは問題なく作動しているとの返事でした。数日、四苦八苦してようやくここに辿りつきました。他の方の似たような質問も読ませて解決に至りませんでした。対処方法をお分かりの方、アドバイスをよろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する