basic image swapout rollover [Archive]

View Full Version : basic image swapout rollover

a_design_interactive

07-20-2006, 08:36 PM

as i've mentioned before, i'm no javascript wiz, but i thought this script worked-- i mean, i've got it working elsewhere-- but i can't figure out why this isn't working for a new site where i want to use it-- currently testing on LocalHost-- same place where i can test the other one which works.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<title></title> <meta http-equiv="description" content="" />
<meta http-equiv="content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/centrewebdestyle.css" />

<script type="javascript">

Rollimage = new Array()
Rollimage[0] = new Image(280,19)
Rollimage[0].src = "antirobots.gif"
Rollimage[1] = new Image(280,19)
Rollimage[1].src = "antirobotshover.gif"

function SwapOut() {
document.CWD.src = Rollimage[1].src;
return true;
}

function SwapBack() {
document.CWD.src = Rollimage[0].src;
return true;
}

</script>
</head>
<body id="contact">
<div id="pagewidth">
<div id="header">
<?php
include 'inc/navcontainer.php';
?>
</div>
<div id="maincol">
<img id="pagename" src="images/pagenames/contact.gif" height="62" width="235" border="0" alt="" />

<a href="link.htm"
onmouseover="SwapOut()"
onmouseout="SwapBack()">
<img name="CWD" src="antirobots.gif" height="19" width="280" border="0" /></a>




</div> 
<?php
include 'inc/contfooter.php';
?>
</div>

</body>

</html>

i got this originally from this page:
http://joemaller.com/js-singleroll.shtml

thanks!

jr_yeo

07-20-2006, 09:18 PM

this should work just fine :D

what seems to be the problem? :p

a_design_interactive

07-21-2006, 04:16 AM

this should work just fine :D
precisely what i thought. i just switched over from my XP box to my Linux (this not being the reason), and brought these files over too. not that i expected it to, but they don't work here either. it just ocurred to me that maybe it's a CSS thing. i'm going to put it up in Firefox and disable the CSS and see what happens. i had been fooling around w/ it-- trying to get it to do the image swap w/ CSS instead of javascript (for accessibility reasons, of course), but i couldn't quite get it.

is there a solid way to do that, because to be honest, i'd prefer CSS.

what seems to be the problem? :p
well-- i guess ya could say that the problem is that there's nothing happening. i mean, move the mouse over it, and there's no change, other than the link showing in the status bar. i didn't check on XP, but i noticed here that Mozilla's js console throws an error stating that both SwapOut and SwapBack are undefined. i don't think the CSS would affect that issue, so there must be something i'm missing.

it's so weird! grrr... i hate stuff like this!! ;)

anyone see what the js console is seeing? is there some other situational variable which would cause this- and the js console throw that error-- as a false positive so to speak?

a_design_interactive

07-21-2006, 09:20 AM

hey there-- just wanted to offer this link to anyone who's interested in doing the image rollover thing w/ CSS instead of javascript.

i'm still curious about what is going on w/ my code above, and why it's given me so much grief. i hope someone might happen upon it and be generous enough to provide an answer. thanks!

resource for CSS image rollover code:
http://www.dottedi.biz/codesamples/rollover.html
http://archivist.incutio.com/viewlist/css-discuss/73750