Posted by Bone Ur on 11/11/07 09:10

Well bust mah britches and call me cheeky, on Sun, 11 Nov 2007 05:34:15
GMT R.A.M. scribed:

> 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_ove
> r.gif'"
> onmouseout="document.linkAssociation.src='images/Association_capt
> ion.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_capti
> on.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/

Try using onmouseover="document.getElementById
('linkAssociation').src='images/Association_over.gif'"

and

<img id="linkAssociation" name="linkAssociation"
src="images/Association_caption.gif" width="200" alt="" />

--
Bone Ur
Cavemen have formidable pheromones.

[Back to original message]