By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,028 Members | 1,013 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,028 IT Pros & Developers. It's quick & easy.

Can't get javascript/css random image placement to work in Mozilla

P: n/a
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;
}
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
gene wrote:
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.
<snip>
s.zIndex=-3;
s.zIndex=-2;
s.zIndex=-1;

Unfortunately negative zIndexes are currently invisible in Mozilla :-(

--
Warning: May contain traces of nuts.

Jul 20 '05 #2

P: n/a
Neil <ne**@parkwaycc.co.uk> wrote in message news:<bn*********@ripley.netscape.com>...
gene wrote:
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.

<snip>
s.zIndex=-3;
s.zIndex=-2;
s.zIndex=-1;

Unfortunately negative zIndexes are currently invisible in Mozilla :-(


I see. I stumbled on the negative zindexes after the positive values
didn't appear to be positioning things correctly. I guess I'll have
to resort to a browser detection hack for this. Thanks!
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.