I have some javascript code that displays random images in random
places on the page by making changes to the document's css. This
works in Safari and IE, but I can't get it to work on Mozilla. Using
the javascript debugger, it seems that everything is working at that
end, so I wonder if the problem is mozilla/css related. The live page
is at http://www.smalltime.com/exhibitions/washanddry
Here is the relevant html and javascript code:
<head>
<script src="bubble.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
..bubbles { position: relative; top: 0; left: 0; z-index: 0; }
-->
</style>
</head>
<body onLoad="set_up();bubble();" onclick="bubble();">
<div id="div_1_1" class="bubbles"><img name="image_1_1"
src="bkgd/pixel.gif"></div>
<div id="div_2_1" class="bubbles"><img name="image_2_1"
src="bkgd/pixel.gif"></div>
<div id="div_1_2" class="bubbles"><img name="image_1_2"
src="bkgd/pixel.gif"></div>
<div id="div_2_2" class="bubbles"><img name="image_2_2"
src="bkgd/pixel.gif"></div>
<div id="div_3_2" class="bubbles"><img name="image_3_2"
src="bkgd/pixel.gif"></div>
<div id="div_1_3" class="bubbles"><img name="image_1_3"
src="bkgd/pixel.gif"></div>
<div id="div_2_3" class="bubbles"><img name="image_2_3"
src="bkgd/pixel.gif"></div>
<div id="div_3_3" class="bubbles"><img name="image_3_3"
src="bkgd/pixel.gif"></div>
<div id="div_4_3" class="bubbles"><img name="image_4_3"
src="bkgd/pixel.gif"></div>
</body>
</html>
bubble.js:
function bubble() {
var div_name;
var s;
var i;
for (i=0; i < img_3.length; ++i) {
div_name = "div_" + (i+1) + "_3";
s = getStyleObject(div_name);
s.top = Math.round(h*Math.random()) + "px";
s.left = Math.round(w*Math.random()) + "px";
s.zIndex=-3;
document.images[5+i].src=img_3_set[i];
}
for (i=0; i < img_2.length; ++i) {
div_name = "div_" + (i+1) + "_2";
s = getStyleObject(div_name);
s.top = Math.round(h*Math.random()) + "px";
s.left = Math.round(w*Math.random()) + "px";
s.zIndex=-2;
document.images[2+i].src=img_2_set[i];
}
for (i=0; i < img_1.length; ++i) {
div_name = "div_" + (i+1) + "_1";
s = getStyleObject(div_name);
s.top = Math.round(h*Math.random()) + "px";
s.left = Math.round(w*Math.random()) + "px";
s.zIndex=-1;
document.images[i].src=img_1_set[i];
}
}
function getStyleObject(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
} else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
}
return false;
}
