Thay đổi nguồn hình ảnh trên cuộn qua bằng jQuery

Tôi có một vài hình ảnh và hình ảnh tái đầu tư của họ. Sử dụng jQuery, tôi muốn hiển thị / ẩn hình ảnh cuộn qua khi sự kiện onmousemove / onmouseout xảy ra. Tất cả các tên hình ảnh của tôi theo cùng một mẫu, như thế này:

Ảnh gốc: Image.gif

Hình ảnh Rollover: Imageover.gif

Tôi muốn chèn và loại bỏ phần "trên" của nguồn hình ảnh trong sự kiện onmouseover và onmouseout, tương ứng.

Làm cách nào để sử dụng jQuery?

Để thiết lập sẵn sàng:

$(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);
        });
});

Đối với những người sử dụng nguồn hình ảnh 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);

            });
    });

Tôi biết bạn đang hỏi về việc sử dụng jQuery, nhưng bạn có thể đạt được hiệu quả tương tự trong các trình duyệt đã tắt JavaScript bằng 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);
}

Có một mô tả dài hơn ở đây

Tuy nhiên, tốt hơn nữa là sử dụng các họa tiết: đơn giản-css-image-rollover

Nếu bạn có nhiều hơn một hình ảnh và bạn cần một cái gì đó chung chung không phụ thuộc vào quy ước đặt tên.

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">

JavaScript

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

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

Một giải pháp chung không giới hạn bạn ở "hình ảnh này" và "hình ảnh đó" chỉ có thể là thêm các thẻ 'onmouseover' và 'onmouseout' vào chính mã HTML.

HTML

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

JavaScript

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

Tùy thuộc vào thiết lập của bạn, có thể một cái gì đó như thế này sẽ hoạt động tốt hơn (và yêu cầu sửa đổi HTML ít hơn).

HTML

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

JavaScript / 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"]);
  }

$('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
    });
});

Bạn có thể muốn thay đổi lớp hình ảnh từ dòng đầu tiên. Nếu bạn cần thêm các lớp hình ảnh (hoặc đường dẫn khác), bạn có thể sử dụng

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

và như thế.

Nó nên hoạt động, tôi đã không kiểm tra nó :)

Tôi đã hy vọng cho một lớp lót über như:

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

Nếu giải pháp bạn đang tìm kiếm là một nút hoạt hình, thì cách tốt nhất bạn có thể làm để cải thiện hiệu suất là sự kết hợp giữa các họa tiết và CSS. Sprite là một hình ảnh khổng lồ chứa tất cả các hình ảnh từ trang web của bạn (tiêu đề, logo, nút và tất cả các trang trí bạn có). Mỗi hình ảnh bạn có sử dụng một yêu cầu HTTP và càng nhiều yêu cầu HTTP thì càng mất nhiều thời gian để tải.

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

Các 0px 0pxtọa độ sẽ là góc trên bên trái từ các họa tiết của bạn.

Nhưng nếu bạn đang phát triển một số album ảnh với Ajax hoặc một cái gì đó tương tự, thì JavaScript (hoặc bất kỳ khung nào) là tốt nhất.

Chúc vui vẻ!

$('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); 
});

Trong khi tìm kiếm một giải pháp một thời gian trước, tôi đã tìm thấy một kịch bản tương tự như bên dưới, mà sau một số điều chỉnh tôi đã làm việc cho tôi.

Nó xử lý hai hình ảnh, hầu như luôn luôn mặc định là "tắt", trong đó chuột tắt hình ảnh (image-example_off.jpg) và thỉnh thoảng "bật", trong đó đối với những lần chuột được di chuột, hình ảnh thay thế bắt buộc ( image-example_on.jpg) được hiển thị.

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

<!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>

Tôi đã tạo ra một cái gì đó giống như mã sau đây :)

Nó chỉ hoạt động, khi bạn có một tệp thứ hai có tên _hover, ví dụ, facebook.pngvà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);
});

<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();

Được chuyển thể từ mã của Richard Ayotte - Để nhắm mục tiêu một img trong danh sách ul / li (được tìm thấy qua lớp div của trình bao bọc ở đây), đại loại như thế này:

$('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') }
);