473,320 Members | 2,088 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,320 software developers and data experts.

Display same image at different places in a window

Hi, I want to display the same image (from the same file) at different
positions in a window. Up to now I used DIV command in the body part of the
text, and document.getElementById in order to place it at the right place.
But when I do that several times, only the last position is displayed. How
to show all positions ?
Thanks
Yves
Jul 20 '05 #1
8 12180

"Yves PEYSSON" <Yv**********@wanadoo.fr> schreef in bericht
news:BC014077.5F1A%Yv**********@wanadoo.fr...
Hi, I want to display the same image (from the same file) at different
positions in a window. Up to now I used DIV command in the body part of the text, and document.getElementById in order to place it at the right place.
But when I do that several times, only the last position is displayed. How
to show all positions ?


Perhaps the following is helpful:

<html>
<head>
<title> New Document </title>
<script type="text/javascript">
window.onload = function () {
var clone = document.getElementById('logo').cloneNode(true);
document.getElementsByTagName('BODY')[0].appendChild(clone);
clone.style.position = 'absolute';
clone.style.left = '10px';
clone.style.top = '200px';
}
</script>
</head>

<body>
<img id="logo" src="http://www.google.nl/intl/nl_nl/images/logo.gif" />
</body>
</html>
JW

Jul 20 '05 #2
Yves PEYSSON wrote on 13 Dec 2003 at Sat, 13 Dec 2003 21:17:27
GMT:
Hi, I want to display the same image (from the same file) at
different positions in a window. Up to now I used DIV command in
the body part of the text, and document.getElementById in order
to place it at the right place. But when I do that several
times, only the last position is displayed. How to show all
positions?


A single DIV can only be in one place at one time. Create multiple
DIVs with different IDs and place them wherever it is you want.

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk")
Jul 20 '05 #3
Yves PEYSSON wrote:
Hi, I want to display the same image (from the same file) at different
positions in a window. Up to now I used DIV command in the body part of the
text,
<prayer_wheel>
<acronym title="HyperText Markup Language">HTML</acronym>
is not a programming language. There are no HTML commands.
</> [psf 7.9]

You mean a `div' _element_.
and document.getElementById
That is why the method is named that way.
in order to place it at the right place.
document.getElementById(...) only retrieves a reference to
the HTML element object, if there is any. Do not use

document.getElementById("foobar").bla = foo;
document.getElementById("foobar").blubb = bar;
...

but use

if (document.getElementById) // make sure it is supported
{
var o = document.getElementById("foobar");
if (o)
{
o.bla = foo;
o.blubb = bar;
}
}

instead.
But when I do that several times, only the last position is displayed.
How to show all positions ?


Since you do not show *any* snippet of your code(!), I can only *guess*
that you confront a common processing problem with animations. If you
try to accomplish such like

function Position(x, y)
{
this.x = x;
this.y = y;
}

var a = [new Position(1, 2), ...];

for (var i = 0; i < a.length; i++)
{
referenceToDivElement.style.left = a[i].x + "px";
referenceToDivElement.style.top = a[i].y + "px";
}

it seems like the `div' element is placed only at the last position.
That is because the CPU is far to fast for the graphics card and the
host, or preceding assignments are removed by internal optimization.

If you do

function setPos(x, y)
{
referenceToDivElement.style.left = x + "px";
referenceToDivElement.style.top = y + "px";
}

for (var i = 0; i < a.length; i++)
{
setTimeout("setPos(", a[i].x + ", " + a[i].y + "), 42);
}

it may also seem like the `div' element is placed only at the last
position. That is because you plan to call setPos(...) with different
values but *at* *the* *same* *time*. For there cannot be a "same time"
in non-quantum computing, the calls are planned that the first, using
a[0].x and a[0].y, is called after 42 milliseconds and the following
the next instant (small number of CPU cycles) which is either too fast
or again removed by internal optimization.

Note:
setTimeout(...) *does* *not* cause the script host to wait for an
expression to be evaluated and neither does setInterval(...).

To accomplish animations with ECMAScript implementations, you need to
plan the calls at multiples of the frame length instead:

for (var i = 0; i < a.length; i++)
{
setTimeout("setPos(", a[i].x + ", " + a[i].y + "), i * 42);
}

If you have an animation with variable frame length, you need to use
the offset to the first call for successive calls. A function that
calculates the offsets helps you to stay with your current data
structure *and* to provide useful values for setTimeout(...), e.g.:

function getOffsets(aLenghts)
{
var a = [0];
var nOffset = 0;

for (var i = 0; i < a.length; i++)
{
nOffset += a[i];
a[a.length] = nOffset;
}

return a;
}

var aFrameLengths = [11, 23, 42, 64, 10, 15];

// calculate array elements can be used
// as argument for setTimeout(...)
var aOffsets = getOffsets(aFrameLengths);

Note:
I used a frame length of 42 milliseconds only for entertainment.
Frame lengths below 50 milliseconds can significantly and thus
noticeably slow down the host and are not recommended in Web
applications. The acceptable minimum varies, depending on the
timed action(s) taken and on the host where the script is running
on.
HTH

PointedEars
Jul 20 '05 #4
@SM
Thomas 'PointedEars' Lahn a ecrit :
</> [psf 7.9]


Sorry ?
What that means ?

--
************************************************** ************
Stéphane MORIAUX : mailto:st*********************@wanadoo.fr

Jul 20 '05 #5
"@SM" <st**************@wanadoo.fr> writes:
Thomas 'PointedEars' Lahn a ecrit :
</> [psf 7.9]


Sorry ?
What that means ?


It is a reference to his page of standard comments, which is pretty
hard to guess when he doesn't give a link (preferably to a page not
in German).

<URL:http://www.stud.tu-ilmenau.de/~thla-in/psf/#net>

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #6
Lasse Reichstein Nielsen wrote:
"@SM" <st**************@wanadoo.fr> writes:
Thomas 'PointedEars' Lahn a ecrit :
</> [psf 7.9]
Sorry ?
What that means ?


It is a reference to his page of standard comments, which is pretty
hard to guess when he doesn't give a link


There is no need to guess anything. First, it is merely used as a kind
of trademark *following* my standard _phrases_. Second, you can (and
should, because it is off-topic!) ask me via e-mail about it.
(preferably to a page not in German).
Since I am now more active in the Big8, I have almost finished the
translation into English. Those who want to be informed about the
publication, just drop me a note (both From and Reply-To are of
course always valid, Reply-To is preferred.)
<URL:http://www.stud.tu-ilmenau.de/~thla-in/psf/#net>


This is a resource redirected to, use

<http://pointedears.de.vu/psf/#net>

instead (as written in the document), for the university account
is volatile and the first URL is likely to become invalid.
F'up2 poster

PointedEars
Jul 20 '05 #7
Thomas 'Ingrid' Lahn wrote:

function getOffsets(aLenghts)
{
var a = [0];
var nOffset = 0;
- for (var i = 0; i < a.length; i++)
+ for (var i = 0; i < aLengths.length; i++)
{
- nOffset += a[i];
+ nOffset += aLengths[i];
a[a.length] = nOffset;
}

return a;
}
PointedEars
Jul 20 '05 #8
JRS: In article <3F**********@PointedEars.de>, seen in
news:comp.lang.javascript, Thomas 'PointedEars' Lahn
<Po*********@web.de> posted at Sun, 21 Dec 2003 17:21:30 :-
Thomas 'Ingrid' Lahn wrote:

function getOffsets(aLenghts)
{
var a = [0];
var nOffset = 0;
- for (var i = 0; i < a.length; i++)
+ for (var i = 0; i < aLengths.length; i++)
{
- nOffset += a[i];
+ nOffset += aLengths[i];
a[a.length] = nOffset;
}

return a;
}


The code is still, it seems, not tested code.

Code should be inserted in a News article by copy'n'paste from a tested
version, except where trivial.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for 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.
Jul 20 '05 #9

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

Similar topics

5
by: David Greenwood | last post by:
I posted this under 'microsoft.public.sqlserver.client' but got no reply. Any help with this problem would be greatly appreciated --------------------- I developed a database under SQL Server...
2
by: Graham J | last post by:
Hello, Apologies for the somewhat wordy and garbled subject as I couldn't think how to phrase it and this has hindered my searching for any previous answers. It could be a really simple...
2
by: Tyrone Slothrop | last post by:
I am coding a site which involves uploading images. All of the PHP and display is OK but the client wants to be able to display the image thumbnail on the upload page and show the full image on...
7
by: Doc | last post by:
I've read in a couple of different places including the archives of this forum that html doesn't allow you to precisely dictate the position of an image, but I found this command (again in the...
3
by: RAllsopp | last post by:
I have a client who would like to have several pictures associated with one system. I have read about storing only the pathname to save OLE overhead and have set-up a form for my client to...
10
by: rajbala | last post by:
Hai all, I need to get two or three images as a buttons.At the moment when i click the image it must display on window if i click another image button that image also display on the same...
1
by: rajbala.3399 | last post by:
Hai all, I need to get multiple image buttonsand wheni click on the image button it should display corresponding image on window and if i click another image button it is also display on same...
9
by: tshad | last post by:
This was posted before but the message got messed up (all NLs were stripped out for some reason). I have 2 labels that hold the name of different images on my .aspx page. <asp:Label ID="Logo"...
4
by: ArrK | last post by:
I want to use a control frame to create and/or modify the content (images and text) of a display frame - all files and images are client side. . When I try to write to the display frame from the...
0
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...
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: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
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: 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
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
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.