복붙노트

[JQUERY] jQuery를 사용하여 롤오버 이미지 소스 변경

JQUERY

jQuery를 사용하여 롤오버 이미지 소스 변경

해결법

  1. 1.준비에 설정하려면 :

    준비에 설정하려면 :

    $(function() {
    $("img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("over.gif", ".gif");
            $(this).attr("src", src);
        });
});

    URL 이미지 소스를 사용하는 사람들을 위해 :

    $(function() {
        $("img")
            .mouseover(function() {
               var src = $(this).attr("src");
               var regex = /_normal.svg/gi;
               src = this.src.replace(regex,'_rollover.svg');
               $(this).attr("src", src);

            })
            .mouseout(function() {
               var src = $(this).attr("src");
               var regex = /_rollover.svg/gi;
               src = this.src.replace(regex,'_normal.svg');
               $(this).attr("src", src);

            });
    });

  2. 2.난 당신이 jQuery를 사용하는 방법에 대해 묻는 거 알아,하지만 당신은 자바 스크립트를 CSS를 사용하여 꺼져 브라우저에서 동일한 효과를 얻을 수 있습니다 :

    난 당신이 jQuery를 사용하는 방법에 대해 묻는 거 알아,하지만 당신은 자바 스크립트를 CSS를 사용하여 꺼져 브라우저에서 동일한 효과를 얻을 수 있습니다 :

    #element {
    width: 100px; /* width of image */
    height: 200px; /* height of image */
    background-image: url(/path/to/image.jpg);
}

#element:hover {
    background-image: url(/path/to/other_image.jpg);
}

    여기에 더 이상 설명이있다

    더 나은 그러나, 스프라이트를 사용하는 것입니다 간단한 CSS-이미지 롤오버

  3. 3.두 개 이상의 이미지를 가지고 당신은 이름 지정 규칙에 의존하지 않는 일반적인 뭔가가 필요합니다.

    두 개 이상의 이미지를 가지고 당신은 이름 지정 규칙에 의존하지 않는 일반적인 뭔가가 필요합니다.

    HTML

    <img data-other-src="big-zebra.jpg" src="small-cat.jpg">
<img data-other-src="huge-elephant.jpg" src="white-mouse.jpg">
<img data-other-src="friendly-bear.jpg" src="penguin.jpg">

    자바 스크립트

    $('img').bind('mouseenter mouseleave', function() {
    $(this).attr({
        src: $(this).attr('data-other-src') 
        , 'data-other-src': $(this).attr('src') 
    })
});

  4. 4.

        /* Teaser image swap function */
    $('img.swap').hover(function () {
        this.src = '/images/signup_big_hover.png';
    }, function () {
        this.src = '/images/signup_big.png';
    });

  5. 5."이 이미지"와 "해당 이미지"당신을 제한하지 않는 일반적인 솔루션은 HTML 코드 자체에 'onMouseover와'와 'onmouseout'태그를 추가 할 수 있습니다.

    "이 이미지"와 "해당 이미지"당신을 제한하지 않는 일반적인 솔루션은 HTML 코드 자체에 'onMouseover와'와 'onmouseout'태그를 추가 할 수 있습니다.

    HTML

    <img src="img1.jpg" onmouseover="swap('img2.jpg')" onmouseout="swap('img1.jpg')" />

    자바 스크립트

    function swap(newImg){
  this.src = newImg;
}

    사용자의 설정에 따라,이 같은 아마 뭔가 더 잘 작동 것 (덜 HTML 수정 필요).

    HTML

    <img src="img1.jpg" id="ref1" />
<img src="img3.jpg" id="ref2" />
<img src="img5.jpg" id="ref3" />

    자바 스크립트 / jQuery를

    // Declare Arrays
  imgList = new Array();
  imgList["ref1"] = new Array();
  imgList["ref2"] = new Array();
  imgList["ref3"] = new Array();

//Set values for each mouse state
  imgList["ref1"]["out"] = "img1.jpg";
  imgList["ref1"]["over"] = "img2.jpg";
  imgList["ref2"]["out"] = "img3.jpg";
  imgList["ref2"]["over"] = "img4.jpg";
  imgList["ref3"]["out"] = "img5.jpg";
  imgList["ref3"]["over"] = "img6.jpg";

//Add the swapping functions
  $("img").mouseover(function(){
    $(this).attr("src", imgList[ $(this).attr("id") ]["over"]);
  }

  $("img").mouseout(function(){
    $(this).attr("src", imgList[ $(this).attr("id") ]["out"]);
  }

  6. 6.

    $('img.over').each(function(){
    var t=$(this);
    var src1= t.attr('src'); // initial src
    var newSrc = src1.substring(0, src1.lastIndexOf('.'));; // let's get file name without extension
    t.hover(function(){
        $(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension   
    }, function(){
        $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name
    });
});

    당신은 첫 번째 줄에서 이미지의 클래스를 변경할 수 있습니다. 당신은 이미지 클래스 (또는 다른 경로) 더 필요하면 당신은 사용할 수 있습니다

    $('img.over, #container img, img.anotherOver').each(function(){

    등등.

    그것은 내가 그것을 테스트하지 않았다 작동합니다 :)

  7. 7.나는 동네 짱 하나 라이너 같은 기대했다 :

    나는 동네 짱 하나 라이너 같은 기대했다 :

    $("img.screenshot").attr("src", $(this).replace("foo", "bar"));

  8. 8.당신이 찾고있는 솔루션이 애니메이션 버튼의 경우, 성능 개선하기 위해 할 수있는 최선의 스프라이트와 CSS의 조합입니다. 스프라이트 사이트 (헤더, 로고, 버튼 및 모든 장식 당신이 가진)에서 모든 이미지가 포함 된 큰 이미지입니다. 당신은 각각의 이미지는 HTTP 요청을 사용하고, 더 많은 HTTP가 부하에 걸릴 더 많은 시간을 요구한다.

    당신이 찾고있는 솔루션이 애니메이션 버튼의 경우, 성능 개선하기 위해 할 수있는 최선의 스프라이트와 CSS의 조합입니다. 스프라이트 사이트 (헤더, 로고, 버튼 및 모든 장식 당신이 가진)에서 모든 이미지가 포함 된 큰 이미지입니다. 당신은 각각의 이미지는 HTTP 요청을 사용하고, 더 많은 HTTP가 부하에 걸릴 더 많은 시간을 요구한다.

    .buttonClass {
    width: 25px;
    height: 25px;
    background: url(Sprite.gif) -40px -500px;
}
.buttonClass:hover {
    width: 25px;
    height: 25px;
    background: url(Sprite.gif) -40px -525px;
}

    0 픽셀 0 픽셀 좌표는 스프라이트의 왼쪽 상단 모서리 될 것입니다.

    당신이 같은 일부 사진 아약스와 앨범 또는 뭔가를 개발하는 경우, 그때 자바 스크립트 (또는 프레임 워크) 최고입니다.

    재미를!

  9. 9.

    $('img').mouseover(function(){
  var newSrc = $(this).attr("src").replace("image.gif", "imageover.gif");
  $(this).attr("src", newSrc); 
});
$('img').mouseout(function(){
  var newSrc = $(this).attr("src").replace("imageover.gif", "image.gif");
  $(this).attr("src", newSrc); 
});

  10. 10.약간의 시간이 다시 솔루션을 찾고 동안, 나는 일부 조정 후 나는 나를 위해 일하고있어 아래에 유사한 스크립트를 발견했다.

    약간의 시간이 다시 솔루션을 찾고 동안, 나는 일부 조정 후 나는 나를 위해 일하고있어 아래에 유사한 스크립트를 발견했다.

    그것은 거의 항상 (시간을 위해 마우스를 가리킬 마우스가 이미지 (이미지 example_off.jpg) 떨어져있다 "오프", 및 "의"가끔, 필요한 다른 이미지에 기본 것으로, 두 개의 이미지를 처리 example_on.jpg 화상)이 표시된다.

    <script type="text/javascript">        
    $(document).ready(function() {        
        $("img", this).hover(swapImageIn, swapImageOut);

        function swapImageIn(e) {
            this.src = this.src.replace("_off", "_on");
        }
        function swapImageOut (e) {
            this.src = this.src.replace("_on", "_off");
        }
    });
</script>

  11. 11.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery</title>
<script src="jquery.js" type="text/javascript"> </script>
<style type="text/css">
    #box{
        width: 68px;
        height: 27px;
        background: url(images/home1.gif);
        cursor: pointer;
    }
</style>

<script type="text/javascript">

$(function(){

    $('#box').hover( function(){
        $('#box').css('background', 'url(images/home2.gif)');

    });
    $('#box').mouseout( function(){
        $('#box').css('background', 'url(images/home1.gif)');

    });

});
</script>
</head>

<body>
<div id="box" onclick="location.href='index.php';"></div>
</body>
</html>

  12. 12.나는 다음과 같은 코드를 만들었어요 :)

    나는 다음과 같은 코드를 만들었어요 :)

    당신이 _hover와 함께라는 두 번째 파일이 때 예를 들어, facebook.png 및 facebook_hover.png를 들어, 만 작동

    $('#social').find('a').hover(function() {
    var target = $(this).find('img').attr('src');
    //console.log(target);
    var newTarg = target.replace('.png', '_hover.png');
    $(this).find('img').attr("src", newTarg);
}, function() {
    var target = $(this).find('img').attr('src');
    var newTarg = target.replace('_hover.png', '.png');
    $(this).find('img').attr("src", newTarg);
});

  13. 13.

    <img src="img1.jpg" data-swap="img2.jpg"/>



img = {

 init: function() {
  $('img').on('mouseover', img.swap);
  $('img').on('mouseover', img.swap);
 }, 

 swap: function() {
  var tmp = $(this).data('swap');
  $(this).attr('data-swap', $(this).attr('src'));
  $(this).attr('str', tmp);
 }
}

img.init();

  14. 14.리처드에 Ayotte의 코드에서 적응 - 는 UL / 리 목록에서 IMG을 대상으로이 같은 (여기 래퍼 DIV 클래스를 통해 발견) :

    리처드에 Ayotte의 코드에서 적응 - 는 UL / 리 목록에서 IMG을 대상으로이 같은 (여기 래퍼 DIV 클래스를 통해 발견) :

    $('div.navlist li').bind('mouseenter mouseleave', function() {    
    $(this).find('img').attr({ src: $(this).find('img').attr('data-alt-src'), 
    'data-alt-src':$(this).find('img').attr('src') }
);

    15. from https://stackoverflow.com/questions/540349/change-the-image-source-on-rollover-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 오브젝트 속성에 기초하여 제거 배열 요소  (0) 2020.10.02
[JQUERY] jQuery를에 체크 박스 값을 검색하는 방법  (0) 2020.10.02
[JQUERY] 자바 스크립트 CONSOLE.LOG는 오류가 발생합니다 : "동기 XMLHttpRequest를 메인 스레드에서 사용되지 않습니다 ..."  (0) 2020.10.02
[JQUERY] 각 루프의 jQuery 탈출하는 방법  (0) 2020.10.02
[JQUERY] 무엇 않는 (기능 ($) {}) (jQuery를); 평균?  (0) 2020.10.02
,

티스토리툴바