Change image on link hover? [Archive]

Click to See Complete Forum and Search --> : Change image on link hover?

bwall

06-09-2010, 09:51 AM

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 (http://test.naturalfrugality.com/home%28colors%29.php). 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 (http://www.yahoo.com) 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:

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


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

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


Does anyone see the problem?

Shanu.chaudhary

06-10-2010, 01:15 AM

http://gwydir.demon.co.uk/jo/javascript/pix.htm

cruxabhi

06-10-2010, 02:27 AM

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....

bwall

06-10-2010, 09:35 AM

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?