WordPress.org

Support

Support » How-To and Troubleshooting » Change Image on mouse rollover

Change Image on mouse rollover

  • Hello,

    I have a photo blog hosted by wordpress. my requirement was to show an image on mouse over event (rollover…whatever that is called). After some searching, found that blogs hosted by wordpress aren’t allowed to use javascript, so with the help of some folks managed to get a small set of CSS code working to get the image rollover.

    Code in the template:

    img.nohover {
    border:0
    }
    img.hover {
    border:0;
    display:none
    }
    a:hover img.hover {
    display:inline
    }
    a:hover img.nohover {
    display:none
    }

    Code for each post which needs an image displayed when mouse-rollover-event happens:

    < a href="link.html">
    <img alt="image" src="images/image.png" class="nohover" />
    <img alt="imagehover" src="images/image.png" class="hover" />
    </a>

    On blogger platform this works perfect. Here is an example page showing it working.

    On a wordpress platform it works, but the resulting mouse over image changes its position. An example of that is here.

    Any ideas on how to go about fixing this? I’m new to CSS, but will take any help I can get on this.

    Thanks,
    -Sudhi.

Viewing 1 replies (of 1 total)
  • try and set the image codes into one line with no space, otherwise, the editor will add a linebreak.

    < a href="link.html">
    <img alt="image" src="images/image.png" class="nohover" /><img alt="imagehover" src="images/image.png" class="hover" />
    </a>

    as your blog is for wordpress.com, please continue your question at http://en.forums.wordpress.com/

    this forum here is for selfhosted blogs with wordpress.org software.

Viewing 1 replies (of 1 total)
  • The topic ‘Change Image on mouse rollover’ is closed to new replies.
Skip to toolbar