Mengubah sumber gambar pada rollover menggunakan jQuery

Saya memiliki beberapa gambar dan gambar rollover. Dengan menggunakan jQuery, saya ingin menampilkan/menyembunyikan rollover image ketika onmousemove/onmouseout event terjadi. Semua gambar saya nama-nama yang mengikuti pola yang sama, seperti ini:

Asli Gambar: Image.gif

Rollover Image: Imageover.gif

Saya ingin menyisipkan dan menghapus "lebih" sebagian sumber gambar di onmouseover dan onmouseout event, masing-masing.

Bagaimana saya bisa melakukannya dengan menggunakan jQuery?

lowtechsun
Pertanyaan edit 18 April 2016 в 10:12
Pemrograman
html jquery
12 Februari 2009 в 7:28
8 tayangan
Mengomentari pertanyaan (4)
Larutan

Untuk mengatur pada 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);
        });
});

Untuk orang-orang yang menggunakan url sumber gambar:

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

            });
    });
jemmamariex3
Jawaban edit 4 Januari 2019 в 4:41
Komentar (10)

Aku tahu kau're bertanya tentang menggunakan jQuery, tapi anda dapat mencapai efek yang sama dalam browser yang memiliki JavaScript yang dinonaktifkan 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's deskripsi lagi di sini

Bahkan lebih baik, namun, untuk menggunakan sprite: sederhana-css-gambar-rollover

ankit suthar
Jawaban edit 8 September 2017 в 11:24
Komentar (6)

Jika anda memiliki lebih dari satu gambar, dan anda perlu sesuatu yang generik yang doesn't tergantung pada konvensi penamaan.

HTML

JavaScript

$('img').bind('mouseenter mouseleave', function() {
    $(this).attr({
        src: $(this).attr('data-other-src') 
        , 'data-other-src': $(this).attr('src') 
    })
});
Komentar (2)
    /* Teaser image swap function */
    $('img.swap').hover(function () {
        this.src = '/images/signup_big_hover.png';
    }, function () {
        this.src = '/images/signup_big.png';
    });
Komentar (4)

Solusi generik yang doesn't membatasi anda untuk "ini gambar" dan "gambar" hanya mungkin untuk menambahkan 'onmouseover' dan 'onmouseout' kategori ke HTML itu sendiri.

HTML

JavaScript

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

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

HTML

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"]);
  }
DACrosby
Jawaban edit 11 September 2013 в 7:56
Komentar (0)
$('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 gambar kelas (atau jalan yang berbeda), anda dapat menggunakan

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

dan sebagainya.

Itu harus bekerja, aku didn't test itu :)

Komentar (3)

Saya berharap untuk über one liner seperti:

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

Jika solusi yang anda cari untuk animasi tombol, maka yang terbaik yang dapat anda lakukan untuk meningkatkan kinerja adalah kombinasi dari sprite dan CSS. Sprite adalah sebuah gambar besar yang berisi semua gambar dari situs anda (header, logo, tombol, dan semua dekorasi yang anda miliki). Setiap gambar yang anda telah menggunakan HTTP request, dan lebih banyak permintaan HTTP semakin banyak waktu yang dibutuhkan 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 0px koordinat akan pojok kiri dari sprite.

Tetapi jika anda mengembangkan beberapa album foto dengan Ajax atau sesuatu seperti itu, maka JavaScript (atau framework) adalah yang terbaik.

Bersenang-senang!

kevinji
Jawaban edit 29 Juli 2013 в 7:20
Komentar (0)
 
$('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); 
});
Komentar (0)

Sementara mencari solusi beberapa waktu yang lalu, saya menemukan sejenis script di bawah ini, yang setelah beberapa tweaking aku bekerja untuk saya.

Ini menangani dua gambar, yang hampir selalu default "off", di mana mouse ini dari gambar (image-example_off.jpg), dan kadang-kadang "on", dimana untuk kali mouse melayang, diperlukan alternatif gambar (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>
Peter Mortensen
Jawaban edit 29 Juli 2013 в 9:30
Komentar (1)
 



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
JQuery
<script src="jquery.js" type="text/javascript"> </script>

    #box{
        width: 68px;
        height: 27px;
        background: url(images/home1.gif);
        cursor: pointer;
    }


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



<div id="box" onclick="location.href='index.php';"></div>
Komentar (0)

I've membuat sesuatu seperti kode berikut ini :)

Ia bekerja hanya, ketika anda memiliki file kedua bernama dengan _hover, misalnya, facebook.png dan 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);
});
Peter Mortensen
Jawaban edit 29 Juli 2013 в 9:28
Komentar (0)
 


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

Diadaptasi dari Richard Ayotte's kode - Untuk menargetkan img di ul/li daftar (ditemukan melalui pembungkus div class 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') }
);
Komentar (0)