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.

Code:

<!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>

			<!-- GETTING STARTED - PARA ONE -->

		  
<!-- <p class="cantseeme">hiddentext</p> -->
</div> <!-- END MAINCOL -->
<?php 
include 'inc/contfooter.php';
?>
</div> 
	<!-- END PAGEWIDTH -->
</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

what seems to be the problem?

**a_design_interactive** · 07-21-2006, 04:16 AM

Originally Posted by jr_yeo

this should work just fine

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.

Originally Posted by jr_yeo

what seems to be the problem?

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

Thread: basic image swapout rollover

Thread Tools

Search Thread

basic image swapout rollover

strange daze indeed

Bookmarks

Bookmarks

Posting Permissions