Change image on mouse rollover

  • Author
    Posts
  • #619577

    svijayak
    Member

    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 added to 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.

    The blog I need help with is kaddisudhi.com.

    #619667

    timethief
    Member
    #619678

    devblog
    Member

    Sviyajak,

    Your markup shows this:

    <a>
    <br />
    <img width="333" height="500" src="http://farm4.static.flickr.com/3203/5754190922_c286d36764.jpg" class="nohover" />
    <br />
    <img width="333" height="500" src="http://farm6.static.flickr.com/5186/5754190102_871717fb24.jpg" class="hover" />
    <br />
    </a>

    Notice the “
    ” tag in between the “<img>” tags and at the end of the second “img” tag. If you are adding them, that’s your problem. If you are using the visual editor, then wp is adding them and you’ll need to take them out yourself. To do this, click on the HTML tab (next to Visual) find and remove the “br” tags from your markup. Save.

    If they’re still being added by the software, a dirty workaround would be adding this to your CSS:

    a br {display: none;}

    See if that works.

    #619681

    devblog
    Member

    Damn software… where it reads:

    Notice the “
    ” tag in between the “<img>” …

    should read:

    Notice the “< br />” (with no space) tag in between the “<img>” …

    #619683

    svijayak
    Member

    Actually I should have mentioned it in the original question itself…my bad.

    The result of the forum search topic all discuss about images of static areas of the pages like Menu etc. my requirement was on the dynamic content, where the pics are different for each post. The current code I’ve in place addresses the need of each post. All I’ve to do is to give links to 2 images. It gets it working and I just need to get that rollover image not change its position.

    But if there is something specific in those discussions that I need to pay attention to, let me know.

    Thanks for pointing it out.

    #619700

    svijayak
    Member

    devlog: When I checked the html editor, I didn’t have any those “break” tags ( < br /> ) and tried your dirty little hack of

    a br {display: none;}

    which does the work.

    Thanks for your help.

The topic ‘Change image on mouse rollover’ is closed to new replies.