WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
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.
I answered you in the other thread you posted in.
Great! Thanks! I've been playing around with it a lot but it doesn't seem to want to walk. Does WordPress support it?
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.
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.
Oh! I forgot to mention: #2 is underneath the words "Under Construction." Thanks!
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.
Oh yes it worked! Thank you very much.
This topic has been closed to new replies.
