Overlaying images ?

[Dr John Stockton]

I have, in a div, four square images of different known sizes,
displaying side-by-side. Three have transparent backgrounds.

I wish to stack the images so that the centres coincide. Can someone
please remind me how, in MSIE 4 and later? The page has HTML and
javascript.

 

[Randy Webb]

Dr John Stockton said the following on 10/30/2005 2:29 PM:

I have, in a div, four square images of different known sizes,
displaying side-by-side. Three have transparent backgrounds.

I wish to stack the images so that the centres coincide. Can someone
please remind me how, in MSIE 4 and later? The page has HTML and
javascript.

Manually or automatically via JS?

What you are hunting is z-index and left/top positioning via CSS. If IE4
doesn't support the z-index and left/top styles on an image, try placing
them in div tags and position them.

Give each a z-index in order that you want them stacked.
Position them absolutely in a containing div tag.
Set the left and top 1/2 the images width/height from a predetermined
center of the div tag.

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated
Sun, 30 Oct 2005 18:56:25, seen in Randy Webb

Dr John Stockton said the following on 10/30/2005 2:29 PM:


Manually or automatically via JS?

Manually is enough, with HTML & CSS.

What you are hunting is z-index and left/top positioning via CSS. If IE4
doesn't support the z-index and left/top styles on an image, try placing
them in div tags and position them.

It supports at least those positioning styles.

Give each a z-index in order that you want them stacked.
Position them absolutely in a containing div tag.
Set the left and top 1/2 the images width/height from a predetermined
center of the div tag.

Well, you've missed showing the actual code; but, as it happens, the
article "Width of text input box vs. password input box" that appeared
in (and multiposted here) when I next Connected was
enough to provide the necessary clue.

Z-index is no actual concern; the images are defined in order.

That all works as intended. I change the .src string by script, and the
new image appears instead. It's substantially equivalent to the image
part of js-date2.htm, apart from the positioning.

The next wish is to be able to alter the position and size of another
image, by executing script. Either IE4 cannot do that, or I'm missing a
necessary piece in the code :

with (document.images["SH"]) { alert(height) } // alert shows number
but
with (document.images["SH"]) { height = 10 + T1*5 } // no effect


REPLACE the implied question; it appears that the script will change the
size, but not if it was defined in HTML/CSS. Alas, width cannot be
negative. Far worse, though, I've not yet seen how to move the image by
javascript; I need to set left and top too.

 

[VK]

The next wish is to be able to alter the position and size of another
image, by executing script. Either IE4 cannot do that, or I'm missing a
necessary piece in the code :

with (document.images["SH"]) { alert(height) } // alert shows number
but
with (document.images["SH"]) { height = 10 + T1*5 } // no effect


REPLACE the implied question; it appears that the script will change the
size, but not if it was defined in HTML/CSS. Alas, width cannot be
negative. Far worse, though, I've not yet seen how to move the image by
javascript; I need to set left and top too.

While working with IE, Microsoft site can be very usefull ;-)

In the particular
<http://msdn.microsoft.com/library/d...author/dhtml/reference/properties/width_1.asp>
states that:
<quote>
When scripting the height property, use either the pixelHeight or
posHeight property to numerically manipulate the height value.

If dynamic changes are intended for the height and width, the original
values should be set through style (e.g. "style=''height:200px;
width:200px'') rather than through the height and width attributes.
</quote>

pixelWidth and pixelHeight are stated in the article to be supported
since IE 4.0 but I personally do not recall anyone managed to use it
until the very end of the war (IE 5.x) Nevertheless this article
contains a working example. If you see "Show me" button on the page,
that means that your version of IE considered to be able to perform.
Otherwise the button will not be visible.

imageObject.width and imageObject.height have been left as read/write
properties for legacy issue. First indroduced in Netscape 3.0 Gold
milestone, Image object was originally planned to have scriptable width
and height propetry. Not too many people remember that the full syntacs
for Image is:
var myImage = new Image(widthInPixel, heightInPixel);
Latter Netscape run into problems to provide such interface (on fixed
layout with DOM 0 Level it was indeed too much). But since any browser
*has* to support everything Netscape Gold had, width and height has
been left as blackhole interfaces. You can read them, but they very
rarely contain any valuable information. You can write to them, but it
has no effect on the object layout.

 

[Dr John Stockton]

JRS: In article <[email protected]>
, dated Tue, 1 Nov 2005 14:00:21, seen in VK

The next wish is to be able to alter the position and size of another
image, by executing script. Either IE4 cannot do that, or I'm missing a
necessary piece in the code :

with (document.images["SH"]) { alert(height) } // alert shows number
but
with (document.images["SH"]) { height = 10 + T1*5 } // no effect


REPLACE the implied question; it appears that the script will change the
size, but not if it was defined in HTML/CSS. Alas, width cannot be
negative. Far worse, though, I've not yet seen how to move the image by
javascript; I need to set left and top too.

While working with IE, Microsoft site can be very usefull ;-)

For those with broadband and the ability to read long-winded. News is
slower but more efficient. Also, news will consider whether operations
are compatible with other browsers.

In the particular
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/refere
nce/properties/width_1.asp>
states that:
<quote>
When scripting the height property, use either the pixelHeight or
posHeight property to numerically manipulate the height value.

...

It looks as if you missed the point of my last quoted paragraph above.
Changing size - width and height - is working properly for me. What I
now need is *either* to be able to change top & left values with
javascript, *or* to be able to set (statically will do) right and bottom
positions, so that changing size moves left and top.

That's now coded, ready to be looked at in a later browser.

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated Wed, 2 Nov
2005 13:06:40, seen in Dr John Stockton

It looks as if you missed the point of my last quoted paragraph above.
Changing size - width and height - is working properly for me. What I
now need is *either* to be able to change top & left values with
javascript, *or* to be able to set (statically will do) right and bottom
positions, so that changing size moves left and top.

That's now coded, ready to be looked at in a later browser.

But realised to be insufficient, before looking.

I now place the image "in" a new absolutely-positioned <div> of no size,
adjusting the position of the <div> to put the bottom right corner of
the image where I want it, whatever size the image has become. It's not
as elegant as I'd hoped, but has the corresponding visual effect here.

 

[VK]

Dr John Stockton wrote: 1

The next wish is to be able to alter the position and size of another
image, by executing script. Either IE4 cannot do that, or I'm missing a
necessary piece in the code :

with (document.images["SH"]) { alert(height) } // alert shows number
but
with (document.images["SH"]) { height = 10 + T1*5 } // no effect

Dr John Stockton wrote: 2

It looks as if you missed the point of my last quoted paragraph above.
Changing size - width and height - is working properly for me.

I see that expessing yourselve in English is not your strongest talent
so I'm being forgiveful (but stumbled).
:-D

What I now need is *either* to be able to change top & left values with
javascript, *or* to be able to set (statically will do) right and bottom
positions, so that changing size moves left and top.

function moveImage(imageObj, newX, newY) {
imageObj.style.left = newX + 'px';
imageObj.style.right = newY + 'px';
}

Did I get at least this right?

That's now coded, ready to be looked at in a later browser.

So do you still need a working code sample or note?

 

[Dr John Stockton]

JRS: In article <[email protected]>,
dated Wed, 2 Nov 2005 11:19:10, seen in VK

function moveImage(imageObj, newX, newY) {
imageObj.style.left = newX + 'px';
imageObj.style.right = newY + 'px';
}

Did I get at least this right?

I believe so.

With unsatisfactory overall results, alas.

So do you still need a working code sample or note?

You've given the essentials of the code above. Having successfully
adjusted the size of the image by setting its height and width directly,
I'd not perceived that its position could not be set directly, but only
in its style.

All is as it should be in IE4, and it seems better to get the simpler
BarChart (OK in IE4) to work in IE6 first.

Thanks.

 

[VK]

You've given the essentials of the code above. Having successfully
adjusted the size of the image by setting its height and width directly,
I'd not perceived that its position could not be set directly, but only
in its style.

The tricky side of the image width and height values is that it
reflects the "vewport stratch size" rather than real image size.

Say if you have an image 200px x 200px declared as:
<img name="Starbust" src="starbust.gif">
then
document.images['Starbust'].width equals 200

But if you do later:
document.images['Starbust'].width = 400;
then
document.images['Starbust'].width equals 400
and you have no known means to determine that the real image width (as
declared in the image file header) is actually 200.

This is why it's always a good idea to memorize the real image size
before the first size change:

function changeSize(obj,w,h) {
if (!obj.realWidth) {
obj.realWidth = obj.width;
obj.realHeight = obj.height;
}
if (w) {
obj.width = w;
}
if (h) {
obj.height = h;
}
}

then later you can

function resetSize(obj) {
if (obj.realWidth) {
obj.width = obj.realWidth;
obj.height = obj.realHeight;
}
}