Inserting new Image but no replacing

edislasm · July 25th, 2003, 07:07 PM

Hi everyone!.

I want to know if there is a way to place an image in x,y coordinates with javascript. I can't use image replacing nor visibility in layers. What I like to do is to make a new Image() and then -I don't know how- place the image somewhere in the page in x,y coordinates as in a html layer.

lillu · July 27th, 2003, 04:02 PM

Hi,

Yes, it's possible with Javascript. If I understand it right, you want to preload some images with the new Image() constructor then set some properties like top, left and z-index.

<html>
<head>
<script language="javascript">
function setImage()
{
document.getElementById('im').style.position = 'absolute';
document.getElementById('im').style.top = '200px';
document.getElementById('im').style.left= '200px';
document.getElementById('im').style.zIndex='1';
}
</script>
</head>
<body onload="setImage()">
<img id="im" src="im1.gif" border="0">

</body>
</html>

Using getElementById is just one way (IE6).
For more compatibility you can use:

document.images['image_name'].style or
document.all['image_id'].style

In my opinion setting these properties with JS is quite clumsy and longish. Why don't you use CSS instead and only manipulate values with javascript where absolutely necessary?

I'm not sure what you're trying to do but here's a small CSS that stacks four images on top of each other. Because there's only one property that changes (z-index) you take care of all the other styles in the style definition:

<html>
<head>
<style type="text/css">
#im
{
position: absolute;
left:150px;
top:50px;
}
</style>
</head>

<body>
<img id="im" src="im1.gif" style="z-index:1;" border="0">
<img id="im" src="im2.gif" style="z-index:2;" border="0">
<img id="im" src="im3.gif" style="z-index:3;" border="0">
<img id="im" src="im4.gif" style="z-index:4;" border="0">
</body>
</html>

HTH,

Lillu

The Purple Couch
http://www.geocities.com/lillamarta

edislasm · July 27th, 2003, 11:53 PM

What I'm trying to do is place my images over MSN logos in a hotmail message. HTML layers doesn't work because the Top variable is automatically changed. Javascript doesn't work because the tag <SCRIPT language="javascript"> is changed to <COMMENT language="javascript">.

I would like to find the way to do this. But I see that hotmail is very protected.