JQuery

롤오버시 이미지 변경

깜장하마 2011. 2. 26. 01:21

방법 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>