Hover Images

**WiseWizards** · 06-18-2004, 01:05 AM

Hello!

How can I create an image that changes on hover? I've tried one script at LissaExplains.com, but it didn't seem to work. Could someone please give me their code?

Thanks,
Mike

**paulhiles** · 06-18-2004, 10:12 AM

Lots and lots of ways to do this! You can use CSS rollovers if you feel like being adventurous. If you're just after a straightforward Javascript example.. here's one that I've used in the past. Obviously, you're going to need two images.. one will be your "hover" image, the other your regular image that will be there initially and "onmouseout".

Place this first bit of code in the <head> of your page:

Code:

<script language="javascript" type="text/javascript">
<!--
  if (document.images)
   {
     navbutton1on= new Image(put-your-imagewidth-here,your-image-height);
     navbutton1on.src="navbutton1-over.gif";

     navbutton1off= new Image(your-image-width,your-image-height);
     navbutton1off.src="navbutton1-off.gif";
   }

function m_over(imgName)
 {
   if (document.images)
    {
      imgOn=eval(imgName + "on.src");
      document[imgName].src= imgOn;
    }
 }

function m_out(imgName)
 {
   if (document.images)
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
    }
 }
//-->
</script>

and then place the following code in the body of the page (wherever you want your image rollover to be).

Code:

<a href="#" onmouseout="m_out('navbutton1')" onmouseover="m_over('navbutton1')">[img]navbutton1-off.gif[/img]

You can see a working sample here.
Let me know how you get on! :o)

Paul

**WiseWizards** · 06-18-2004, 05:32 PM

Thanks, that's exactly what I wanted. I'll try it out ASAP!

Thanks,
Mike

P.S. Do I just substitute my image info into the HEAD script only, or do I also substitute the image into the BODY script?

**WiseWizards** · 06-18-2004, 05:54 PM

What if I want more than one button? Do I have to copy both scripts in as many times as I have buttons?

Regards,
Mike

**paulhiles** · 06-18-2004, 08:43 PM

The sample page I included in my post here for cyberious is still available.. you can check that out. Basically you just add further definitions for each of your rollover images.

Remember, this isn't the only method.. it's always good to try out a few variations with something like this.

**WiseWizards** · 06-19-2004, 01:09 AM

Thanks, I'll try out some new ways and find the one that's best for me.

Regards,
Mike

Thread: Hover Images

Thread Tools

Display

Hover Images

Similar Threads

Whatever:Hover doesn't work in IE7

IE Hover

Hover over Images

CSS HOVER-IE

CSS hover links

Posting Permissions