how to achieve onmouseover/onmouseout effect?

Discussion in 'HTML' started by R.A.M., Nov 11, 2007.

  1. R.A.M.

    R.A.M. Guest

    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/
     
    R.A.M., Nov 11, 2007
    #1
    1. Advertising

  2. R.A.M.

    Bone Ur Guest

    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.
     
    Bone Ur, Nov 11, 2007
    #2
    1. Advertising

  3. R.A.M.

    R.A.M. Guest

    U¿ytkownik "Bone Ur" <> napisa³ w wiadomo¶ci
    news:Xns99E5160DC5943boneurhyphe@85.214.62.108...
    > 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/
     
    R.A.M., Nov 11, 2007
    #3
  4. R.A.M.

    Bergamot Guest

    R.A.M. wrote:
    >
    > 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.

    --
    Berg
     
    Bergamot, Nov 11, 2007
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tor Inge Rislaa
    Replies:
    3
    Views:
    16,131
    Jerry III
    Aug 6, 2003
  2. Rob Roberts
    Replies:
    3
    Views:
    34,633
    Nathan Sokalski
    Jan 28, 2006
  3. Kurda Yon
    Replies:
    1
    Views:
    710
    Andy Dingley
    Feb 10, 2008
  4. Dave
    Replies:
    0
    Views:
    468
  5. Neredbojias

    Re: onMouseOver and onMouseOut

    Neredbojias, Sep 9, 2010, in forum: HTML
    Replies:
    0
    Views:
    511
    Neredbojias
    Sep 9, 2010
Loading...

Share This Page