マウスオーバーで別の場所の画像をスワップさせる方法を 2 種類紹介します。
■ HTML 内に Swap させる画像を記述する方法
-- ヘッダー内 Start --
<SCRIPT language="JavaScript"><!--
function mySwapImgFile(mySwapImgURL){
document.images["mySwapImgTarget"].src = mySwapImgURL;
}
// --></SCRIPT>
-- ヘッダー内 End--
-- マウスオーバー部分 Start --
<ul id="nav" class="clearfix">
<li><a href="#" onMouseOver="mySwapImgFile('top/images/main1.jpg')" onMouseOut="mySwapImgFile('top/images/main.jpg')"><img src="common/images/nav1_rollout.jpg" width="142" height="138" alt="" /></a></li>
<li><a href="#" onMouseOver="mySwapImgFile('top/images/main2.jpg')" onMouseOut="mySwapImgFile('top/images/main.jpg')"><img src="common/images/nav2_rollout.jpg" width="142" height="149" alt=""/></a></li>
<li><a href="#" onMouseOver="mySwapImgFile('top/images/main3.jpg')" onMouseOut="mySwapImgFile('top/images/main.jpg')"><img src="common/images/nav3_rollout.jpg" width="142" height="135" alt=""/></a></li>
<li><a href="#" onMouseOver="mySwapImgFile('top/images/main4.jpg')" onMouseOut="mySwapImgFile('top/images/main.jpg')"><img src="common/images/nav4_rollout.jpg" width="147" height="147" alt=""/></a></li>
</ul>
-- マウスオーバー部分 End --
-- Swap 部分 Start --
<img src="top/images/main.jpg" width="900" height="333" name="mySwapImgTarget" alt="メインイメージ" />
-- Swap 部分 End --
■ HTML 内に Swap させる画像を記述する方法
-- ヘッダー内 Start --
<script language="JavaScript">
<!--
image = new Array();
nImageLength = 5;
image[ 0 ] = new Image();
image[ 0 ].src = "top/images/main.jpg";
image[ 1 ] = new Image();
image[ 1 ].src = "top/images/main1.jpg";
image[ 2 ] = new Image();
image[ 2 ].src = "top/images/main2.jpg";
image[ 3 ] = new Image();
image[ 3 ].src = "top/images/main3.jpg";
image[ 4 ] = new Image();
image[ 4 ].src = "top/images/main4.jpg";
function Img(n){
if(document.images){
document.myImg.src=image[n].src;
}
}
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
-- ヘッダー内 End--
-- マウスオーバー部分 Start --
<ul id="nav" class="clearfix">
<li><a href="#" onMouseOver="MM_callJS('Img( 1 )');" onMouseOut="MM_callJS('Img( 0 )');"><img src="common/images/nav1_rollout.jpg" width="142" height="138" alt="" /></a></li>
<li><a href="#" onMouseOver="MM_callJS('Img( 2 )');" onMouseOut="MM_callJS('Img( 0 )');"><img src="common/images/nav2_rollout.jpg" width="142" height="149" alt=""/></a></li>
<li><a href="#" onMouseOver="MM_callJS('Img( 3 )');" onMouseOut="MM_callJS('Img( 0 )');"><img src="common/images/nav3_rollout.jpg" width="142" height="135" alt=""/></a></li>
<li><a href="#" onMouseOver="MM_callJS('Img( 4 )');" onMouseOut="MM_callJS('Img( 0 )');"><img src="common/images/nav4_rollout.jpg" width="147" height="147" alt=""/></a></li>
</ul>
-- マウスオーバー部分 End --
-- Swap 部分 Start --
<img src="top/images/main.jpg" width="900" height="333" name="myImg" alt="メインイメージ" />
-- Swap 部分 End --