【応用編】ナビゲーション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>

ナビゲーションサンプル

This entry was written by admin , posted on 日曜日 6月 26 2011at 03:06 pm , filed under 応用例 and tagged . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

Comments are closed.