Question

36

jQuery, image changing on hover

rated 0 times [ 42] [ 6] / answers: 1 / hits: 103680 / 11 Years ago, sat, july 6, 2013, 12:00:00

Okay, so I have dynamically generated images via PHP, so not necessarily the same images result. And I've spent the last four hours scanning the internet and trying countless things with jQuery and/or CSS, and I've come up with the following that works.

    <a href=build.php?x=1875&y=2020><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover=this.src='images/Market.png' onmouseout=this.src='images/tile_4.jpg' /></a>

<a href=build.php?x=1876&y=2020><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover=this.src='images/Market.png' onmouseout=this.src='images/tile_4.jpg' /></a>

<a href=build.php?x=1877&y=2020><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover=this.src='images/Market.png' onmouseout=this.src='images/tile_4.jpg' /></a>

<a href=build.php?x=1878&y=2020><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover=this.src='images/Market.png' onmouseout=this.src='images/tile_4.jpg' /></a>

<a href=build.php?x=1879&y=2020><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover=this.src='images/Market.png' onmouseout=this.src='images/tile_4.jpg' /></a>

Market.png has a transparent background.

Now, the above works. On mouseover, it displays Market.png with the transparent background part being tile_4.jpg and out mouseout it is tile_4.jpg.

What I want to know: is there ANY way to accomplish the exact same thing as the above with jQuery or CSS? I haven't figured it out, and I've spent hours trying, but I'd rather do something else if at all possible since the above (with massive repetition, the above format is repeated currently around 100 times, but I have plans to expand it to over a 1000 times) will become a bandwidth hog.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

annalise

Add To Favorites

Follow

Total Points: 210

Total Questions: 94

Total Answers: 102

Location: The Bahamas

Member since Tue, Apr 27, 2021

3 Years ago

answered 11 Years ago kamronr · Accepted Answer

You could add a class to each of your <img /> elements, such as 'xyz' (please pick a better name), and then take advantage of the hover() function. Given that your images are dynamic, you could render the image markup with an extra data attribute to serve as the alternate or hover image source. In the end, you might render something like this:

<img class=xyz data-alt-src=/images/Market.png src=/images/tile_4.png />

<img class=xyz data-alt-src=/images/Something.png src=/images/tile_5.png />

And then to apply the switching functionality for each image, you can write a little function that swaps the image src attribute and the data-alt-src attribute on hover-in/hover-out:

var sourceSwap = function () {

    var $this = $(this);

    var newSource = $this.data('alt-src');

    $this.data('alt-src', $this.attr('src'));

    $this.attr('src', newSource);

}

And then it's as simple as executing the function directly using a tiny bit of jQuery event binding:

$(function () {

    $('img.xyz').hover(sourceSwap, sourceSwap);

});

Here's a working example (version 1):

var sourceSwap = function () {

        var $this = $(this);

        var newSource = $this.data('alt-src');

        $this.data('alt-src', $this.attr('src'));

        $this.attr('src', newSource);

    }



    $(function () {

        $('img.xyz').hover(sourceSwap, sourceSwap);

    });

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>

<img class=xyz data-alt-src=http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png src=http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png />

<br/>

<img class=xyz data-alt-src=http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png src=http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png />

<br/>

<img class=xyz data-alt-src=http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png src=http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png />

Here is a spin on Andres Separ's example from the comments. With this selector, you don't need to decorate your images with a marker class. It will also pre-load the alternate source image to help eliminate any lag or flicker when hovering:

$(function() {

    $('img[data-alt-src]').each(function() { 

        new Image().src = $(this).data('alt-src'); 

    }).hover(sourceSwap, sourceSwap); 

});

And here's the second version:

var sourceSwap = function () {

        var $this = $(this);

        var newSource = $this.data('alt-src');

        $this.data('alt-src', $this.attr('src'));

        $this.attr('src', newSource);

    }



    $(function() {

        $('img[data-alt-src]').each(function() { 

            new Image().src = $(this).data('alt-src'); 

        }).hover(sourceSwap, sourceSwap); 

    });

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>

<img data-alt-src=http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png src=http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png />

<br/>

<img data-alt-src=http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png src=http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png />

<br/>

<img data-alt-src=http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png src=http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png />