Need help with positioned mouseover

[Diane]

This is really puzzling me, maybe its just my feeble brain, that cant see
what Im doing wrong. I am trying to create a page that loads up several
thumbnail images, that when onMouseover. the larger image appears, but
leaves the description text intact. I can easily get it to work the way I
want with just one image on the page, but whenever or whereever on the
page
i try to use the same code (except changing the position) to have another
picture (testing by just using the same pic over again) it stops working..

HEre are the two pages to compare. Is it something obvious that is just
escaping me?

This one works fine

http://freewebs.com/imagetest/zoom.html

This one does not????

http://freewebs.com/imagetest/zoom2.html


Any idea why? or how I can get it to do what I want?

email (remove x) or reply here, any help GREATLY appreciated..


Diane

 

[Jonas Raoni]

http://freewebs.com/imagetest/zoom.html

I couldn't access any of those url's from my country, I had to use "The

Any idea why? or how I can get it to do what I want?
email (remove x) or reply here, any help GREATLY appreciated..

Your code is looking strange Mrs. Diana

<DIV STYLE='position=absolute; left:150'><A HREF='#'
ONMOUSEOVER="document.pic.src='big.jpg'"
ONMOUSEOUT="document.pic.src='thumb.jpg'">
<IMG SRC='thumb.jpg' NAME='pic' BORDER='0'></A></DIV>


You should try to follow the w3.org <URL:http://www.w3.org> standards,
for example the name attribute already got deprecated.

Besides that, the problem is: when you have two elements with the same
name, they become a collection. Ex:


<input type="text" name="field" />
<input type="text" name="field" />

To access the first and the second one, you must use form.field[0] and
form.field[1] respectively. The same applies to your images.

 

[RobG]

This is really puzzling me, maybe its just my feeble brain, that cant see
what Im doing wrong. I am trying to create a page that loads up several
thumbnail images, that when onMouseover. the larger image appears, but
leaves the description text intact. I can easily get it to work the way I
want with just one image on the page, but whenever or whereever on the
page
i try to use the same code (except changing the position) to have another
picture (testing by just using the same pic over again) it stops working..

Jonas has given you the reason it fails. You might also consider
ditching the A element altogether, just use a mousever on the thumbnail
itself. Then you can do something like:

<img
style="cursor: pointer;"
src="thumb.jpg"
onmouseover="this.src = 'big.jpg'"
onmouseout="this.src = 'thumb.jpg'"
Pre-loading the 'big' images will help to improve response times.


[...]

 

[Diane]

Thank you both!

Ahhh , duhhh using the SAME name attribute, ya that would do it.. sometimes
I just dont see the obvious.

Also I tried using the cursorointer property and that seems to work even
better. Now if I can just figure out how to get the z-index working the way
I want, so that when the big pic comes up, it lays over the text on the next
column over

Thanks for your help.