Wednesday, 10 April 2013

How to make an EASY rollover image with a link (HTML)




This is an easy but good looking way to create an external link. If it's for a Blog Button or a button link, this code works so well, and it's EASY! I used this exact code to create my pages links underneath my header above.

The Code:

<a href="WEBSITE TO LINK TO" target="_blank" onMouseOver="document.Link.src='HOVER IMAGE URL'" onMouseOut="document.Link.src='IMAGE BEFORE HOVER URL'"><img src="STATIC IMAGE URL" width="256" border="0" name="Link" title="WORDING TO APPEAR ON HOVER" alt="IMAGE NAME"></img></a>


TWEAKING THE CODE

Addressing the RED section of the code:

"WEBSITE TO LINK TOthis is the site you want your rollover to link to when clicked on.

'HOVER IMAGE URL' this is the image URL for the image that will "magically" appear when you hover over the static image.

"STATIC IMAGE URLthis is the image that is displayed on your website prior to hovering, and the image that returns after your cursor leaves the image hovered.
"256" this is the width of the images. You don't have to have two images that are the same size but the effect works best when the images are an identical size.
"WORDING TO APPEAR ON HOVERthis one says it all, these words will appear when you hover over the image.
"IMAGE NAME" this is again obvious, the name of your image, for example "Me at Christmas".
Addressing the GREEN section of the code:
Every time you use this code on your blog or webpage, you will need to change Link to another word. Otherwise the code will work only in the first instance.
Then simply paste the completed code in the HTML section of a blog post or add a new Java/HTML Gadget and past the code in the content section.
That's it!
 
Have fun and thanks for stopping by!

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me