【Javascript】マウスオーバーで画像が変わるスクリプトです。

同ページ内に2箇所、別々に画像が変わる箇所を設置したいです。
方法を教えてください。


http://homepage3.nifty.com/testweb/test.js

---------

<p onmouseover="changeImage(0)"><img src="hoge01_sum.jpg" /></p>
<p onmouseover="changeImage(1)"><img src="hoge02_sum.jpg" /></p>
<div id="imgspace"><img src="hoge01.jpg" id="changing" /></div>


↓同ページ内ですが、画像を表示する場所(★)が上記場所とは違う。上とは連動しない形にしたいです。

<p onmouseover="changeImage(0)"><img src="hoge03_sum.jpg" /></p>
<p onmouseover="changeImage(1)"><img src="hoge04_sum.jpg" /></p>
<div id="imgspace_★"><img src="hoge03.jpg" id="changing_★" /></div>

回答の条件
  • 1人3回まで
  • 登録:2008/05/24 13:21:06
  • 終了:2008/05/25 22:47:23

回答(4件)

id:Mook No.1

Mook回答回数1312ベストアンサー獲得回数3912008/05/24 13:32:14

ポイント23pt

id は HTML 内でユニークにすべきですので、そもそも同じ ID を使用しない方が良いですね。

changeImage 関数に IDのための数値を引数として追加してはどうでしょうか。

(ファイル名は適当に変えていますので、使用する名前に合わせてください。)

<p onmouseover="changeImage(1, 0)"><img src="hoge01_sum.jpg" /></p>
<p onmouseover="changeImage(1, 1)"><img src="hoge02_sum.jpg" /></p>
<div id="imgspace1"><img src="hoge01.jpg" id="changing1" /></div>

<p onmouseover="changeImage(2, 2)"><img src="hoge03_sum.jpg" /></p>
<p onmouseover="changeImage(2, 3)"><img src="hoge04_sum.jpg" /></p>
<div id="imgspace2"><img src="hoge02.jpg" id="changing2" /></div>

function changeImage(id, n) {
   //if (tid != false) return ;
    var targentImg = document.getElementById("changing" + id ) ;
    document.getElementById("imgspace" + id ).style.backgroundImage = 'url('+targentImg.src+')' ;
    document.getElementById("imgspace" + id ).style.backgroundRepeat = 'no-repeat' ;
    targentImg.style.filter = 'alpha(opacity=0, type=0)' ;
    targentImg.style.MozOpacity = targentImg.style.opacity = 0 ;
    targentImg.src = images[n] ;
    clearTimeout(tid) ;
    tid = setTimeout("fadeIn(75)", 100) ;
}
id:kentajoy

有り難うございます。

上記ソースで試してみたのですが、上手く動かないですね。。

ひとつずれて表示?されます。


画像の切り替わりの際のアルファもかからないみたいです。

2008/05/24 14:12:13
id:Mook No.2

Mook回答回数1312ベストアンサー獲得回数3912008/05/24 18:14:48

ポイント23pt

コメントが無効でしたので再回答で失礼しますが、他の関数も同様に変更する必要があります。

下記は一つの HTML ファイルにした例ですが、一応動作確認しています。

(期待される挙動かどうかは確信がありませんが。)

<hrml>
<head>
<script type="text/javascript">
<!---
var images = Array( "hoge01.jpg", "hoge02.jpg", "hoge03.jpg", "hoge04.jpg" ) ;
var tid = false ;
var preloadImages = Array();

function changeImage(id, n) {
    //if (tid != false) return ;
    var targetImg = document.getElementById("changing" + id ) ;
    var targetImgSp = document.getElementById("imgspace" + id )

    targetImgSp.style.backgroundImage = 'url('+targetImg.src+')' ;
    targetImgSp.style.backgroundRepeat = 'no-repeat' ;

    targetImg.style.filter = 'alpha(opacity=0, type=0)' ;
    targetImg.style.MozOpacity = targetImg.style.opacity = 0 ;
    targetImg.src = images[n] ;

    clearTimeout(tid) ;
    tid = setTimeout("fadeIn(" + id + "75)", 100) ;
}

function fadeIn(id, o) {
    var targetImg = document.getElementById("changing" + id ) ;
    targetImg.style.filter = 'alpha(opacity='+o+', type=0)' ;
    targetImg.style.MozOpacity = targetImg.style.opacity = o / 100 ;
    tid = ( o < 100 ) ? setTimeout("fadeIn("+id+","+(o+10)+")", 100) : false;
}

function init() {
    for (var i = 0; i < images.length; ++i) {
        preloadImages[i] = new Image() ;
        preloadImages[i].src = images[i] ;
    }
}
--->
</script>
</head>
<body onload="init()">
<p onmouseover="changeImage(1, 0)"><img src="hoge01_sum.jpg"/></p>
<p onmouseover="changeImage(1, 1)"><img src="hoge02_sum.jpg"/></p>
<div id="imgspace1"><img src="hoge01.jpg" id="changing1"/></div>

<p onmouseover="changeImage(2, 2)"><img src="hoge03_sum.jpg"/></p>
<p onmouseover="changeImage(2, 3)"><img src="hoge04_sum.jpg"/></p>
<div id="imgspace2"><img src="hoge03.jpg" id="changing2"/></div>
</body>
</html>

コメントを有効にしていただければ、捕捉します。

id:kentajoy

試してみましたが、やはり動かないようです。。

別の方法はありませんでしょうか?

2008/05/25 02:50:59
id:aerith No.3

aerith回答回数33ベストアンサー獲得回数12008/05/25 04:12:13

ポイント22pt

2番目のMookさんの解答なのですが

http://q.hatena.ne.jp/1211602865#a829790

まず先頭の hrml ですが、これは たぶん html ですね。

それと、21行目付近の

tid = setTimeout("fadeIn(" + id + "75)", 100) ;

tid = setTimeout("fadeIn(" + id + ", 75)", 100) ;

なのだと思います。

id:kentajoy

上記直して試してみたのですが、まったく動かないです。?

そのままコピペして上記部分を直したのですが。。

まだどこか間違っているのでしょうか?

2008/05/25 06:30:34
id:aerith No.4

aerith回答回数33ベストアンサー獲得回数12008/05/25 22:02:23

ポイント22pt

http://q.hatena.ne.jp/1211602865#a829878

どういう状況下いまいちつかめないので、そのサンプルでおつくりになったページかなにかを

教えていただくほうがみなさん答えやすいと思いますよ。

  • id:Mook
    aerith さん、指摘ありがとうございました。
    こちらでは、画像は変化していたので特に気にしていませんでしたが、アルファ効果の部分が動いていなかったですね。

    新しい質問では、動作サンプルが提示されていましたので、期待する挙動を確認できました。
    動作確認済みのコードをそちらに回答しましたので、参照ください。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません