Mouse Over Images for Text Widget Sidebar

Resolved justin@insearchofwonder.com
(@justininsearchofwondercom)

10 years, 9 months ago
Hello,

I am trying to use a Text Widget in my sidebar to have an image with hyperlink that when a user scrolls over it, will change to a second image still with the same hyperlink. I want to include this in my standard clean retina sidebar.

My website is http://www.insearchofwonder.com

What I have so far:
```
<a href=”http://www.insearchofwonder.com/category/monday-morning-inspiration/”

target=”_blank“

onmouseover=”document.rollover_1.src=’http://www.insearchofwonder.com/wp-content/uploads/2013/07/Monday-Morning-Inspiration-Category-Image.jpg’”

onmouseout=”document.rollover_1.src=’http://www.insearchofwonder.com/wp-content/uploads/2013/07/Monday-Morning-Inspiration-Mouseover.jpg’”>

<img src=’http://www.insearchofwonder.com/wp-content/uploads/2013/07/Monday-Morning-Inspiration-Category-Image.jpg’

alt=”Monday Morning Inspiration“

name=”rollover_1“>

</a>
```
This doesn’t work because I suspect that the onmouseover function is not part of the standard wordpress functionality; however, since the Clean Retina menu uses a similar mouse over functionality to display the submenu, there should be a simple way to accomplish this.

Please help!

Thanks,
Justin

Viewing 2 replies - 1 through 2 (of 2 total)

Thread Starter

(@justininsearchofwondercom)

I found the answer on another page:

<style>
    img.nohover {border:0}
    img.hover {border:0;display:none}
    a:hover img.hover {display:inline}
    a:hover img.nohover {display:none}
</style>  

<a href="THIS IS WHERE YOUR LINK GOES">
    <img src="base_image.jpg" class="nohover">
    <img src="hover_image.jpg" class="hover">
</a>