I know I’ve been doing a lot of design tutorials lately. This will (probably) be the last one for a while. So today, let’s talk about roll over images.
What is a roll over image?
A roll over image is an image that changes when you hover your mouse over it. For instance, look at my social media icons in the left-hand sidebar. Move your mouse over to them and they should change colors. That, in a nutshell, is a roll over image.
There are many different types of roll over images, but fading out and changing color are the easiest ones to create. (Most of the others require CSS work. We’re not going to do that today. However, if you want something besides color changes and you’re not afraid to dive into the CSS, check out this page.)
Why should I use roll over images?
The two biggest reasons to use roll over images are for clarity and cosmetics. Roll over images are a great way to make your blog look more polished and they allow your readers to see that an image is a link–sometimes it’s not obvious–and they make it clear which link your readers are about to click. (Which I love, because sometimes codes screw up and I click on Facebook when I really mean to click on Twitter. Roll over images will warn you when this is about to happen.)
That said, you don’t have to use roll over images. But if you want to, let me show you how!
Creating a roll over image
It’s really simple, though it doesn’t look it. First, you need one image, but you need to save it in two different colors. Let’s use a “Subscribe via Email” button as an example.
As you can see, I have two versions of the same image, one in yellow and one in blue (and I’m so hoping you’re not color-blind right now).
Now, you’re going to take those images, upload them, and copy and paste their URLs into this code (change the dark, capitalized text):
<a href=”http://PAGE URL” target=”_blank”><img src=”http://IMAGE ONE” onmouseover=”this.src=’http://IMAGE TWO‘” onmouseout=”this.src=’http://IMAGE ONE‘” width=”WIDTH HERE” height=”HEIGHT HERE“></a>
Notice that you have four URL spots.
The first one is where you insert the page URL you want the image to take your readers to.
The second spot is where you put the first image URL (in my case, the yellow subscribe button).
The third place is where the second image URL (the blue subscribe button) goes.
In the last spot, insert your first image (the yellow button) again. The reason you have to do the first image twice is so the code knows to change back to the original picture when you’re not hovering. If you forget to do this, once you hover over the image and it turns blue, it will stay blue until you reload the page.
Also, if you want a roll-over image that doesn’t link to anything, use this code:
<img src=”http://IMAGE ONE” onmouseover=”this.src=’http://IMAGE TWO‘” onmouseout=”this.src=’http://IMAGE ONE‘” width=”WIDTH HERE” height=”HEIGHT HERE“>
It’s the same code, but without all the <a> </a> stuff.
Pretty easy, right?
Unfortunately, some of WordPress’s updates mean that I can no longer post roll over images inside blog posts, so you can’t see what my example will look like. However, there are lots of examples of roll over images on my blog, many in my sidebar (under my “About Me” widget is an “Endorse me on Sverve” image, for instance).
Where do I insert this code?
You can use it to put social media icons in your widgets, you can use it to create nice “Favorite Posts” images for your sidebar (see my “Posts You Might also Enjoy” section or my Recipes page), or you can add it to your Bottom of Every Post plugin (like I did with the social media icons below my signature).
As for changing icons that are embedded in a CSS stylesheet, that’s going to require actually going into your theme’s CSS and changing the stylesheet. Like I said, we’re not going to be doing that today. 😛 But I hope you all get some use out of this! It is one of my most used codes.
(FYI, if you love the font I used for the example above, it’s called Cul De Sac and it can be found here for free. The author, Hanoded, has created some of my absolute favorite fonts. Be sure to check them out, as well! And no, I don’t get anything for saying that, I just really love these fonts.)
Do you use roll over images? Why or why not? Leave your answer in the comments!
