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

同ページ内に2箇所、別々に画像が変わる箇所を設置したいです。
(前回も同質問をさせていただいたのですが、解決しなかったので。。)


下記ページに片方だけ動作しているものをアップしました。
http://homepage3.nifty.com/testweb/overfade/index.html

---------

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


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

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

回答の条件
  • 1人5回まで
  • 登録:2008/05/25 06:48:41
  • 終了:2008/06/01 06:50:02

回答(1件)

id:Mook No.1

Mook回答回数1312ベストアンサー獲得回数3912008/05/25 08:49:51

ポイント60pt

前回動かないというのは、具体的にどのような点がだめだったのでしょうか。

まったく画像が変わりませんでしたか?


今回、動作するサンプルを提示いただけたので、具体的にどのような動作を期待されているか把握できました。

これを拡張した変更例を提示します。

<html>
<head>
<script type="text/javascript">
var images = ["hoge01.jpg", "hoge02.jpg", "hoge03.jpg", "hoge04.jpg"] ;
var	preloadImages = [] ;
var tid = false ;

function changeImage(id, n) {
	//if (tid != false) return ;
	var targetImg = document.getElementById("changing_" + id) ;
	document.getElementById("imgspace_" + id).style.backgroundImage = 'url('+targetImg.src+')' ;
	document.getElementById("imgspace_" + id).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 ;
	if (o < 100) tid = setTimeout("fadeIn(" + id  + "," +(o+10)+")", 100) ;
	else tid = false ;
}

onload = function() {
	for (var i = 0; i < images.length; ++i) {
		preloadImages[i] = new Image() ;
		preloadImages[i].src = images[i] ;
	}
}
</script>
</head>
<body>
	<p onMouseOver="changeImage(1, 0)"><img src="hoge01_sum.jpg"/></p>
	<p onMouseOver="changeImage(1, 1)"><img src="hoge02_sum.jpg"/></p>
	<div id="imgspace_1"><img src="hoge01.jpg" id="changing_1"/></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="imgspace_2"><img src="hoge03.jpg" id="changing_2"/></div>
</body>
</html>

こちらでは上部での動作が、独立して2箇所で動作するのを確認しました。

不具合がありましたら、コメントください。

コメントはまだありません

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

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

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

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