• Interfaces
• Textures
• Templates
• Buttons
• Bars
• Banners
• Tutorials
• Fonts
• License
• Software
• Press
• Awards
• Books

• Advertise
• Add Link
• Games
• Email
• Subscribe
• Free Stuff

• Site Map
• Jobs
• Forum
• Hosting




It really irritates me how long to took me to figure out how to do this considering how easy it is. You only need to make modifications to a linked image like this:

<a href="whatever.html"

onMouseover="document.mypicture.src=
          'images/onpicture.gif'"
onMouseout="document.mypicture.src=
          'images/offpicture.gif'">

<img src="images/offpicture.gif"
height="20" width="50" border="0"
name="mypicture">

</a>

 

      NOTE: For space reasons I'm breaking the 2nd - 5th lines of text into 4 separate lines, they must be on one line to work!!!

      This is using a bit of javascript, so this technique will not work for Netscape 2.0 and Internet Explorer 3.0. It will work in Netscape 3.0 and higher and Internet Explorer 4.0 and higher. Here's what each of the attributes mean - if you haven't figured it out by now.

  • onMouseover defines what will happen when the mouse moves over the image.
  • onMouseout defines what will happen when the mouse is taken off the image.
  • document.mypicture.src defines what the source of the element named 'mypicuture' is.
  • name gives the element a name, in this case 'mypicture', that the javascript call refer to it as.

      This is the easy part. The hard part is deciding just what the second image, in this case onpicture.gif will look like when the mouse passes over it. For that you may want to head over to Andyart.com and look around his photoshop tips site.