Inside Microsoft Web Bulder

May 1999

Navigating Your Site, Part 1--Making Your Links Interactive

In this series of articles, we'll show you some tricks you can use to display links that are easy for your users to find and follow, and look good on your page, too. In this first part, we'll show you some ways to make your Web site a little more interactive. In the second part, we'll talk about organizing your links into menu bars, expanding menus, etc. For our example, we'll set up a cookbook site that provides links to recipes for a variety of different dishes within several categories and subcategories. The basic links our site has to offer are shown in Figure A, arranged as they're often seen on a Web page.

Figure A: Our example site offers links to recipes in a variety of different categories.
[ Figure A ]

Listing A contains the code for this simple presentation.

Listing A: Code for basic structure of our links 


<HTML>
<HEAD>
<TITLE>Our basic link example</TITLE>
<STYLE>
P {font-size: 14; font-family:Arial;
font-weight:bold}
</STYLE>
</HEAD>
<BODY>
<P> Appetizers<BR> 
<DIV style = "margin-left: 30" >
<A href = 'newpage.htm'> Cold hor d'oeuvres,</A>
<A href = 'newpage.htm'>Hot hors d'oeuvres,</A> 
<A href = 'newpage.htm'>Soups,</a></td> </A> 
<A href = 'newpage.htm'>Snacks</a></td> </A></DIV>

<P> Salads <BR> 
<DIV style = "margin-left: 30">
<A href = 'newpage.htm'>Antipasto, </A>
<A href = 'newpage.htm'>Tossed salads,</A> 
<A href = 'newpage.htm'> Rice and Potato salads,</A>
<A href = 'newpage.htm'>Fruit salads </A></DIV>	

<P>Entrees <BR> 
<DIV style = "margin-left: 30">
<A href = 'newpage.htm'>Poultry,</A>
<A href = 'newpage.htm'>Bee,f</A>
<A href = 'newpage.htm'>Pork and Lamb,</A> 
<A href ='newpage.htm'>Vegetarian main dishes</A></DIV>

<P>Desserts <BR> 
<DIV style = "margin-left: 30">
<A href = 'newpage.htm'>Pies and Cakes,</A>
<A href = 'newpage.htm'>Cookies and Bars,</A>
<A href = 'newpage.htm'>Fruit desserts</A></DIV>
</BODY>
</HTML>
Rollover effects

You'll often see sites that provide users with some indication that their mouse is over a link. This is called a rollover effect, and can take a variety of forms.

Simple text rollovers

The most common rollover effect is when the text of the link changes color when the mouse is over it. This is illustrated in Figure B.

Figure B: Create a simple text rollover using an anchor's hover state.
[ Figure B ]

When the mouse is over a link, (that is, the link is active) the color of the link turns a different color (in this case, red).

To create the rollover effect shown in Figure B, just add an anchor style, shown in Listing B, to the code we presented in Listing A. Here we've specified that when the mouse is hovering over a link, the color of the link should change to red.

Listing B: A simple text rollover code 


<STYLE>
a:hover {color:red}
</STYLE>

Image rollovers

Another nifty rollover effect that can give users feedback is to change an image associated with a link instead of the link's text. Figure C shows how this might look, with the left side showing the look of the initial page and the right side showing how the page would look with the user's mouse over the link.

Figure C: Simple image rollovers can add some interactive interest to your pages.
[ Figure C ]

Listing C contains the simple code we need for this effect. When the page loads, the script creates two Image objects and assigns an image to each of them; one for when the link is active (that is, the mouse is over it) and one for when the link isn't active.

Listing C: Code for an image rollover 


<HTML>

<HEAD>
<TITLE>A Simple image rollover</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
activeImg = new Image()
inactiveImg = new Image()
activeImg.src = "Smiley.gif"
inactiveImg.src = "Pr_ball.gif"

function activeLink(newimg) {
	newimg.src = activeImg.src
}

function inactiveLink(newimg) {
	newimg.src = inactiveImg.src
}
</SCRIPT>

<BODY>
<TABLE>
<TR> <TD> <IMG src = "Pr_ball.gif" id = "appetizers" >
<A href = 	'newpage.htm' onmouseover = 
activeLink(appetizers) onmouseout = 
inactiveLink(appetizers)> 
Appetizers</A><BR></TD> </TR> 
<TR> <TD> <IMG src = "Pr_ball.gif" id = "salads"> 
<A href = 'newpage.htm' onmouseover = 
activeLink(salads) onmouseout = 
inactiveLink(salads)>
Salads </A><BR></TD> </TR>
<TR> <TD> <IMG src = "Pr_ball.gif" id = "entrees" >
<A href = 'newpage.htm' onmouseover = 
activeLink(entrees) onmouseout = 
inactiveLink(entrees)>Entrees </A><BR></TD> </TR> 
<TR> <TD> <IMG src = "Pr_ball.gif" id = "desserts" >
<A href = 'newpage.htm'  onmouseover = 
activeLink(desserts) onmouseout = inactiveLink(desserts)>
Desserts</A><BR></TD></TR> 
</TABLE>
</BODY>
</HTML>
In the BODY code, the anchor tags trap both an onmouseover event, which calls the activeLink function, and an onmouseout event, which calls the inactiveLink function. Both functions receive as arguments the object that trapped the mouse event.

The two functions perform similar tasks, as well. They both assign a new image to the src property of the IMG element that they are passed. activeLink assigns the smiley face image when the mouse is over a link, and inactiveLink assigns a purple-colored ball when the mouse moves away.

Links in tooltips

Another form that user feedback can take is to provide tooltips that tell users what additional links are related to the link they are over. A tooltip example is illustrated in Figure D.

Figure D: Add tooltips to your links to give your users some extra information.
[ Figure D ]
[ Figure D ]

Figure D.1 shows the links in their original state; D.2 shows a tooltip containing additional links that's displayed when the user passes over one of the original links. Listing D contains the code we need. This time, we've placed our links in a table, which often makes it easy to position them on the page.

Listing D: Code for a simple tooltip example 


<HTML>
<HEAD>
<TITLE>A Simple tooltip link example</TITLE>
<STYLE>
.tips {position:absolute;height:40;width:150;top:40;
font-size:7;visibility:hidden;
background-color:"#33ccff"}
TABLE {frame:void}
</STYLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
function show(mylink) {
	mylink.style.visibility = "visible"
}

function hide(mylink) {
	mylink.style.visibility = "hidden"
}

</SCRIPT>
<BODY>
<TABLE  style = "width:600">
<TR> <TD  style = "width:120"><A href = "newpage.htm" 
onmouseover=show(appetizers)>Appetizers</A></TD>
<TD  style = "width:120"><A href = "newpage.htm" 
onmouseover=show(salads)>Salads</A></TD>
<TD  style = "width:120"><A href = "newpage.htm" 
onmouseover=show(entrees)>Entrees</A></TD>
<TD  style = "width:120"><A href = "newpage.htm" 
onmouseover=show(desserts)>Desserts</A></TD>
</TR>
</TABLE>

<DIV id = "appetizers" class = tips style= "left:12">
<TABLE onmouseover = show(appetizers) onmouseout = 
hide(appetizers) >
<TR><TD><A href="newpage.htm">Cold Hor d'ouvres</TD>
</TR>
<TR><TD><A href="newpage.htm">Hot hors d'ouvres</TD> </TR>
<TR><TD><A href="newpage.htm">Soups</TD> </TR>
<TR><TD><A href="newpage.htm">Snacks</TD> </TR>
</TABLE></DIV>	

<DIV id = "salads" class = tips style= "left:160">
<TABLE onmouseover = show(salads) onmouseout = 
hide(salads)>
<TR><TD> <A href="newpage.htm">Antipasto </TD></TR>
<TR><TD ><A href="newpage.htm">Tossed salads</TD></TR>
<TR><TD ><A href="newpage.htm">Rice and Potato
salads</TD></TR>
<TR><TD ><A href="newpage.htm">Fruit salads</TD></TR>
</TABLE></DIV>	

<DIV id = "entrees" class = tips style= "left:310">
<TABLE onmouseover = show(entrees) onmouseout = 
hide(entrees)>
<TR><TD> <A href="newpage.htm">Poultry</TD></TR>
<TR><TD><A href="newpage.htm">Beef</TD></TR>
<TR><TD><A href="newpage.htm">Pork and Lamb</TD></TR>
<TR><TD><A href="newpage.htm">Vegetarian main 
dishes</TD></TR>
</TABLE></DIV>

<DIV id = "desserts"  class = tips style= "left:460">
<TABLE onmouseover = show(desserts) onmouseout = 
hide(desserts)>
<TR><TD><A href="newpage.htm">Pies and Cakes</TD></TR>
<TR><TD><A href="newpage.htm">Cookies and Bars</TD></TR>
<TR><TD><A href="newpage.htm"><Fruit desserts</TD></TR>
</TABLE></DIV>
</BODY>
</HTML>
In our style sheet, we've set the visibility attribute of all of the tooltip tables to hidden. Notice, also, that we've used the CSS1 positioning attributes to place the tips in the correct place on the page.

Each of the recipe categories trap the onmouseover event, which calls the show function when the user's mouse is over the link. The show function makes the appropriate tip table appear by setting its visibility attribute to visible. The tip tables also use onmouseover to call show so that the additional links continue to be displayed. They also use the onmouseout event to call the hide function to make the tips disappear when the user moves away, since hide sets the visibility of the appropriate table to hidden.

The help cursor

One other feature that you might find handy is the cursor style attribute, which can be changed when a user moves his mouse over a link. In particular, the help cursor that a particular link contains Help information. Figure E shows the help cursor at work, and Listing E shows the functions we need to add to Listing D to create this effect.

Figure E: Use the cursor attribute to change the look of the cursor over a link.
[ Figure E ]

The showhelp function changes the cursor to the Help symbol when the mouse is over the object that it's passed as a parameter. The hidehelp function sets the cursor back to its original state by setting its value to auto. The auto value is the shape that the browser would normally assign to the cursor, given the current context.

Listing E: Script to change the cursor attribute 


function showhelp(mylink) {
	mylink.style.cursor = "help"
}

function hidehelp(mylink) {
	mylink.style.cursor = "auto"
}
Once you've added the script in Listing E to the page, just add your Help link to the list of links: 

<TD  style = "width:120" ><A href = 
	"newpage.htm" onmouseover=showhelp(about) 
	id = "about" onmouseout = hidehelp(about)>
	About our site</A></TD>
However, since we used absolute positioning to position our tooltips on the page, adding this link will mean we'll need to reposition our original tooltips a bit.


Copyright © 1999, ZD Inc. All rights reserved. ZD Journals and the ZD Journals logo are trademarks of ZD Inc. Reproduction in whole or in part in any form or medium without express written permission of ZD Inc. is prohibited. All other product names and logos are trademarks or registered trademarks of their respective owners.