WordPress.org

Forums

Clean Retina
[resolved] Mouse Over Images for Text Widget Sidebar (3 posts)

  1. justin@insearchofwonder.com
    Member
    Posted 1 year 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

  2. justin@insearchofwonder.com
    Member
    Posted 1 year ago #

    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>
  3. HorrorUK
    Member
    Posted 1 year ago #

    Thanks for coming back with the answer Justin, you just saved me from more hair-pulling :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic