id:kentajoy
ポイントあり90pt回答受付終了
コンピュータウェブ制作

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

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


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/25 22:47:23
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答（4件）

id:Mook No.1

回答回数1314ベストアンサー獲得回数393

ポイント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

回答回数1314ベストアンサー獲得回数393

ポイント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

回答回数33ベストアンサー獲得回数1

ポイント22pt

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

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

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

それと、２１行目付近の

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

は

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

なのだと思います。

id:kentajoy

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

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

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

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

回答回数33ベストアンサー獲得回数1

ポイント22pt

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

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

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

コメント（1件)

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

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

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

トラックバック

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

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

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ