img 태그의 src 특성을 바꿀 정규 표현식

Question

정상적으로 작동하는 정규 표현식이 필요합니다. 현재 사용하고있는 정규 표현식이 손상되었습니다. 나는 동적으로 이미지의 SRC를 찾아로 교체 호버에 jQuery를 사용 의 image.png

참고 ImageName-Dn.png

:

목표는

이미지에 대한

일반 SRC가이다

$(document).ready(function(){ 
    $(".myButton").hover(
     function() { 
      var s = $(this).attr('src'); 
      s = s.substring(0, s.search(/(\.[a-z]+)$/)) + '-Dn' + s.match(/(\.[a-z]+)$/)[0]; 
      $(this).attr('src', s); 
     }, 
     function() { 
      var o = $(this).attr('src'); 
      o = o.replace(/-Dn\./, '.'); 
      $(this).attr('src', o); 
     } 

    ); 
}); 

: 호버에

오프는 다시 ImageName.png에

내 현재 솔루션을 설정

그러나 어떤 이유로 이미지는 ImageName-Dn.png으로 설정되고 나사가 올라가서 ImageName-Dn-Dn.png 등으로 설정됩니다. 어떤 도움?

Answer 1

마우스 오버 효과가 있습니까? 이미지 스프라이트를 사용하지 않는 이유는 무엇입니까? 효과적으로 두 이미지 버전을 나란히 포함하는 이미지 1 개를 만들어서 표시 할 요소의 배경으로 설정하면됩니다.

예를 들어, 10x10 이미지이고 마우스 오버 버전은 마우스 오버 버전 상단에 원본과 함께 10x20 이미지가됩니다.

그런 다음 10x20 이미지로 설정된 배경 이미지로 10x10 div를 만들 수 있습니다. 상위 10x10 만 표시되기 때문에 원본 버전 만 볼 수 있습니다.

그런 다음 자바 스크립트 당신은 단순히 호버 이벤트에

$(el).style.backgroundPosition = '0px -10px'; 

에 이벤트에 전화를 연결할 수 있으며,

$(el).style.backgroundPosition = '0px 0px'; 

는

이가에 대한 배경을 이동합니다 재설정 마우스 오버. 이것은 단순한 이미지 스왑을위한 regex를 다루는 것보다 더 깔끔할뿐만 아니라 페이지를로드해야하는 파일의 수를 줄여줍니다.

희망이 도움이됩니다.

Answer 2

function() { 
     var s = $(this).attr('src'); 
     if(!s.match(/-Dn\.[a-z]+$/)) { 
      s = s.substring(0, s.search(/(\.[a-z]+)$/)) + '-Dn' + s.match(/(\.[a-z]+)$/)[0]; 
      $(this).attr('src', s); 
     } 
    }, 
    function() { 
     var o = $(this).attr('src'); 
     o = o.replace(/-Dn\./, '.'); 
     $(this).attr('src', o); 
    } 

(추가 조건)

Answer 3

빠른 수정 문자열이 이미에 -dn이없는 경우 테스트하는 것입니다 : 또한

if (!string.match(/-Dn\./)) 

을 정규 표현식에, 당신이 돈 ' 문자열을 수동으로 분할하고 여러 검색을 수행해야합니다.

string.replace(/(.*)\.(.*)/, "$1-Dn.$2") 

당신이 자바 스크립트에 대한 정규 표현식에 위로 읽으려면 : http://en.wikibooks.org/wiki/JavaScript/Regular_Expressions

당신은 당신과 같은 하나의 대체 명령에 필요한받을 그룹을 사용할 수 있습니다