WordPress.org

Ready to get started?Download WordPress

Forums

[closed] Change Image on mouse rollover (2 posts)

  1. kaddisudhi
    Member
    Posted 2 years ago #

    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.

  2. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic