PDA

Click to See Complete Forum and Search --> : simple newbie prob

Kommi
02-20-2003, 04:04 PM
Can someone pleae post the code to have one image turn into another when you run the mouse over it. I have looked this up in tutorials but cant get it to work with IE 6.
pyro
02-20-2003, 04:24 PM
Put this in your <head> to preload the rollover images...

<script language="javascript" type="text/javascript">
imageover1=new Image();
mainimage.src = "home.gif";
</script>

And this goes in the <body>

<A HREF="your.htm" onmouseover="document.mainimage.src=imageover1.src" onmouseout="document.mainimage.src=mainimage.src"><IMG SRC="home.gif" NAME="mainimage"></A>Take note of items in bold
Kommi
02-20-2003, 04:48 PM
thanx. Your thing was missing the mainimage definition but I got it to work now.
pyro
02-20-2003, 04:54 PM
Originally posted by Kommi
Your thing was missing the mainimage definition... :confused: What was missing?
Kommi
02-20-2003, 04:56 PM
You id not define the mainimage. But now how do I make it so that when the mouse leaves it goes back to original image?
Also, can you show the example as a Javascript function please.
pyro
02-20-2003, 05:04 PM
Oops, sorry about that...Try this code instead:

<script language="javascript" type="text/javascript">
imageover1=new Image();
imageover1.src = "pics/history2.gif"; //your rollover image
</script>

</head>
<body>

<A HREF="your.htm" onmouseover="document.mainimage.src=imageover1.src" onmouseout="document.mainimage.src='pics/history1.gif'"><IMG SRC="pics/history1.gif" NAME="mainimage"></A>
Kommi
02-20-2003, 05:15 PM
Thax, but can you give me your example in the from of a Javascript function. lets say I have this

imageover1=new Image();
imageover1.src = "blue.gif";
mainimage = new Image();
mainimage.src = "yellow.gif";

function mouseOver(flag)
{
if (flag == 1)


if (flag == 2)
}


<IMG SRC="yellow.gif" NAME="mainimage" border = 0
onmouseover="javascript:mouseOver(1)"
onmouseout="javascript:mouseOver(2)"></A>

what do I put inside the function so it goes from yellow to blue when onmouseover and then goes back to yellow onmouseout?
cyberade
02-20-2003, 07:18 PM
OK so this isn't using your code but perhaps examining this might help you out.


<HTML>
<HEAD>
<TITLE>Test Image Flip</TITLE>

<SCRIPT LANGUAGE="JavaScript">
Image1= new Image(75,50)
Image1.src = "images/piccy2.gif"
Image2 = new Image(75,50)
Image2.src = "images/piccy1.gif"

function FlipOut() {
document.imageflip.src = Image1.src; return true;
}

function FlipBack() {
document.imageflip.src = Image2.src; return true;
}

</SCRIPT>

</HEAD>

<BODY>

<A HREF="index.html" onMouseOver="FlipOut()" onMouseOut="FlipBack()">
<IMG NAME="imageflip" SRC="images/piccy1.gif" WIDTH=75 HEIGHT=50 BORDER=0>
</A>
</BODY>
</HTML>


Hope this helps