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

Display same image at different places in a window

P: n/a
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
Share this Question
Share on Google+
8 Replies


P: n/a

"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

P: n/a
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

P: n/a
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

P: n/a
@SM
Thomas 'PointedEars' Lahn a ecrit :
</> [psf 7.9]


Sorry ?
What that means ?

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

Jul 20 '05 #5

P: n/a
"@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

P: n/a
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

P: n/a
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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.