人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【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>



●質問者: kentajoy
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:JavaScript スクリプト マウスオーバー 画像
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● Mook
●23ポイント

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) ;
}
◎質問者からの返答

有り難うございます。

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

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


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


2 ● Mook
●23ポイント

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

下記は一つの 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>

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

◎質問者からの返答

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

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


3 ● aerith
●22ポイント

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

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

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

それと、21行目付近の

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

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

なのだと思います。

◎質問者からの返答

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

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

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


4 ● aerith
●22ポイント

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ