2画像の連動 イベント

質問

2画像の連動させてonmouseover/onmouseoutの処理をさせてたいのですが、教えてください。
A：画像1→画像2→画像1
B：画像3→画像4→画像3

Aにマウスを乗せたときBの処理も
同様Bにマウスを乗せたときAの処理も。

画像1と画像3は同一ページ内ですが離れた場所に表示。

よろしくお願いします。

回答No.2

leap_day

こんにちは

こんな感じで・・・

<script language="javascript">
<!--
function imgon() {
document.getElementById("img1").src = "画像2.gif";
document.getElementById("img2").src = "画像4.gif";
}
function imgoff() {
document.getElementById("img1").src = "画像1.gif";
document.getElementById("img2").src = "画像3.gif";
}
//-->
</script>

<img src = "画像1.gif" id="img1" onMouseover="imgon()" onMouseout="imgoff()">
<p>
<img src = "画像3.gif" id="img2" onMouseover="imgon()" onMouseout="imgoff()">

回答No.1

ANASTASIAK

<script type="text/javascript">
function FuncA(c,d){
document.getElementById('test1').src= 'img/' +c + '.jpg'
document.getElementById('test2').src= 'img/' +d + '.jpg'
}
function FuncB(e,f){
document.getElementById('test1').src= 'img/' +e + '.jpg'
document.getElementById('test2').src= 'img/' +f + '.jpg'
}
</script>

<img src="img/gazou1.jpg" id="test1" onmouseover="FuncA('gazou2','gazou4')" onmouseout=FuncB('gazou1','gazou3') />
<br /><br />
<img src="img/gazou3.jpg" id="test2" />