how to achieve onmouseover/onmouseout effect?

R

R.A.M.

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/
 
B

Bone Ur

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="" />
 
R

R.A.M.

U¿ytkownik "Bone Ur said:
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="" />

Captions still don't change.
Please help.
/RAM/
 
B

Bergamot

R.A.M. said:
For example the image Association.wmf has caption Association_caption.gif

FYI, wmf files are not suitable for web use.
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:

Post a URL.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,906
Latest member
SkinfixSkintag

Latest Threads

Top