- This topic is empty.
January 16, 2015 at 7:12 am #193426
I have an four links that contain an image. I want to replace the image when I hover over the link but I want to do it in a most efficient way possible. Please see my html below:
<li><a><img src=”images/IMAGE1.png” alt=”new”></a></li>
<li><a><img src=”images/IMAGE2.png” alt=”new”></a></li>
<li><a><img src=”images/IMAGE3.png” alt=”new”></a></li>
<li><a><img src=”images/IMAGE4.png” alt=”new”></a></li>
Btw, I am using the Foundation 5 framework.
What would you recommend that I should do?
Thanks…January 16, 2015 at 7:42 am #193428Paulie_DModerator
That’s not what is generally referred to by “Image Replacement” when we generally talk about it.
What you are actually asking for is Image Swapping.
If, as I suspect these images are more for actual styling then they should be background images in which case CSS can help.January 16, 2015 at 7:45 am #193429
These are two png files I want to swap on hover. First one is the picture of a product and when I hover it I want to show another picture with “Click here for more info” banner on it.January 16, 2015 at 8:04 am #193431Paulie_DModerator
Then JS is the answer I suggest although you probably don’t actually need to swap out the image when you could do something like thisJanuary 16, 2015 at 8:09 am #193433
This looks really neat, I will try this now.
- The forum ‘CSS’ is closed to new topics and replies.