Ubah sumber gambar pada rollover menggunakan jQuery

Saya punya beberapa gambar dan gambar rollover mereka. Menggunakan jQuery, saya ingin menampilkan / menyembunyikan gambar rollover ketika peristiwa onmousemove / onmouseout terjadi. Semua nama gambar saya mengikuti pola yang sama, seperti ini:

Gambar asli: Image.gif

Gambar Rollover: Imageover.gif

Saya ingin menyisipkan dan menghapus bagian "over" dari sumber gambar di acara onmouseover dan onmouseout.

Bagaimana saya bisa melakukannya menggunakan jQuery?

Untuk menyiapkan siap:

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

Bagi mereka yang menggunakan sumber gambar 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);

            });
    });

Saya tahu Anda bertanya tentang menggunakan jQuery, tetapi Anda dapat mencapai efek yang sama di browser yang menonaktifkan JavaScript menggunakan 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);
}

Ada deskripsi yang lebih panjang di sini

Namun yang lebih baik adalah menggunakan sprite: simple-css-image-rollover

Jika Anda memiliki lebih dari satu gambar dan Anda memerlukan sesuatu yang umum yang tidak bergantung pada konvensi penamaan.

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

Solusi umum yang tidak membatasi Anda untuk "gambar ini" dan "gambar itu" hanya mungkin menambahkan tag 'onmouseover' dan 'onmouseout' ke kode HTML itu sendiri.

HTML

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

JavaScript

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

Bergantung pada pengaturan Anda, mungkin sesuatu seperti ini akan bekerja lebih baik (dan membutuhkan lebih sedikit modifikasi HTML).

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

Anda mungkin ingin mengubah kelas gambar dari baris pertama. Jika Anda membutuhkan lebih banyak kelas gambar (atau jalur berbeda) yang dapat Anda gunakan

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

dan seterusnya.

Seharusnya berhasil, saya tidak mengujinya :)

Saya berharap untuk oneber one liner seperti:

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

Jika solusi yang Anda cari adalah tombol animasi, maka yang terbaik yang dapat Anda lakukan untuk meningkatkan kinerja adalah kombinasi sprite dan CSS. Sprite adalah gambar besar yang berisi semua gambar dari situs Anda (tajuk, logo, tombol, dan semua dekorasi yang Anda miliki). Setiap gambar yang Anda gunakan menggunakan permintaan HTTP, dan semakin banyak permintaan HTTP semakin banyak waktu yang diperlukan untuk memuat.

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

The 0px 0pxkoordinat akan pojok kiri dari sprite Anda.

Tetapi jika Anda sedang mengembangkan beberapa album foto dengan Ajax atau sesuatu seperti itu, maka JavaScript (atau kerangka kerja apa pun) adalah yang terbaik.

Selamat bersenang-senang!

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

Sementara mencari solusi beberapa waktu lalu, saya menemukan skrip yang mirip dengan di bawah ini, yang setelah beberapa penyesuaian saya berhasil untuk saya.

Ini menangani dua gambar, yang hampir selalu default ke "off", di mana mouse dari gambar (image-example_off.jpg), dan sesekali "on", di mana untuk saat mouse melayang-layang, gambar alternatif yang diperlukan ( image-example_on.jpg) ditampilkan.

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

Saya telah membuat sesuatu seperti kode berikut ini :)

Ini hanya berfungsi, ketika Anda memiliki file kedua bernama _hover, misalnya, facebook.pngdanfacebook_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();

Diadaptasi dari kode Richard Ayotte - Untuk menargetkan img dalam daftar ul / li (ditemukan melalui kelas div wrapper di sini), sesuatu seperti ini:

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