Image Changing Mouseover Links
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.
In the script was img00 = new Image. It simply implies that img00 is a new image. *duh* 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:
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. ;)
Comments
Leave a Comment | Comment box is Gravatar enabled
Euri (yu-ri) is a unique specie of the 
RSS
November 4th 2005 at 3:45 pm
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
November 5th 2005 at 9:13 am
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!
November 5th 2005 at 2:35 pm
Haha! ;)
November 5th 2005 at 11:34 pm
cool i always wondered how you did that
November 6th 2005 at 10:57 am
Nice tutorial. JavaScript is something I've been neglecting lately.
November 6th 2005 at 4:12 pm
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!
November 6th 2005 at 4:59 pm
Nice tutorial. :) Maybe next time I'll be able to apply it in my blog, but not for now.. hehe.. XP
November 6th 2005 at 9:08 pm
Ang galing, parang magic.. tinest ko dun sa affiliates mo.