image flip - Webmaster Forums - Webmaster forum for HTML, PHP, ASP, CSS and more

da king · 09-02-2005, 11:39 PM

How can I create an image flip? I want my image to change when I hover over the picture/menu, but I want it to flip back when the mouse leaves it. How do I do this?

I think this is made with javascript, but are there alternative ways?

Lpspider · 09-03-2005, 07:47 PM

Place this code in the head section of your html document:

Code:

<SCRIPT language="JavaScript">
<!--

  if (document.images)
   {
     pic1on= new Image(100,25);
     pic1on.src="shoes2.gif";  

     pic1off= new Image(100,25);
     pic1off.src="shoes1.gif";
   }

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

function turnoff(imgName)
 {
   if (document.images)
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
    }
 }

//-->
</SCRIPT>

Place this code in the body:

Code:

<A HREF="index.html" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')"> 
<IMG SRC="../images/shoes1.gif" name="pic1" width="100" height="25" border="0"></A>

That should work... tell me how it goes.