Hey all
This problem has been baffling me for a long, long time. Really. It just doesnt make sense.
Alright.
This is whats happening.
I have a rollover (green), thats clickable, and when clicked, pops up a new window, with the smaller rollover image, now in a large size. Simple. This works fine in Safari, but in firefox, it doesnt. But this isnt a normal 'it doesnt work'. No. This just doesnt make sense.
All rollovers work fine. But when clicked in firefox, instead of bringing up a popup window with a larger image, another completely irrelevant image (which actually happens to be a link somewhere else on the page (shown with red in the code)) shows on the screen, along with what looks like a dotted line, starting from where the initial rollover was, (and where the image (the irrlevant one) has popped up), and finished at the opposite side of the page. It isnt until you click the irrelevant image again, that the new window pops up.
now i could suspect something wrong with the css, but i am sure it is the javascript. If you need me to email any photos, I am more than happy to do so. it will make the problem 100 times clearer.
here is the code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-
-
-
-
<link rel = "stylesheet" type = "text/css" href = "patterns/patterns.css">
-
<link rel = "stylesheet" type = "text/css" href = "universalstyle.css">
-
-
-
<script type = "text/javascript">
-
-
if(document.images)
-
{
-
var image_array = new Array();
-
var path = 'patterns/images/'
-
-
image_array[0] = path + "bathroom_4a.jpg";
-
image_array[1] = path + "bathroom_4b.jpg";
-
image_array[2] = path + "bathroom_5a.jpg";
-
image_array[3] = path + "bathroom_5b.jpg";
-
image_array[4] = path + "bathroom_6a.jpg";
-
image_array[5] = path + "bathroom_6b.jpg";
-
-
var preload_image = new Array();
-
-
for(var i=0; i<image_array.length; i++)
-
{
-
preload_image[i] = new Image();
-
preload_image[i].src = image_array[i];
-
}
-
}
-
-
-
</script>
-
-
-
-
-
</head>
-
-
<body>
-
-
-
<div id="wrapper">
-
-
<div id="navimage">
-
-
<img src="request_a_quote/images/Federation_church.jpg" alt="Federation Vernadah" width="329" height="583">
-
-
</div>
-
-
<div id="oeta_logo">
-
-
<img src="images/main_oeta_logo.png" alt="OETA logo" width="900" >
-
-
</div>
-
-
<div id="buttons">
-
-
<ul>
-
-
<li id="aboutus"><a href="about_us.html" >Aboutus</a></li>
-
<li id="patterns"><a href="patterns.html">Patterns</a></li>
-
<li id="technical"><a href="technical.html">Technical</a></li>
-
<li id="gallery"><a href="gallery.html">Gallery</a></li>
-
<li id="services"><a href="services.html">Services</a></li>
-
[COLOR="Red"]<li id="requestaquote"><a href="request_a_quote.html">Request A Quote</a></li>[/COLOR]
-
<li id="contactus"><a href="contact_us.html">ContactUs</a></li>
-
-
-
</ul>
-
-
</div>
-
-
<div id="requestaquote_background">
-
-
<div id="requestaquote_title">
-
-
<h3>Patterns</h3>
-
-
</div>
-
-
-
-
<script type = "text/javascript">
-
-
function rollover(name,filename)
-
{
-
var fullpath = 'patterns/images/' + filename;
-
document.images[name].src = fullpath;
-
}
-
-
</script>
-
-
<script type = "text/javascript">
-
function popup(url)
-
{
-
var width = 600;
-
var height = 514;
-
var left = (screen.width - width)/2;
-
var top = (screen.height - height)/2;
-
var params = 'width='+width+', height='+height;
-
params += ', top='+top+', left='+left;
-
params += ', directories=no';
-
params += ', location=no';
-
params += ', menubar=no';
-
params += ', resizeable=no';
-
params += ', scrollbars=no';
-
params += ', status=no';
-
params += ', toolbar=no';
-
newwin=window.open(url, 'hello', params);
-
if(window.focus) {newwin.focus()}
-
return false;
-
}
-
-
</script>
-
-
<div id = "image_gallery1">
-
-
<table id = "table1">
-
-
<tr>
-
[COLOR="SeaGreen"]<td>
-
<a href = "javascript:void(0)"
-
onclick="popup('patterns/images/bathroom_4c.jpg')"
-
onmouseover="rollover('button1','bathroom_4b.jpg')"
-
onmouseout="rollover('button1', 'bathroom_4a.jpg')">
-
<img src = "patterns/images/bathroom_4a.jpg" name = 'button1' border = "0"></a>
-
</td>
-
-
<td>
-
<a href = "javascript:void(0)"
-
onclick="popup('patterns/images/bathroom_5c.jpg')"
-
onmouseover="rollover('button2','bathroom_5b.jpg')"
-
onmouseout="rollover('button2', 'bathroom_5a.jpg')">
-
<img src = "patterns/images/bathroom_5a.jpg" name = 'button2' border = "0"></a>
-
</td>
-
-
<td>
-
<a href = "javascript:void(0)"
-
onclick="popup('patterns/images/bathroom_6c.jpg')"
-
onmouseover="rollover('button3','bathroom_6b.jpg')"
-
onmouseout="rollover('button3', 'bathroom_6a.jpg')">
-
<img src = "patterns/images/bathroom_6a.jpg" name = 'button3' border = "0"></a>
-
</td>
-
-
<td>
-
<a href = "javascript:void(0)"
-
onclick="popup('patterns/images/bathroom_7c.jpg')"
-
onmouseover="rollover('button4','bathroom_7b.jpg')"
-
onmouseout="rollover('button4', 'bathroom_7a.jpg')">
-
<img id = "yep" src = "patterns/images/bathroom_7a.jpg" name = 'button4' border = "0"></a>
-
</td>[/COLOR]
-
-
</tr>
-
-
</table>
-
-
</div>
-
-
</div>
-
-
-
-
</div>
-
-
-
-
</body>
-
</html>
-
-
Just to let you know, when, in css, i apply a display:block command to one of the javascript rollovers, the irrelevant image does show up, but that dottend line is a lot smaller box.
again, if you need photos, just let me know and i can post them through to you. i dont have a site up yet to use the url.
thanks again.
as you can see, im pretty determined to solve this problem.
4
