...

View Full Version : Javascript will not work in Firefox



nailzfan
08-07-2008, 03:46 AM
Hi all,

I have a small script that works fine in IE but will not work at all in Firefox. I checked the Firefox error log, but it didn't show anything. I corrected the errors that were keeping the page from being validated, but that didn't help either. Any help would be greatly appreciated. Here is the page address:

http://nailzfan.gotdns.com/Cube.html

Here is the code:


<script language="javascript" type="text/javascript">

if(document.images)
{
imagemap_default = new Image();
imagemap_default.src = 'background .gif';
imagemap_home = new Image();
imagemap_home.src = 'bg1.gif';
imagemap_num2 = new Image();
imagemap_num2.src = 'bg2.gif';
imagemap_num3 = new Image();
imagemap_num3.src = 'bg3.gif';
imagemap_num4 = new Image();
imagemap_num4.src = 'bg4.gif';

}
function rollOver(iName,iState)
{
if(document.images)
{
document.images[iName].src = eval(iName + '_' + iState + '.src');
}
}

</script>

coothead
08-07-2008, 11:45 AM
Hi there nailzfan,

and a warm welcome to these forums. ;)

Try it like this...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- this is for coothead testing and can be removed -->
<base href="http://nailzfan.gotdns.com/">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript">
var preloads=[];
var ar,c;

function preload(){
for(c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}

preload('background .gif','bg1.gif','bg2.gif','bg3.gif','bg4.gif');

window.onload=function() {
ar=document.getElementById('image_map').getElementsByTagName('area');
for(c=0;c<ar.length;c++){
ar[c].id=c+1;
ar[c].onclick=function() {
document.getElementById('DivExample').innerHTML=
'<a href="http://www.google.com/" target="_blank">'+
'<img src="bg1tiny.gif" alt="image1" >'+
'<\/a>';
return false;
}

ar[c].onmouseover=function() {
document.getElementById('imagemap').src='bg'+this.id+'.gif';
}

ar[c].onmouseout=function() {
document.getElementById('imagemap').src='background .gif';
}
}
}
</script>

<style type="text/css">
body{
background-color:#000;
}
img {
border:0;
}
#imagemap {
width:342px;
height:379px;
margin-left:12px;
}
#DivExample {
position:absolute;
top:150px;
left:500px;
width:200px;
height:200px;;
}
</style>

</head>
<body>

<div>

<img src="background .gif" id="imagemap" usemap="#cube" alt="cube">

<map name="cube" id="image_map">
<area shape="rect" coords="3,58,163,230" href="#" alt="">
<area shape="rect" coords="164,60,334,230" href="#" alt="">
<area shape="rect" coords="4,229,163,376" href="#" alt="">
<area shape="rect" coords="164,229,334,375" href="#" alt="">
</map>

</div>

<div id="DivExample"></div>

</body>
</html>

coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum