【応用編】ナビゲーションNo3

マウスオーバー時の画像を一度目に使用するとき、
サーバーからファイルを読み込むために時間が必要なため、
スムーズにロールオーバーしないことがあります。
その現象を防ぐために、ページが読み込まれるときに、
ロールオーバー後の画像ファイルも一緒に読み込んでしまいましょう。

【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″)); 
 }).each(function(){
  $(“<img>”).attr(“src”,$(this).attr(“src”).replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″));
 });
});
</script>

【HTML】
ナビゲーションNo1と同じ

ナビゲーションサンプル

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

Comments are closed.