Yes, this is a tutorial on how to make those links when mouseover, changes that image above it. See my Affiliates links at the navigation for a demo of this. This is a JavaScript to let you know that it won't work when JavaScript is disabled.
Let's begin.
Place the following code where ever you want the Mouseover Links to appear.
<script type="text/javascript">
<![CDATA[
if (document.images) {
img00 = new Image
img01 = new Image
img02 = new Image
img03 = new Image
img00.src="images/default.gi f" src="images/default.gif"
img01.src="images/image01.gi f" src="images/image01.gif"
img02.src="images/image02.gi f" src="images/image02.gif"
img03.src="images/image03.gi f" src="images/image03.gif"
}
]]>
</script>
In the script, there's a img00 = newimg00 is a new image. And so goes that img00.src = "images/default.gif" implies that img00.src should contain the image located at images/default.gif.
This same steps applies to the rest of the img00 = new Image and the img00.src = "images/default.gif" although the img00 is for the default.
The next set of codes would be added inside html tags like this:
<a onmouseover="document.images .src=img01.src" onmouseout="document.images. src=img00.src" href="http://www.link.com" target="_blank">Image 1</a> <a onmouseover="document.images .src=img02.src" onmouseout="document.images. src=img00.src" href="http://www.link.com" target="_blank">Image 2</a> <a onmouseover="document.images .src=img03.src" onmouseout="document.images. src=img00.src" href="http://www.link.com" target="_blank">Image 3</a>
When you mouseover the link, it goes to img01.src on which contain the link button you specified. And upon mouseout, it goes back to img00.src on which is the default image.
If you need to add more, all you have to do is increment img03 = new Image to img04 = new Image and change the image that corresponds it like img04.src = "images/image04.gif" and so on.
In the case of the codes on the links, you don't have to change this part: onmouseout="document.images. src=img00.src". Just change this one also increasing the number: onmouseover="document.images .src=img03.src".
I hope, by this, I would get lesser e-mails regarding this topic. :P I'm not a good teacher (and I do not plan on being one) so if you do not get it, let me know and I'll try to explain it more. ;)
Hi Euri! Thanks sa image gift :) Nga pala, finally may bagong domain na ako for the grpahics site. Hehe. For good na 'to :P http://www.azure-skies.com ^_^
And I was wondering, about the database for wordpress, pwde bang sa ibang host yun? Like sa azure skies ko siya ihohost? Uhmm... will you be on MSN soon po ba? I really need help with WP T_T
Hiyyo! :3
I love this smiley! :P :P :P :P :P !!! I love it!!
Anyway, Esu has no use for the linkover image changing affiliate button link changing image thing. :D Byee-byee!
Haha! ;)
cool i always wondered how you did that
Nice tutorial. JavaScript is something I've been neglecting lately.
LOL dami ba nagtatanong? Tsk! I did that once upon a time, haha! I already forgot how to do it, but thanks for reminding me. Unfortunately, I don't think may time pa ako para sa ganyan. Huhuhu!
Nice tutorial. :) Maybe next time I'll be able to apply it in my blog, but not for now.. hehe.. XP
Ang galing, parang magic.. tinest ko dun sa affiliates mo.