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]

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.moriaux/truc/bouton_3_etats_css.htm

 

[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]

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 ?

 

[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]

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