Hover Images

WiseWizards · #1 (**permalink**) 06-18-2004, 02: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 · #2 (**permalink**) 06-18-2004, 11: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 · #3 (**permalink**) 06-18-2004, 06: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 · #4 (**permalink**) 06-18-2004, 06: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 · #5 (**permalink**) 06-18-2004, 09: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 · #6 (**permalink**) 06-19-2004, 02:09 AM

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

Regards,
Mike

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode