Search code examples
javascripthtmlimageurlonmouseover

Changing both link and image for a different part of the page onmouseover

Could someone help me figure this out? I am mostly self-taught and really honestly have little idea what actually I'm doing.

I'm trying to get the onmouseover event to change a different image on the page when hovering over the first part...but also to change the URL of the changed image at the same time. I've found some valuable information on changing the image, but not which also will change out the URL when the image changes.

Specifically, I'm trying to change both the image displayed and the url for "invite_r2_c1" onmouseover. What (and where, exactly) am I missing (it)? The code as it is right now works, but doesn't actually change any url linking.

I've probably done something really backwards, but this is the code I'm working with:

<tr>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" ><img name="invite_r1_c1" src="images/invite_r1_c1.gif" width="269" height="644" id="invite_r1_c1" alt="" /></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_01.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_01b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_01b.jpg';" ><img name="invite_r1_c2" src="images/invite_r1_c2.gif" width="105" height="644" id="invite_r1_c2" alt=""></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_02.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_02b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_02b.jpg';" ><img name="invite_r1_c3" src="images/invite_r1_c3.gif" width="99" height="644" id="invite_r1_c3" alt="" /></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_03.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_03b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_03b.jpg';" ><img name="invite_r1_c4" src="images/invite_r1_c4.gif" width="102" height="644" id="invite_r1_c4" alt="" /></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_04.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_04b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_04b.jpg';" ><img name="invite_r1_c5" src="images/invite_r1_c5.gif" width="100" height="644" id="invite_r1_c5" alt="" /></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_05.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_05b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_05b.jpg';" ><img name="invite_r1_c6" src="images/invite_r1_c6.gif" width="101" height="644" id="invite_r1_c6" alt="" /></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" ><img name="invite_r1_c7" src="images/invite_r1_c7.gif" width="274" height="644" id="invite_r1_c7" alt="" /></span></td>
<td><img src="images/spacer.gif" width="1" height="644" alt="" /></td>
</tr>
<tr>
<td colspan="7"><a href=link1.htm><img name="invite_r2_c1" src="images/invite_r2_c1_00.gif" width="1050" height="406" id="invite_r2_c1" alt="" /></a></td>
<td><img src="images/spacer.gif" width="1" height="406" alt="" /></td>
</tr>
Solution

  • Going to tidy things up a bit for you. First of all, create a reusable function called changeImageAndURL() so you get something reusable instead of always dumping raw js into the HTML.

    For the HTML part change all your hover images to something like:

    //I'm not going to repeat every image here, just giving you example for one
<td><span onmouseover="changeImageAndURL('images/invite_r2_c1_00b.jpg','link2.html')"><img name="invite_r1_c1" src="images/invite_r1_c1.gif" width="269" height="644" id="invite_r1_c1" alt="" /></span></td>

    I removed the ommouseout and onclick event because they seem to do the same thing as onmouseover, in which case you would only need the latter.

    Add an id to the link you want to change:

    <td colspan="7"><a id="invite_r2_c1_link" href=link1.htm><img name="invite_r2_c1" src="images/invite_r2_c1_00.gif" width="1050" height="406" id="invite_r2_c1" alt="" /></a></td>

    Now in your JS part:

    function changeImageAndURL(img, link) {
     document.getElementById('invite_r2_c1').src = img;
     document.getElementById('invite_r2_c1_link').href = link;
}