How To: Create Rollovers & Image Maps

I've got two quick tricks to show you today! You don't need to know HTML or CSS - if you can copy & paste, then you can do this :) Promise!


Rollovers (or hover images) allow you to have one static image that changes when someone places their cursor over top. I use this technique in my high/low post yesterday to sneak-ily reveal the final room totals. I first learned how to do this from here (found after a quick google), but I'm sure there are other ways to achieve this.

The one thing to keep in mind is that rollovers do not work on mobile or tablet devices. So provide a link to the second image if possible, but at least make sure there's no critical info on the second image.

1) Create your two images (one, two)
2) Upload them into your post
3) Go into the post HTML & copy the image URLs - the URL's will follow 'a href=' and look something like this:
4) Paste them into the rollover code (found below)
5) Ta-da! You now have a rollover image :)

 <a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>  

All you need to do is paste the whole chunk of code above where you want it, and then paste in 3 URLs: the URL you want to link to, the URL of the first image (two locations) and the URL of the second image. Super simple!

Onto image mapping.

This is so easy I never felt like it was worthy of it's own post, but it's one of the coolest tricks (I use it all the time). My social media tabs over on the sidebar? Image map. My header? Image map.

Image mapping allows you to upload a finished design, and then create links within the image. It basically places a bunch of linked 'rectangles' (or other shapes) over your design that link to the location you specify. Kind of genius really.

1) Upload your image and grab the URL (Photobucket, Flickr, and Blogger all work).
2) Go here & follow the instructions:
3) Install your code snippet in your posts/sidebar/footer/anywhere that you can paste HTML.

That's it.

Have you ever use a rollover or image map? Going to try it out now? Let me know how it turns out!!


ps, today's the last day to enter the Holly Sharpe giveaway!!