【応用編】ナビゲーションNo1
WEBサイトにはページ全体の内容がわかるよう
グローバルナビゲーションが設置されます。
mouseover()/mouseout()時に色、文字、デザインを切り替えて
クリック可能であることや見た目の印象付ける方法として広く普及しました。
いくつかサンプルコードとともに実装してみましょう。
【jQuery】
<script type=”text/javascript”>
$(function(){
//織田信長のロールオーバーイメージ
$(“img[src=’images/oda.jpg’]”).mouseover(function(){
$(this).attr(“src”,”images/oda_on.jpg”);
}).mouseout(function(){
$(this).attr(“src”,”images/oda.jpg”);
});
//柴田勝家のロールオーバーイメージ
$(“img[src=’images/shibata.jpg’]”).mouseover(function(){
$(this).attr(“src”,”images/shibata_on.jpg”);
}).mouseout(function(){
$(this).attr(“src”,”images/shibata.jpg”);
});
//前田利家のロールオーバーイメージ
$(“img[src=’images/maeda.jpg’]”).mouseover(function(){
$(this).attr(“src”,”images/maeda_on.jpg”);
}).mouseout(function(){
$(this).attr(“src”,”images/maeda.jpg”);
});
//明智光秀のロールオーバーイメージ
$(“img[src=’images/akechi.jpg’]”).mouseover(function(){
$(this).attr(“src”,”images/akechi_on.jpg”);
}).mouseout(function(){
$(this).attr(“src”,”images/akechi.jpg”);
});
});
</script>
【HTML】
<ul>
<li><a href=”#”><img src=”images/oda.jpg” alt=”織田信長”
width=”109″ height=”36″ /></a></li><!–
–><li><a href=”#”><img src=”images/shibata.jpg” alt=”柴田勝家”
width=”102″ height=”36″ /></a></li><!–
–><li><a href=”#”><img src=”images/maeda.jpg” alt=”前田利家”
width=”100″ height=”36″ /></a></li><!–
–><li><a href=”#”><img src=”images/akechi.jpg” alt=”明智光秀”
width=”97″ height=”36″ /></a></li>
</ul>