473,324 Members | 2,356 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

Overlaying images ?


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.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Oct 30 '05 #1
8 1833
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.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Oct 31 '05 #2
JRS: In article <Db******************************@comcast.com>, dated
Sun, 30 Oct 2005 18:56:25, seen in news:comp.lang.javascript, Randy Webb
<Hi************@aol.com> posted :
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?


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 news:*.stylesheets (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.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Oct 31 '05 #3
VK

Dr John Stockton wrote:
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/default.asp?url=/workshop/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.

Nov 1 '05 #4
JRS: In article <11**********************@g43g2000cwa.googlegroups .com>
, dated Tue, 1 Nov 2005 14:00:21, seen in news:comp.lang.javascript, VK
<sc**********@yahoo.com> posted :

Dr John Stockton wrote:
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/de...r/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.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
The Big-8 newsgroup management is attempting to legitimise its questionable
practices while retaining its elitist hegemony. Read <URL:news:news.groups>.
Nov 2 '05 #5
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?

Nov 2 '05 #6
JRS: In article <Sz**************@merlyn.demon.co.uk>, dated Wed, 2 Nov
2005 13:06:40, seen in news:comp.lang.javascript, Dr John Stockton
<jr*@merlyn.demon.co.uk> posted :

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.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Nov 3 '05 #7
JRS: In article <11*********************@g44g2000cwa.googlegroups. com>,
dated Wed, 2 Nov 2005 11:19:10, seen in news:comp.lang.javascript, VK
<sc**********@yahoo.com> posted :
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?


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


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.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Nov 5 '05 #8
VK

Dr John Stockton wrote:
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;
}
}

Nov 6 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Fearless Freep | last post by:
I know there's a PIL mailing list but I thought I would try the question here as well. I'm using PIL on Python 1.5.2 (stop laughing, it's what the ISP has for CGI and I don't have a choice) ...
7
by: Wayne | last post by:
I have a script that uses filesystemobject that reads files from a given path, in my case images. It is running on a server that is 2000 adv svr w/ all current patches. The script prior to some...
2
by: wooks | last post by:
I have designed a form whereby the bottom right hand corner of each field is overlayed with text that act as a caption for the field. As an example see the background labels in this article...
1
by: Daphne Tregear | last post by:
I'm following the recommendation: <link rel="stylesheet" type="text/css" href="stuff_all_browsers_cope_with.css"> <style type="text/css"> @import url(stuff_netscape_4_wobbles_with.css);...
3
by: James Dean | last post by:
I have 2 1bppindexed bitmaps and i want to combine both together. I converted both to 24bpp then tried to combine them but it didnt work. If possible i want to be able to draw one bitmap directly...
3
by: Simon | last post by:
This problem has been driving me mad for months.... Seen a few posts on forums about it but no answers... No mention on MSDN etc. XP Pro SP1, VS.NET (c#) .Net framework 1.1, IIS 5.1. In a...
4
toxicpaint
by: toxicpaint | last post by:
Hi, can anyone give me a hand. I'm currently displaying 4 random images at the top of a page. I did this using an array of 35 pictures and then writing them to page. The problem I have is that in...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.