jQueryによるマウスオーバー処理
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');