21

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.

Improve this question
1
  • Well, the problem comes into effect when the image, being dynamically generated, isn't always the same image. For example, one of the other images is coded as: <img style='background:url(images/tile_4.jpg)' src="images/2.jpg" onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/2.jpg'" /> making a simple switch out of the question. Commented Jul 6, 2013 at 23:12

3 Answers 3

Reset to default
59

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

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

Yes, that works. Thanks, it's greatly appreciated. And it also does what I asked if was possible (reduce the amount of code generated in the DOM). Only one thing: seeing as how the overlay png image has a transparent background, it is still required to add img.xyz{background:url(images/tile_4.png);} into the document's stylesheet (using your example class of xyz), so that the transparent background is still that of the proper background image and not that of the page's background color.
now thats a wonderful piece of script.
@Cory Good work! I suggest a little bit! $('img[data-alt-src]').each(function(){ var $this = $(this); new Image().src = $this.data('alt-src'); $this.hover(sourceSwap, sourceSwap); });
@AndresSepar: Thanks, the preloading is a nice touch. I've included your version in my answer.
works great thank you! Especially version 2 with preloading :D
|
15

jQuery

You could use the mouseover and mouseout events :

$("img").on({ "mouseover" : function() { this.src = 'images/Market.png'; }, "mouseout" : function() { this.src='images/tile_4.jpg'; } });

This way you could take out the attributes onmouseout and onmouseover from you HTML and make your code neat.

CSS

However, the easiest way is using CSS:

img { background-image: url('images/tile_4.jpg'); } img:hover { background-image: url('images/Market.png'); }
Improve this answer

5 Comments

It's not always the same images, I said it was dynamically generated. For example, one of the other images is coded as: <img style='background:url(images/tile_4.jpg)' src="images/2.jpg" onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/2.jpg'" /> making a simple switch out of the question.
@WitoldKowelski you'll have to provide the datasource then. from where ae you getting this data? is it JSON?
It's in PHP, with the image src (and thus the onmouseout) coming from a MySQL database. Or is that not what you're asking?
I think u must add a PHP tag to this question and throw in the code where in dynamically add the image, along with a lil snippet of the data u recieve from the server.
Well, I could. If that'd be helpful. The anchor link isn't really that important I think, and it's all through a while loop that calls several PHP functions, but the variable that controls what image is displayed is coded as src=\"images/$ImageNumber.jpg\" where $imageNumber is the 2 in my first comment. If there is no row in the database that corresponds to the DB query, then the result is run through a different function that plainly prints the src out as src='images/tile_4.jpg'
4

Sure, with jQuery it is easy.

$('img').hover(function(){ $(this).attr('src','images/Market.png'); },function(){ $(this).attr('src','images/tile_4.jpg'); });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.