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

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



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

▽最新の回答へ

1 ● Mook
●60ポイント

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

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


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

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

<html>
<head>
<script type="text/javascript">
var images = ["hoge01.jpg", "hoge02.jpg", "hoge03.jpg", "hoge04.jpg"] ;
varpreloadImages = [] ;
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箇所で動作するのを確認しました。

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

関連質問


●質問をもっと探す●



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