jQuery基本構文集

前回の方法でロールオーバーイメージを作った場合、
ボタン一つ一つにコードを書く必要があり、
ナビゲーションの数が変わるたびにコードを追加修正するのは
メンテナンス性の悪いコードです。
正規表現を使って、マウスオーバー時、マウスアウト時をスマートな書き方になるよう工夫しましょう。
これならば、ナビゲーションの数がいくつになってもコードを直す必要はありません。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“img.rollover”).mouseover(function(){
  $(this).attr(“src”,$(this).attr(“src”).replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″)); 
 }).mouseout(function(){
  $(this).attr(“src”,$(this).attr(“src”).replace(/^(.+)_on(\.[a-z]+)$/,”$1$2″)); 
 });
});
</script>

【HTML】
<ul>
     <li><a href=”#”><img src=”images/oda.jpg” alt=”織田信長” />
          </a></li><!–
  –><li><a href=”#”><img src=”images/shibata.jpg” alt=”柴田勝家” />
          </a></li><!–
  –><li><a href=”#”><img src=”images/maeda.jpg” alt=”前田利家” />
           </a></li><!–
  –><li><a href=”#”><img src=”images/akechi.jpg” alt=”明智光秀” />
           </a></li>
</ul>

ナビゲーションサンプル

Comments are closed.