After working on wordpress themes for a while I’ve come across a few stylesheet techniques and figured I’d share so I’ve started a new category of posts. I’ll continue below.
Create an image rollover effect
Using just an image editor and some CSS it’s possible to create very nice rollover effects. A couple can be seen here with the navagation buttons up top and the comment box on the front page. The way this works is by creating your image a special way and then only displaying part of it at a time. The image should look like this.
See how the top is the part of the image that’s seen when not hovering over the comment box. The bottom part is only seen when you hover. The link is no different than a regular link it will just need to have a class added to it do show it should have the rollover effect.
[xml light=”true”]<a href="http://clark-technet.com/" class="rollover" title="Link">Link</a>[/xml]
Then the actual style would look like this. This would need to be placed in an external style sheet or in between [xml light=”true”]<style type="text/css"></style>[/xml]tags in your header. Info on this can be found here.
[css light=”true”]
a.rollover {
display:block;
width:40px;
height:40px;
background:url(images/comment.jpg) no-repeat top center;
}
a.rollover:hover{
background-position:0 -40px;}
[/css]
I’ll explain this code now. The display:block tells that it is a block level element and will allow a height and width to be applied to the link. Next we declare the height and width since the width of the image is 40px and half the height of the image is 40px those are the values we use. Then the background:… tells where the image is that it should repeat and the it should be aligned at the top center. Since the width of the link and the width of the image are the same it doesn’t really matter where it aligned horizontally.
Next comes the actual rollover effect, this depends on the :hover psudeo class in CSS which some very old browsers don’t support, like Netscape 6 and IE 3. The background-postion tells that the background image should be shifted horizontally 0 px and vertically -40px, ie up 40px. Thats it, it is that simple.
By Peter December 17, 2008 - 6:49 am
Try this code (works on all browsers):
<style>
img.nohover {border:0}
img.hover {border:0;display:none}
A:hover img.hover {display:inline}
A:hover img.nohover {display:none}
</style>
<A HREF="#">
<img src="b1.gif" class="nohover">
<img src="b2.gif" class="hover">
</A>
By Jeremy Clark December 17, 2008 - 8:26 am
That’s a very nice solution when you don’t want to join the images together. I’ve seen the technique I posted used where almost all the images and hovers where in one large image, and then just offset different ways to show the different sections and hovers. This technique speeds up page load time because it’s one request for one file versus two for each image and hover image. The browser will also cache the image so you could even use the same image on multiple pages with different sections.
By Corrie February 17, 2012 - 3:29 pm
Thanks Jeremy…this was great! Helped out allot.