重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

テキストリンクにオンマウスで、別の場所の画像を変えて表示する方法を質問

解決済

  • 質問者：Maki_aries_1984
  • 質問日時：
  • 回答数：3件

テキストリンクにオンマウスで、別の場所の画像を変えて表示する方法を質問された方のログがありましたので、そこに追記で質問させてください。

以下は回答者の方のアンサーになります。


<html>
<head>
<title></title>
<script type="text/javascript">
<!--
lnkimgsrc= new Array();
lnkimgs= new Array();

lnkimgsrc[0]="***0.jpg"; // リンク0の画像
lnkimgsrc[1]="***1.jpg"; // リンク1の画像
lnkimgsrc[2]="***2.jpg"; // リンク2の画像
lnkimgsrc[3]="***3.jpg"; // リンク3の画像
lnkimgsrc[4]="***4.jpg"; // リンク4の画像
/* 上記で画像のURLを指定 */

for (i=0; i<lnkimgsrc.length; i++){
lnkimgs[i]= new Image();
lnkimgs[i].src=lnkimgsrc[i];
}


function changeImg(x){
if (document.images){
document.images['tgt'].src=lnkimgs[x].src;
}
}

// -->
</script>
</head>
<body>

<a href="***0.html" onMouseover="changeImg(0)">リンク0</a>
<a href="***1.html" onMouseover="changeImg(1)">リンク1</a>
<a href="***2.html" onMouseover="changeImg(2)">リンク2</a>
<a href="***3.html" onMouseover="changeImg(3)">リンク3</a>
<a href="***4.html" onMouseover="changeImg(4)">リンク4</a><br>

<img src="***.jpg" name="tgt">

</body>
</html>


この状態で、表示された画像から、テキストリンクと同じリンク先に飛ばしたい場合はどのようにすればいいでしょうか。。

よろしくお願いいたしますm(__)m

通報する

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

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： babu_baboo
  • 回答日時：

おは。

よるに、めもりーりーくぱたーんだってしてきされいた。
おれの、のうみそには、めもりーりーくしてくれればよいのだけれど。
なので、ぜんかいのは、しょうきょ！

<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

babu_babooさん

できましたっ！

すごい時間かかったけど納得できて完成させられたのですごい嬉しいです(>_<)

ありがとうございます☆

また何かあったらよろしくお願いいたしますm(__)m

通報する
お礼日時：2010/06/30 12:43

No.3

  • 回答者： steel_gray
  • 回答日時：

さんぷるです



■ヘッダに
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. …
<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">
    • good
    • 0
    • 件
通報する
この回答へのお礼

steel_grayさん

どうもありがとうございます(^-^)♪

こちらも試させていただきました。

スクリプトはサッパリなので、きっとまた作業の上で分からないところが出てくるかと思います。

その際にはまたこちらに質問させていただきたいと思いますので、どうぞよろしくお願いいたしますm(__)m

通報する
お礼日時：2010/06/30 14:09

No.1

  • 回答者： babu_baboo
  • 回答日時：

こういうのは、どうかな？


ぜんかくくはくは、はんかくにしてちょ！
<!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

早速作ってみましたが、テキストリンクにオンマウスでそれぞれの画像を表示させることはできたのですが、その画像からテキストリンクと同じ先にリンクを飛ばすことができず。。。

カーソルに変化が見られないので、画像にリンクがあること自体を認識されていないようです。

どうかもう１度お願いできないでしょうか(>_<)

補足日時：2010/06/27 02:32
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報