同ページ内に２箇所、別々に画像が変わる箇所を設置したいです。
(前回も同質問をさせていただいたのですが、解決しなかったので。。)
下記ページに片方だけ動作しているものをアップしました。
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>
No.1
1314
393
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箇所で動作するのを確認しました。
不具合がありましたら、コメントください。
97
93
1
1
2
コメント（0件)