image/row cloning with attached behaviors. clicking cloned image, executes methods on original.

[sonic]

Hello,

I am cloning a table row which contains images that have behaviors
attached to them as well as onclick events.

The problem is that the cloned row seems to be executing the
behavior/events on the original rows image. I overwrote the onclick as
well as attached a behavior to the image in cloned row, but events such
as onmouseover execute now on both images when the duplicate is mouse
overed.

here is how i clone the row:

var oldRow = t.rows[0];
var newRow = oldRow.cloneNode( true );

I know that i can re-create the new row/image from scratch, however, I
would like to be able to use the cloning technique because of the way
the original is crated ( on the server ) with alot of properties/events
that would need to be re-created. The only thing i need to change on
the cloned row is the id's of most elements. I got everything to work
correctly accept for one last issue explained in teh first half of this
post.

[ASM]

sonic wrote:

Hello,

I am cloning a table row which contains images that have behaviors
attached to them as well as onclick events.

The problem is that the cloned row seems to be executing the
behavior/events on the original rows image. I overwrote the onclick as
well as attached a behavior to the image in cloned row, but events such
as onmouseover execute now on both images when the duplicate is mouse
overed.

here is how i clone the row:

var oldRow = t.rows[0];
var newRow = oldRow.cloneNode( true );

now is to know how you made your roll-over function on images ...
(if it works on name (or id) of images
that will want to roll 2 (or more) same nammed images )

You know you can use css to do a roll-over ?
(automaticaly pre-loaded image and no possibility to confuse)
simple css roll-over
http://perso.wanadoo.fr/stephane.mor..._etats_css.htm

--
Stephane Moriaux et son [moins] vieux Mac

[sonic]

the rollover is a small part of the attached behaviors.
what would be the difference if it was done by name vs id in the
context of my original question ?

[ASM]

sonic wrote:

the rollover is a small part of the attached behaviors.
what would be the difference if it was done by name vs id in the
context of my original question ?

<cite>
but events such
as onmouseover execute now on both images when the duplicate is mouse
overed.
</cite>

I understood :
- you clone a row with images
- images have a rollover

I supose you appendChild somewhere this clone (and its images)

So we get 2 teams of images with same ids or names
if you rollover the image nammed 'img_1'
wich one of both 'img_1' the browser has to roll ?

--
Stephane Moriaux et son [moins] vieux Mac

[Danny]

Chances are is due to the absolute addressing, the IDs, instead, either,
rename the ids on the cloned one, or, do not use IDs in the source, and
use 'this' or just node/sibling addressing instead.
Danny

--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/

[sonic]

hi,
that is correct,
however after cloning, i override the image id's in the cloned row.
i also attempted to override names, but those don't seem to get
overriden !
id's appear with new names when i write out the new rows innerHTML

[sancha]

use 'this' it might work
forget abt id or name if you are using IE

i clone a row and then do getElementsByName('firstrow') and guess what
i have 2 rows with the same name... oh yeah i did set the id,name of
the cloned row differently but as u now IE is special. btw i also
found out if u have an element without an name but an id. and do
getElementsByName it will fethch the element with the id but no name
@#$@#$
and getElementsByName is case insensitive as well :((

[ASM]

sonic wrote:

hi,
that is correct,
however after cloning, i override the image id's in the cloned row.
i also attempted to override names, but those don't seem to get
overriden !
id's appear with new names when i write out the new rows innerHTML

did you also correct the mouse-envent calling ?
simple JS rollover without name of image (nor id of link) :
(to see if it corrects pblems with clones ?)

function roll(obj,newImg) {
obj = obj.getElementsByTagName('IMG')[0].src
obj = newImg;
}

<a href="foo_1.htm" id="lk_1"
onmouseover="roll(this,'pict_1o.jpg');"
onmouseoout="roll(this,'pict_1.jpg');">
<img src="pict_1.jpg">
</a>
<a href="foo_2.htm" id="lk_2"
onmouseover="roll(this,'pict_2o.jpg');"
onmouseoout="roll(this,'pict_2.jpg');">
<img src="pict_2.jpg">
</a>

and much beter using pre-loaded images

and once more : use css roll-overs

--
Stephane Moriaux et son [moins] vieux Mac