티스토리 뷰
방법 1.
$(document).ready(function(){
$(".eventimg").mouseover(function (){
var file = $(this).attr('src').split('/');
var filename = file[file.length-1];
var path = '';
for(i=0 ; i < file.length-1 ; i++){
path = ( i == 0 )?path + file[i]:path + '/' + file[i];
}
$(this).attr('src','/aaa/bbb/image/event_on.gif');
}).mouseout(function(){
var file = $(this).attr('src').split('/');
var filename = file[file.length-1];
var path = '';
for(i=0 ; i < file.length-1 ; i++){
path = ( i == 0 )?path + file[i]:path + '/' + file[i];
}
$(this).attr('src','/aaa/bbb/image/event_off.gif');
});
});
방법 2.
$('#imglyr0').click(function(){
$('#imglyr0').attr('src',"/aaa/bbb/image/event_on.gif");
$('#imglyr1').attr('src',"/aaa/bbb/image/event_off.gif");
$('#imglyr2').attr('src',"/aaa/bbb/image/event_off.gif");
});
$('#imglyr1').click(function(){
$('#imglyr0').attr('src',"/aaa/bbb/image/event_off.gif");
$('#imglyr1').attr('src',"/aaa/bbb/image/event_on.gif");
$('#imglyr2').attr('src',"/aaa/bbb/image/event_off.gif");
});
$('#imglyr2').click(function(){
$('#imglyr0').attr('src',"/aaa/bbb/image/event_off.gif");
$('#imglyr1').attr('src',"/aaa/bbb/image/event_off.gif");
$('#imglyr2').attr('src',"/aaa/bbb/image/event_on.gif");
});
<ul>
<li><img src="/aaa/bbb/image/event_on.gif" alt="이벤트 01" id="imglyr0" name="imglyr0" class="eventimg" /></li>
<li><img src="/aaa/bbb/image/event_off.gif" alt="이벤트 02" id="imglyr1" name="imglyr1" class="eventimg" /></li>
<li><img src="/aaa/bbb/image/event_off.gif" alt="이벤트 03" id="imglyr2" name="imglyr2" class="eventimg" /></li>
</ul>
'JQuery' 카테고리의 다른 글
SVG를 이용하여 구글 챠트내 배경 이미지 변경 (0) | 2020.01.15 |
---|---|
jquery selector (0) | 2019.10.07 |
체크박스 팁 (0) | 2014.03.24 |
Loading... (0) | 2014.01.17 |
class 하위의 span의 id값 가져오기 (0) | 2013.11.06 |