- ベストアンサー
テキストリンクにオンマウスで、別の場所の画像を変えて表示する方法
- テキストリンクにオンマウスで、別の場所の画像を変えて表示する方法について質問があります。
- テキストリンクと同じリンク先に飛ばす方法について教えてください。
- 以下のコードで画像とテキストリンクを関連付けていますが、リンク先の設定方法がわかりません。
- Maki_aries_1984
- お礼率66% (2/3)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
おは。よるに、めもりーりーくぱたーんだってしてきされいた。 おれの、のうみそには、めもりーりーくしてくれればよいのだけれど。 なので、ぜんかいのは、しょうきょ！ <!DOCTYPE html> <title></title> <body> <div style="display:none"> <img src="./img/0.gif" alt=""> <img src="./img/1.gif" alt=""> <img src="./img/2.gif" alt=""> <img src="./img/3.gif" alt=""> <img src="./img/4.gif" alt=""> </div> <p id="hoge"> <a href="0.html" rel="./img/0.gif">リンク0</a> <a href="1.html" rel="./img/1.gif">リンク1</a> <a href="2.html" rel="./img/2.gif">リンク2</a> <a href="3.html" rel="./img/3.gif">リンク3</a> <a href="4.html" rel="./img/4.gif">リンク4</a> </p> <div> <a href="0.html"> <img id="fuga" src="./img/0.gif" alt="Photo" width="200" height="200"> </a> </div> <script><!-- //@cc_on var handler = function (e/*Event*/) { var n = e./*@if(1) srcElement @else@*/ target /*@end@*/, t = n, img = n.ownerDocument.getElementById( 'fuga' ); if( n.href ) while( t = t.parentNode ) if( 'hoge' === t.id ) if( n.rel ) img.src = n.rel, img.parentNode.href = n.href; }; document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'mouseover', handler, false ); /*@if(1) detachEvent( 'on' + @else@*/ removeEventListener(/*@end@*/ 'unload', function (e) { document./*@if(1) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/ 'mouseover', handler, false); /*@if(1) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/ 'unload', arguments.callee, false); }, false ); //--> </script>
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
さんぷるです ■ヘッダに <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var imglist = new Array( '***0.jpg', '***1.jpg', '***2.jpg' ); // '#link a' 処理するリンクを示すセレクタ（cssのセレクタ同じと思っておけばOK） // 'tgt' 置き換えるimgのid(画像切り替え後はAnchorのid) $('#link a').each(function (i){ $(this).data('linkIndex',i); }).mouseover(function(){ $('#tgt').replaceWith($('<a href="'+$(this).attr('href')+'" id="tgt"><img src="'+ imglist[$(this).data('linkIndex')]+'" alt=""></a>')); }); jQuery.each(imglist,function(i,val){$('<img src="'+val+'" alt="">')}); }); </script> ■bodyに <p id="link"> <a href="～">リンク</a> <a href="～">リンク</a> <a href="～">リンク</a> </p> <img src="***.jpg" alt="" id="tgt">
お礼
steel_grayさん どうもありがとうございます(^-^)♪ こちらも試させていただきました。 スクリプトはサッパリなので、きっとまた作業の上で分からないところが出てくるかと思います。 その際にはまたこちらに質問させていただきたいと思いますので、どうぞよろしくお願いいたしますm(__)m
- babu_baboo
- ベストアンサー率51% (268/525)
こういうのは、どうかな？ ぜんかくくはくは、はんかくにしてちょ！ <!DOCTYPE html> <title></title> <body> <div style="display:none"> <img src="./img/0.gif" alt=""> <img src="./img/1.gif" alt=""> <img src="./img/2.gif" alt=""> <img src="./img/3.gif" alt=""> <img src="./img/4.gif" alt=""> </div> <p id="hoge"> <a href="0.html" rel="./img/0.gif">リンク0</a> <a href="1.html" rel="./img/1.gif">リンク1</a> <a href="2.html" rel="./img/2.gif">リンク2</a> <a href="3.html" rel="./img/3.gif">リンク3</a> <a href="4.html" rel="./img/4.gif">リンク4</a> </p> <div> <img id="fuga" src="./img/0.gif" alt="Photo" width="200" height="200"> </div> <script><!-- (function (view) { var //@cc_on doc = view.document, img = doc.getElementById( 'fuga' ), handler = function (e/*Event*/) { var n = e./*@if(1) srcElement @else@*/ target /*@end@*/; var t = n; if( n.href ) while( t = t.parentNode ) if( 'hoge' === t.id ) if( n.rel ) img.src = n.rel, img.rel = n.href; }, handler2 = function (e/*Event*/) { var n = e./*@if(1) srcElement @else@*/ target /*@end@*/; if( 'fuga' === n.id ) if( n.rel ) location.href = n.rel; }; doc./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'mouseover', handler, false ); doc./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', handler2, false ); })(this); //--> </script> //Situmonn ha nattoku sitara tojite ne.
補足
babu_babooさん 早いお答えありがとうございますm(__)m 早速作ってみましたが、テキストリンクにオンマウスでそれぞれの画像を表示させることはできたのですが、その画像からテキストリンクと同じ先にリンクを飛ばすことができず。。。 カーソルに変化が見られないので、画像にリンクがあること自体を認識されていないようです。 どうかもう１度お願いできないでしょうか(>_<)
お礼
babu_babooさん できましたっ！ すごい時間かかったけど納得できて完成させられたのですごい嬉しいです(>_<) ありがとうございます☆ また何かあったらよろしくお願いいたしますm(__)m