Posted by R.A.M. on 11/11/07 05:34

Hello,
I am learning HTML/CSS/JavaScript and I don't know how to do the following
thing (I have little experience).
On page I have four images (.gif) with captions (also images, .gif). I would
like to have such effect:
I the user sets mouse pointer over the image then caption image is changed;
when the user leaves the image,
the caption is restored.
For example the image Association.wmf has caption Association_caption.gif,
and when the user set mouse pointer over
Association.wmf the caption should be changed to Association_over.gif.
Here is what I have done:

<form id="Form" name="Form">
<table border="0" width="725px">
<tr align="center">
<td align="right">
<a href="Association.html" title="Association &quot;Integration&quot;"
onmouseover="document.linkAssociation.src='images/Association_over.gif'"
onmouseout="document.linkAssociation.src='images/Association_caption.gif'">
<img src="images/Association.gif" height="200" width="200"
/>&nbsp;<br/>
<img name="linkAssociation" src="images/Association_caption.gif"
width="200" />&nbsp;
</a>
</td>
<td align="left">
<a href="Center.html" title="Center"
onmouseover="document.linkCenter.src='images/Center_over.gif'"
onmouseout="document.linkCenter.src='images/Center_caption.gif'">
&nbsp;<img src="images/Center.gif" height="200" width="200" /><br/>
&nbsp;<img name="linkCenter" src="images/Center_caption.gif"
width="200" />
</a>
</td>
</tr>
<tr align="center">
<td align="right">
<a href="Club.html" title="Club &quot;Amicus&quot;"
onmouseover="document.linkClub.src='images/Club_over.gif'"
onmouseout="document.linkClub.src='images/Club_over.gif'">
<img src="images/Club.gif" height="200" width="200" />&nbsp;<br/>
<img name="linkClub" src="images/Club_caption.gif" width="200"
/>&nbsp;
</a>
</td>
<td align="left">
<a href="Voluntary.html" title="Voluntary"
onmouseover="document.linkVoluntary.src='images/Voluntary_over.gif'"
onmouseout="document.linkVoluntary.src='images/Voluntary_caption.gif'">
&nbsp;<img src="images/Voluntary.gif" height="200" width="200" /><br/>
&nbsp;<img name="linkVoluntary" src="images/Voluntary_caption.gif"
width="200" />
</a>
</td>
</tr>
</table>
</form>

I don't know why captions are not changed, I mean when the user sets mouse
pointer over image the caption remains unchanged.
Could you help me please?
/RAM/

[Back to original message]