jQueryによるマウスオーバー処理
0pt
hoge_off.jpg hoge_on.jpgという画像ファイル名にして自動で切り替える
通常
$(document).ready(function(){ $("img[src*='_on']").addClass("current"); $("img,input").mouseover(function(){ if ($(this).attr("src")){ $(this).attr("src",$(this).attr("src").replace("_off.", "_on.")); } }); $("img[class!='current'],input").mouseout(function(){ if ($(this).attr("src")){ $(this).attr("src",$(this).attr("src").replace("_on.", "_off.")); } }); });
選択された部分はmouseoutしてもそのまま
var flug = 1; $(document).ready(function(){ $("img[src*='_on']").addClass("current"); $("img,input").mouseover(function(){ if ($(this).attr("src")){ $(this).attr("src",$(this).attr("src").replace("_off.", "_on.")); } }); $("img[class!='current'],input").mouseout(function(){ if ($(this).attr("src")){ $(this).attr("src",$(this).attr("src").replace("_on.", "_off.")); $('a#a_tab'+flug+' img').attr("src","img/tab"+flug+"_on.jpg");// } }); $('a#a_tab'+flug+' img').attr("src","img/tab"+flug+"_on.jpg"); }); function tabs(id){ $('#tab1').css("display" , "none"); $('#tab2').css("display" , "none"); $('#tab'+id).css("display" , "block"); $('a#a_tab1 img').attr("src","img/tab1_off.jpg"); $('a#a_tab2 img').attr("src","img/tab2_off.jpg"); $('a#a_tab'+id+' img').attr("src","img/tab"+id+"_on.jpg"); flug = id; }
trとかdivとかリンクじゃないやつもマウスオーバー反転させられる
<script> $("table.hoge tr").mouseover(function(){ $(this).addClass("active"); }).mouseout(function(){ $(this).removeClass("active"); }); </script>
selectされたoptionに応じてアクション
$("select").change(function () { $("select#"+$("select#hoge").val()).css("display","block"); }) .trigger('change');
「jQueryによるマウスオーバー処理」について友人に書いてもらう。
コメントはまだありません