OnMouseOver works but the small thumbnail remains as red X only - how to show the thumb?

Question

Hi, I'm using the following so that site visitors can click on a thumbnail (in this case its called tn_guinness-label.jpg) and when they do click, a larger image appears (in this case called guinness-label.jpg). So.... I tried it and all I could see was a tiny box with a red X inside, and when I hovered my mouse over the red X, it worked as it should and showed me the larger image.

Why didn't it show me the thumbnail before I did mouseover? Plus, after I had completed the mouseover and then took my mouse away, I could then actually see the thumbnail image, which then stayed on view. So.... what am I doing wrong because the thumbnail did not show initially, it only showed after I had completed the mouseover. Thank you for your help. The following is what I'm using (aspx pages... with Visual web Developer free version)

<script language="javascript" type="text/javascript"> </script>

<table style="border:solid black 1px;font-size:12pt; font-family:verdana">
<tr>
<td>
<img alt="Guiness Advert" id="guiness" name="guiness" src="~/folder1/folder2/folder2//tn_guinness-label.jpg"  onmouseover="document.guiness.src ='guinness-label.jpg';" onmouseout="document.red.src ='tn_guinness-label.jpg';" />
</td>
<td>
<div>Guiness Label</div>
</td>
</tr>
</table>

If solution cannot be given for the above, I'm happy to receive any info whatsoever on how to achieve mouseover effects on a thumbnail, in aspx pages. Many thanks.

LisaMac

Answer 1

The box with the red X is the way IE (assuming you are using IE) indicates a missing image.

Check that the path to your thumbnail image in your img tag is correct.

The reason it appears when you leave the image is that the OnMouseOut event has the correct path to the image.

I notice that you have a "~" at the start. Do you mean to search from the root of the application or the current folder?

Answer 2

Do you keep image in ./~/folder1/folder2 etc directory?

And didn't you mean document.getElementById('guiness').src (or whatever it is?)?

Answer 3

There seem to be two issues.

a. Consistency of your .src

eg it should be the full path in all instances like:

document.guiness.src ='folder1/folder2/folder2/guinness-label.jpg"

b. Consistency of using document.guiness.src

eg in the mouseout it is:

document.red.src