Image Swaps and Rollovers in Different Table Cells

 

Introduction.  We have done rollovers before, but I want to upgrade what we have done slightly by placing the images in different cells in a table.  This leads into developing more sophisticated rollovers that are based on the image maps we are about to develop in subsequent web pages.

Some of the types of projects we are looking to develop involve creating functional "look ahead" features in web navigation.  For example, you should look at the link for Michigan State University at http://www.msu.edu/home/.  There are little menus that appear when you click on the tabs at the bottom.

Admissions/Aid - - Campus Info - - Academics

We might also make these menus appear when a user rolls over the spot which is done at Syracuse University College of Law at http://www.law.syr.edu/.

These are examples of what I call look ahead features because they give the browser additional information about where they might choose to go without them actually selecting the link.  This can be very convenient.

There are a number of ways these can be configured and we will start with one of the more standard approaches after we develop this page and then more about image maps in subsequent pages.

Presently, you should copy the following code into a file named TableImageSwap.html.  This particular approach relates more to what is done at Michigan State's homepage.

 

<html>
<head>
<title>Image Navigation</title>
</head>

<body bgColor="000000" link="#990000" vlink="#800000">

<table>
<tr>
<td>
<a href = "#" 
onClick = "window.document.the_image.src = 'images/VaTechPylons.jpg'; 
return false;">
<font size=4><b>Va Tech Pylons</b></font></a><br>
<a href = "#" 
onClick = "window.document.the_image.src = 'images/VaTechDuckPond.jpg'; 
return false;">
<font size=4><b>Va Tech Duck Pond</b></font></a>
</td>
<td>
<img src="images/VaTechDuckPond.jpg" name="the_image">
</td>

</tr>
</table>

</body>
</html>

 

The following page should appear after this is uploaded.  You should be able to change the image in another cell in the table by clicking on the appropriate link.  This is actually simpler than dealing with separate frames.

 

 

Now we will modify this code slightly so that the images will change when the user rolls over the links.

Now you need to develop the OnMouseOverImageSwap.html.  While this will appear essentially the same in a static snap shot pasted into this web, you should upload the page and experiment with it to see that it responds to your rollovers.

 

<html>
<head>
<title>Image Navigation</title>
</head>

<body bgColor="000000" link="#990000" vlink="#800000">

<table>
<tr>
<td>
<a href = "#" 
onMouseOver = "window.document.the_image.src = 'images/VaTechPylons.jpg'; ">
<font size=4><b>Va Tech Pylons</b></font></a><br>
<a href = "#" 
onMouseOver = "window.document.the_image.src = 'images/VaTechDuckPond.jpg'; ">
<font size=4><b>Va Tech Duck Pond</b></font></a>
</td>
<td>
<img src="images/VaTechDuckPond.jpg" name="the_image">
</td>

</tr>
</table>

</body>
</html>

 

This basic structuring will prove to be important when we start making use of images that look like menus with hotspots/image maps.