Image Rollovers in WordPress.com

  • Author
    Posts
  • #539648

    rachelmetea
    Member

    Is it possible (with the CSS upgrade) to do an image rollover in wordpress.com? I want to have an image change to a different one when the mouse hovers over it. The image will be a link.

    Thanks! Any help would be appreciated.

    The blog I need help with is rachelmetea.com.

    #539892
    #539909

    rachelmetea
    Member

    Great! Thanks! I’ve been playing around with it a lot but it doesn’t seem to want to walk. Does WordPress support it?

    #539923

    hallluke
    Member

    Yes it is definitely possible. You just need to mark up the code correctly. If you are still having trouble then post the link to the tutorial you are using and show us what HTML and CSS you have tried so far and what it achieved. Post the code between backticks so that it will format properly.

    #539926

    rachelmetea
    Member

    I have two different attempts in right now: http://rachelmetea.com/photography
    I’m not sure if it matters having both in, but the outcome of #1 did not change at all when I put in #2.

    #1 – The image “janeface” is of the girl at the bottom of the page with glasses. I think the space between the picture above her. This came from http://kyleschaeffer.com/best-practices/pure-css-image-hover/ **However I have amended it a bit

    <img class="alignnone; faceshover" style="border:4px solid black;" title="janeface" src="http://rachelmetea.files.wordpress.com/2010/11/3214190495_cb9f772013_b.jpg" alt="" width="300" height="200" />

    .faceshover {
    display:block;
    width:300px;
    height:200px;
    background:url('3214190495_cb9f772013_b.jpg') bottom;
    text-indent:-99999px;
    }
    
    .faceshover:hover {
    background-position:0 0;
    }

    #2 This is the other style I have frequently found online: http://www.elated.com/articles/css-rollover-buttons/

    <a id="rollover" href="http://rachelmetea.com/photography/faces/" title="janeface">janeface</a>

    #faceover {
    display:block;
    width:300px;
    height:200px;
    background:url('3214190495_cb9f772013_b.jpg') no-repeat 0 0;
    }
    
    #faceover:hover {
    background-position:0 -200px;
    }
    
    #faceover span {
    display:none;
    }

    Here I kept everything except for the background-position. I noticed the one they used matched the images’ height so I changed mine to match as well.

    #539927

    rachelmetea
    Member

    Oh! I forgot to mention: #2 is underneath the words “Under Construction.” Thanks!

    #539928

    hallluke
    Member

    Those examples aren’t working for a few reasons.

    When specifying an image URL in CSS you need to use the whole thing starting with http, not just the file name. Also one of the tricks relies on you creating one image file out of the two different pictures and then flipping position between them. It doesn’t look like you’ve done this so it won’t have any effect. I would also recommend uploading your images in the size that you’re going to display them, otherwise it is a waste of people’s bandwidth and will make your site load slowly. Most of your photos are big enough to be desktop backgrounds but you’re only displaying them as tiny thumbnails.

    Here’s the method I would recommend. In your post or page switch to the HTML editor and add the following code. Note that the ID will need to be different for every set of rollover images you want to include.

    <a id="roll_one" href="LINK-URL">Description text that will not be displayed</a>

    Then you need to add the following to your CSS. Remember if you’re adding multiple rollovers to change the identifier following the hash. You’ll also need to explicitly set the width and height of the original image in the code here.

    #roll_one {display:block; width:300px; height:200px; text-indent:-999em; background:url("IMG1-URL");}
    #roll_one:hover {background:url("IMG2-URL");}

    That works fine on my test blog using images that are exactly 300 by 200 pixels. Try it out and if it doesn’t work then let me know.

    #539934

    rachelmetea
    Member

    Oh yes it worked! Thank you very much.

The topic ‘Image Rollovers in WordPress.com’ is closed to new replies.