Frames and Image Swaps
Previously, we developed image swaps as a prelude to developing
rollovers. Now we will develop image swaps where the links that
invoke the swap are in one frame and the images appear in another frame.
You need to copy the following images.
|This slightly different first page should be called ImageFrameset.html.|
<title>Organizing Page for Image Swapping in Frames</title>
<frameset rows = "30%, *">
<frame src = "ImageNavigation.html" name="ImageNavigate">
<frame src = "ImagePage.html" name="ImageFrame">
|This is essentially the same as the previous organizing
page except we the frames are presented in rows rather than columns.
Now you need to develop the ImageNavigation.html which will appear on the top.
<title>The Navigation Page</title>
<body bgColor="222222" link = "aa0000" vlink="990000">
<a href="#" onClick="parent.ImageFrame.document.the_image.src = 'images/VaTechPylons.jpg';
return false;"><font size=4><b>Va Tech Pylons</b></font></a><P>
<a href="#" onClick="parent.ImageFrame.document.the_image.src = 'images/VaTechDuckPond.jpg';
return false;"><font size=4><b>Va Tech Duck Pond</b></font></a>
|When the user clicks on a link the image.src
changes, but it appears in the ImageFrame. This is the key aspect
of this exercise. It is important to notice the object
The following HTML needs to be placed in ImagePage.html.
<title>The Page to Display the Images</title>
<img src = "images/VaTechDuckPond.jpg" name="the_image">
|The initial image is of the Virginia Tech Duck Pond and
it is given the name "the_image". This name is important
for the image swap.
When you upload these pages and go to the ImageFrameset.html you should see something like the following.
|Now you can swap the images by clicking on the links.|