個人事業主の方必見!確定申告のお悩み解決

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

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


<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

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0
この回答へのお礼

babu_babooさん

できましたっ!

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

ありがとうございます☆

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

お礼日時:2010/06/30 12:43

さんぷるです



■ヘッダに
<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

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


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

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

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

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

補足日時:2010/06/27 02:32
    • good
    • 0

このQ&Aに関連する人気のQ&A

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


人気Q&Aランキング