How To Create A Simple Rollover Button

Some of you may have noticed that as well as the name change, my blog's gone on to have a bit of graphics change too, it felt only right. One thing I really wanted to add was a rollover button menu, but it looked a bit too complicated and I hadn't really touched that kind of HTML since I was about 17, so I left it. Surprisingly, after a quick Google, it's ridiculously easy to do so, so I thought I'd share my new knowledge, in case anyone wanted to spruce up their blog a little.

First you want to create two images. Your first image will be the 'Original Image,' aka the image that will constantly display on your blog or website. Of course, the key to a good design is elegance and simplicity so play it safe and make sure it still suits your colour scheme/theme...

Then create the 'Rollover Image,' aka the image people will see when they roll their cursor over your original image. Try not to stray too far away from your original image, maybe just change a colour (like I have in my menu bar thing above) or something, and make sure they have the same dimensions or things could just go wrong...

Next, make sure you have the link you want your button to... link to.

Upload your two images to an image sharing website. I use CubeUpload for its multi-upload feature. Once you've done that, copy the direct links and keep them somewhere safe...

Original: http://i.cubeupload.com/ZkYUEz.png

Rollover: http://i.cubeupload.com/xexP93.png

Link: whatever you want

This post will automatically turn a HTML code into what the HTML code is meant to do, so I've copied the code you need into PasteBin which you can find here.

Replace the word ORIGINAL with the link for your 'Original Image,' and replace ROLLOVER with the 'Rollover Image.' Then finally replace the word LINK, with your link. Do not alter any of the punctuation or anything, it's all pretty necessary.

If you're having a little trouble then compare yours to this:

Add a gadget to your blog, and choose the HTML/Javascript option. Paste your code in and save and you should end up with your rollover button... a la:

So in summary:

1. Create your two images.

2. Upload them to an image sharing website.

3. Copy this code into notepad

4. Replace the ORIGINAL and ROLLOVER words with your links.

5. Paste the code into a HTML widget or layout.

6. Enjoy your new masterpiece.

If you have any questions or ways I can improve this tutorial let me know below!