PDA

Click to See Complete Forum and Search --> : Rollover(mouse over/out)

ugel
03-23-2004, 09:03 AM
I am able to program a mouse over/out script successfully when placing the image inside of <a href...> (rollover.html).

I need to do the same function with an image inside of an INPUT TYPE=IMAGE (rollover2.html).

I receive an error message indicating that 'document.imageflip' is null or not an object.

I'm somewhat new at this so I'm not sure what I am missing or even if I can do this with INPUT TYPE=IMAGE.

ROLLOVER
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<SCRIPT LANGUAGE="JavaScript">
<!-- hide from none JavaScript Browsers

Image1= new Image(150,20)
Image1.src = "../kwpics/Absentee.jpg"
Image2 = new Image(150,20)
Image2.src = "../kwpics/AbsenteeY.jpg"

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

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

// - stop hiding -->
</SCRIPT>

</head>

<body>

<table>
<tr>
<td>
<A HREF="/" onMouseOver="SwapOut()" onMouseOut="SwapBack()">
<img src="../kwpics/Absentee.jpg" alt="" name="imageflip" id="imageflip" width="150" height="20" border="0">
</A>
</td>
</tr>
</table>

</body>
</html>

ROLLOVER2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<SCRIPT LANGUAGE="JavaScript">
<!-- hide from none JavaScript Browsers

Image1= new Image(150,20)
Image1.src = "../kwpics/Absentee.jpg"
Image2 = new Image(150,20)
Image2.src = "../kwpics/AbsenteeY.jpg"

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

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

// - stop hiding -->
</SCRIPT>

</head>

<body>

</table>
<tr>
<td style="background-color: #295284;">
<input type="image" name="imageflip" id="imageflip" value="Absentee" src="../kwpics/Absentee.jpg" align="middle" title="Run Absentee Report." onClick="goButton('CLK911')" onMouseOver="SwapOut()" onMouseOut="SwapBack()">
</td>
</tr>
</table>

</body>
</html>

Any help would be greatly appreciated,
Sincerely, Ugel
Vladdy
03-23-2004, 09:11 AM
You do not need javascript to do it.
Learn CSS and use :hover pseudo-class with your anchor (seems like image should be in its background anyway)
jaegernaut
03-23-2004, 09:15 AM
You can also just make this change:

function SwapOut() {
document.getElementById("imageflip").src = Image2.src;
}

function SwapBack() {
document.getElementById("imageflip").src = Image1.src;
}

You're not catching anything on the return so I just removed those as they were unecessary.

CSS would likely be the best way to do this, but this will get you past that error.