onMouseOver in document.write

[BDT]

I have a button that is superimposed on multiple images using a document.write statement in a loop. It works just fine, but I want to add a mouseover image. The following code is what I started with before I tried to add the mouseover:

document.write('<a href="#" id="button' +
i + '" onClick="switchcolor(this)"><img style="position:absolute; left:60px; top:50px; width:25px; height:25px"' + ' src="round_up_green.gif" border=0><a/>');

Is there a straitforward way to add a simple mouseover to this? Here is the general idea of what I want, but, of course, this didn't work:

document.write('<a href="#" id="button' +
i + '" onMouseOver="document.images[this].src=round_up_red.gif" onClick="switchcolor(this)"><img style="position:absolute; left:60px; top:50px; width:25px; height:25px"' +
' src="round_up_green.gif" border=0><a/>');

Unfortunatly, I can't just specify the images[] or elementId since they are different for each place the mouseover image appears. I know that I can do a workaround by calling a new function to do the mouseover image, but it doesn't seem this should be necessary. I imagine that I would also have to do some pretty complicated logic to detect which elementId I'm dealing with and then to correctly associate it with the proper images[]. Anyway, I appreciate any ideas that people may have to add a working onMouseOver parameter to the document.write statement.

thanks, BDT

[Saj]

Can't you do this?


document.write("<a href=\"#\" id=\"button" +
i + "\" onClick=\"switchcolor(this)\"><img style=\"position:absolute; left:60px; top:50px; width:25px; height:25px\" src=\"round_up_green.gif\" border=0><a/>");

[BDT]

I'm sorry, but I don't follow your posting. You didn't even have an 'onMouseOver' in the statement.

Also, I'm new at this, but I don't recall seeing the ' \ ' used in statements like you have used it.

Please elaborate....thanks, BDT

[Roy Sinclair]

Move the onmouseover event to the <img> tag instead of being in the <a> tag, then replace "document.images[this]" with just "this", those two simple changes should make it work.

[Saj]

Whoops sorry I took the wrong one.

[BDT]

Roy, works great. I recall putting prior onMouse events in the <a> tag, before, but it doesn't work here.

thanks, BDT

[Roy Sinclair]

It is also possible to do this via the onmouseover event for the <a> tag but then you have to walk the DOM to find the image within the <a> tag. Since all you're doing is a simple image swap and the only content of the <a> tag is the <img> tag it's much simpler to just use the onmouseover event of the <img> tag.