A rchive Date
[ 14-09-2000 ]
Category
[ Information Technologies ]
sub-Categoy
[ Microsoft ]
|
[Creating Multi-Functional Web Links with FrontPage
Despite the increasing prevalence of large computer monitors, screen real estate never seems sufficient for many Web sites. Too often, in fact, a site's navigation system occupies space that would be better used displaying actual content. There are many solutions to this problem, but one we've found useful is to create navigation links in FrontPage® that perform two jobs. Clicking such links brings up the linked page, of course. Then, at the same time, the link itself changes to give the user a visual clue as to what page he's viewing.
Look at the Web. The last link clicked has a colorful halo around it, and that link corresponds to the page loaded into the frame at the right.
In this article, we'll show you how to use JavaScript to create such double-duty links. In fact, we'll go a step further and create triple-duty links: when the user hovers over a link, a related image will appear below the navigation bar.
Building blocks
Before you can start developing this project, you must create several image files. You'll need two versions of each button, as shown in Figure B, one of which is the default button and the other of which is the active button. We've added a halo effect to our active buttons, but you could differentiate yours with different colors or other effects.
However you design your buttons, it's important to ensure that both versions of each button are exactly the same size and that any common elements are in the same place. To make our buttons match in Image Composer, we first created the active version of each and then placed it on a transparent rectangle.
We selected all four elements--the rectangle, the text, the halo, and transparent rectangle--and saved them to disk as dogsa.jpg. Next, we removed the halo, as shown in the bottom half of Figure C, and saved the remaining three elements as dogsd.jpg.
Once you've created your button files, you'll need to create an additional image file to correspond with each button pair. Again, these images must all be the same size. You'll also need to create a file called square.jpg, which contains a transparent rectangle the same size as the image files.
At this point, you should have a total of 13 images saved.
Note: Unless you own a pet shop, you'll probably never create a Web site exactly like the one we're describing. However, for best results, we suggest that you follow the instructions in this article explicitly. Then, once your project is working, you can change it to suit your own needs.
Starting the Web site
Now that you have all your images ready, launch FrontPage Explorer and create a new, empty Web called tripleduty. When the Web appears, double-click the Images folder. Choose Import from the File menu and click Add File. Navigate to where you saved the image files, select all of them, and click Open. Finally, click OK to import them into the Web. Next, switch to FrontPage Editor. On the blank page that appears, type Dogs and then save the page as dogs.htm. Create three more pages named cats.htm, fish.htm, and birds.htm. These four pages will appear in the main frame when the corresponding links are clicked.
Create a fifth page, main.htm, which will be the default page in the right frame. You can use Figure A as a guide or simply type Pete's Pets for now.
The last page you'll need to create is the most complicated, because it's where all the JavaScript magic takes place. It will appear in the left frame.
Create a new page and insert dogsd.jpg, the default Dogs button. Hold down the [Shift] key and press [Enter] to move down a line and then insert catsd.jpg. Continue in this manner to insert fishd.jpg, birdsd.jpg, and square.jpg. Select all five images and click the Center button on the Format toolbar.
Select the Dogs button and click the Create Or Edit Hyperlink button. Create a link to dogs.htm and click OK. FrontPage will add a blue border around the image, which you'll need to remove. To do so, right-click on the image and choose Image Properties from the context menu. Then, click the Appearance tab and type 0 in the Border Thickness text box.
Link the other three buttons to their corresponding Web pages now. Again, remove the borders from all of them. Before continuing, save the page as navigate.htm.
Scripting the project
Now, you can add the core JavaScript routines to the page. Click the HTML tab to switch to HTML view and position the cursor just before the </head> tag. Enter the code from Listing A. (You can also download this code from our FTP site at ftp.zdjournals.com/mfp. Log in as an anonymous user.)
Listing A: JavaScript routines
<script language="JavaScript">
img1_default=new Image (165,59)
img1_active=new Image (165,59)
img1_picture=new Image (150,250)
img1_default.src="images/dogsd.jpg"
img1_active.src="images/dogsa.jpg"
img1_picture.src="images/dog.jpg"
img2_default=new Image (165,59)
img2_active=new Image (165,59)
img2_picture=new Image (150,250)
img2_default.src="images/catsd.jpg"
img2_active.src="images/catsa.jpg"
img2_picture.src="images/cat.jpg"
img3_default=new Image (165,59)
img3_active=new Image (165,59)
img3_picture=new Image (150,250)
img3_default.src="images/fishd.jpg"
img3_active.src="images/fisha.jpg"
img3_picture.src="images/fish.jpg"
img4_default=new Image (165,59)
img4_active=new Image (165,59
img4_picture=new Image (150,250)
img4_default.src="images/birdsd.jpg"
img4_active.src="images/birdsa.jpg"
img4_picture.src="images/bird.jpg"
total=4; //total number of buttons
function clicker(imgName) {
for (x=1; x<=total; x++) {
loopImage="img" + x;
if (loopImage == imgName) {
newImage=eval(loopImage + "_active.src");
} else {
newImage=eval(loopImage + "_default.src");
}
document[loopImage].src=newImage;
}
}
function hover(imgName) {
pixlocation="picture";
newImage=eval(imgName + "_picture.src");
document[pixlocation].src=newImage;
}
function unhover() {
pixlocation="picture";
document[pixlocation].src="images/square.jpg";
}
</script>
You should only need to change a few lines of the code to fit your projects. Specifically, the dimensions listed in the declaration statements should match those of the actual images you're using. For example, our buttons measure 165x59, while our animal images measure 150x250, as these lines indicate:
img1_default=new Image (165,59)
img1_active=new Image (165,59)
img1_picture=new Image (150,250)
Next, you'll need to add some parameters to the link statements in the page's <body> section. Scroll down to find the link definitions and add the code shown in color in Listing B. Save your page now.
Listing B: Changes to link definitions
<a href="dogs.htm" onclick="clicker('img1')"
onmouseover="hover('img1')"
onmouseout="unhover()"><img src="images/dogsd.jpg"
name="img1" alt="Dogs" border="0"
width="165" height="59"></a><br>
<a href="cats.htm" onclick="clicker('img2')"
onmouseover="hover('img2')"
onmouseout="unhover()"><img src="images/catsd.jpg"
name="img2" alt="Cats" border="0"
width="165" height="59"></a><br>
<a href="fish.htm" onclick="clicker('img3')"
onmouseover="hover('img3')"
onmouseout="unhover()"><img src="images/fishd.jpg"
name="img3" alt="Fish" border="0"
width="165" height="59"></a><br>
<a href="birds.htm" onclick="clicker('img4')"
onmouseover="hover('img4')"
onmouseout="unhover()"><img src="images/birdsd.jpg"
name="img4" alt="Birds" border="0"
width="165" height="59"></a><br>
<img src="images/square.jpg" name="picture"
alt="Choose a link to see a picture here."
width="150" height="250">
Finishing the project
Click Set Initial Page in the left frame and choose navigate.htm. Then, click OK. Click Set Initial Page in the right frame and choose main.htm. Click OK again. Now, drag the frame boundary to the right a little to make room for the buttons. Save the frames page as default.htm.
Your project is now ready for testing. Click the Preview In Browser button to open it in Internet Explorer. Move the mouse over a button, and the corresponding picture will appear below the navigation bar. When you click a button, two things will happen: the button will acquire a halo, and the appropriate content page will appear in the right frame.
How the project works
The code behind this project is quite simple. Besides the declaration statements, which simply preload most of the images, the code in Listing A includes three functions. The first, clicker, turns on the halo effect (that is, swaps in the active image) for the button you clicked. It also turns off the halo effect for the other buttons. (If we didn't do this, all the buttons would end up with halos.) The second function, hover, replaces square.jpg with the animal image that corresponds to whichever button you move the cursor over. The unhover function reverses that effect.
The three functions are called from the <a href> tag. In other words, whether you click on a link, move the mouse onto it, or move the mouse off of it, one of the functions will be called.
While we've used just four buttons, you can easily expand the project to use more. To do so, first change the total variable to reflect the total number of buttons. Then, add additional sets of declaration statements at the top of the JavaScript code. The numbering pattern is self-evident.
If you decide to use a different set of image files, notice that you must change the names both in the declaration section and in the <img> tags in the HTML document. Changing them in just one place will lead to unexpected results.
Conclusion
We've presented a relatively complicated system in this article, but it's well worth implementing in your Web sites. By making your buttons do triple duty, you can save screen space and decrease download times--while also enhancing your users' experience.
Copyright © 1999, Ziff-Davis Inc. All rights reserved. ZD Journals and the ZD Journals logo are trademarks of Ziff-Davis Inc. Reproduction in whole or in part in any form or medium without express written permission of Ziff-Davis is prohibited.
|