ホームページ作成の小技-BreathTake-

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--------(--) --:-- スポンサー広告 編集 |

メニューバーとタイトルの画像の同時変更(JavaScrip)

①<head></head>内に書くスクリプト
<SCRIPT language=JavaScript>
<!--
function changeIMG(img_name){
 var img_name;
 var ch_img;
 ch_img = img_name;
 document.imgchange.src=ch_img;
 return ch_img;
}
//-->
</SCRIPT>

②変更用画像の設定(タイトルの画像等)
<img src="images/photo1.jpg"  name="imgchange" >

3メニューバーの設定
<ul>
<li><a href="#"><img src="./images/menu1.jpg" onMouseOver="changeIMG('./images/photo1.jpg');this.src='./images/menu1_on.jpg'" onmouseout="this.src='./images/menu1.jpg'" border="0"></a></li>
<li><a href="#"><img src="./images/menu2.jpg" onMouseOver="changeIMG('./images/photo2.jpg');this.src='./images/menu2_on.jpg'" onmouseout="this.src='./images/menu2.jpg'" border="0"></a></li>
<li><a href="#"><img src="./images/menu3.jpg" onMouseOver="changeIMG('./images/photo3.jpg');this.src='./images/menu3_on.jpg'" onmouseout="this.src='./images/menu3.jpg'" border="0"></a></li>
<li><a href="#"><img src="./images/menu4.jpg" onMouseOver="changeIMG('./images/photo5.jpg');this.src='./images/menu4_on.jpg'" onmouseout="this.src='./images/menu4.jpg'" border="0"></a></li>
</ul>

■メニューバーのメニューにカーソルを持ってくると、img src="~"で設定されたメニュー画像が、this.src='~'で設定した画像に変更されます。
■同時に、<img src="images/photo1.jpg"  name="~" >で設定した画像が、changeIMG('~')で指定した画像に変更されます。
■カーソルを移動させると、メニュー画像は、monmouseout="this.src='~'"で指定した画像に変更されます。

スポンサーサイト
copyright © 2011 BreathTake all rights reserved. / Template By innerlife02
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。