www.webdeveloper.com
Results 1 to 4 of 4

Thread: Change image on link hover?

Hybrid View

  1. #1
    Join Date
    Jun 2010
    Posts
    3

    Change image on link hover?

    Hi everyone,

    I'm new here. I'm designing my own site so I'm learning code as I go, and I've run into a problem. Here's my test page. I want the image in the "Articles" box to change when I hover over the links on the right, which it does right now. (Those are actually 3 different images.) I also want the image to link to the same article as the hovered link, kind of like Yahoo's current home page. I think this is all the relevant code I'm using right now:

    HEAD:
    <script language="JavaScript" type="text/JavaScript">
    function showT(q)
    {
    document.getElementById('articles').setAttribute('src','0'+q+'.jpg')
    }
    </script>

    BODY:
    <!-- Begin main articles -->
    <tr><td style="border-style:none dotted none none; border-width:1px; border-color:#5CB800" align="center" width="375" rowspan="3"><img id="articles" src="00.jpg" style="border-style:none"></td>

    <!-- Right titles -->
    <td style="border-style:none"><a href="#" onmouseover="showT(0)">TEST: This is the title of the article you're looking for</a></td></tr>
    <!-- End of 1st row -->
    <tr><td style="border-style:none"><a href="#" onmouseover="showT(1)">TEST: This is the title of the article you're looking for</a></td></tr>
    <tr><td style="border-style:none"><a href="#" onmouseover="showT(2)">TEST: This is the title of the article you're looking for</a></td></tr>
    <!-- End main articles -->


    Does anyone see the problem?

  2. #2
    Join Date
    Apr 2008
    Location
    Mumbai, India
    Posts
    259

  3. #3
    Join Date
    Apr 2006
    Location
    New Delhi - India
    Posts
    12
    that you can do with Dreamweiver also just click the button image hove and there follow the path

    http://www.youtube.com/watch?v=IIh4TRn6Slc

    You can see the video....

  4. #4
    Join Date
    Jun 2010
    Posts
    3
    Thanks for the responses. Shanu, that helped to change the large image on mouseover like I want, but I don't know how to change the page the large image links to. Using the page you sent me as an example, I want that link to change to match the link of the small image. This is what I have so far:

    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    Click on thumbnail for larger picture<BR><BR>
    <a href="http://www.google.com/"><IMG SRC="http://gwydir.demon.co.uk/jo/javascript/sbergamot.jpg" ALT=" "
    ONMOUSEover="document.images['large'].src='http://gwydir.demon.co.uk/jo/javascript/bergamot.jpg'"></a>
    <a href="http://www.mozilla.org/"><IMG SRC="http://gwydir.demon.co.uk/jo/javascript/sfoxglove.jpg" ALT=" "
    ONMOUSEover="document.images['large'].src='http://gwydir.demon.co.uk/jo/javascript/foxglove.jpg'"></a>
    <a href="http://www.yahoo.com/"><IMG SRC="http://gwydir.demon.co.uk/jo/javascript/spansy.jpg" ALT=" "
    ONMOUSEover="document.images['large'].src='http://gwydir.demon.co.uk/jo/javascript/pansy.jpg'"></a>
    <BR><BR>
    <a href="http://www.msn.com/"><IMG SRC="http://gwydir.demon.co.uk/jo/javascript/space.jpg" ALT=" " NAME="large"></a>
    </BODY>
    </HTML>

    What do I do now?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles