HomeDigital EditionSys-Con RadioSearch Java Cd
Advanced Java AWT Book Reviews/Excerpts Client Server Corba Editorials Embedded Java Enterprise Java IDE's Industry Watch Integration Interviews Java Applet Java & Databases Java & Web Services Java Fundamentals Java Native Interface Java Servlets Java Beans J2ME Libraries .NET Object Orientation Observations/IMHO Product Reviews Scalability & Performance Security Server Side Source Code Straight Talking Swing Threads Using Java with others Wireless XML
 

"Active Menus Without Graphics"
Volume: 3 Issue: 10, p. 43

	

Listing 1.
 
Change Link Color on Hover, MSIE 4 Only 

<A HREF="http://raven.ubalt.edu/features/poe/poecanat.htm">E. A. Poe 
Society of Baltimore</A> 
<LI><A HREF="http://www.poemuseum.org/">Poe Museum</A> 
</UL> 

Change Link Color on Hover 
<STYLE TYPE="text/css"> 
<!-- 
A { text-decoration: none; font-weight:bold; color:blue; 
font-family:Helvetica, Arial, sans-serif;} 
A:hover { background: #AAAA80; font-style: italic; } /* MSIE Only */ 
.whitelink { color: white } 
--> 

<BODY BGCOLOR="#8080FF"> 

Listing 2.
 
Change Link Color on Hover 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
do_the_layers = 0; 
if (document.layers) { // Netscape 4.0 and friends 
  if (navigator.userAgent != 'Mozilla/4.03 [en] (X11; U; SunOS 4.1.3_U1 
sun4c)') { // Exclude buggy version 
    do_the_layers = 1; 
  } 
} 
layer_number = 0; 

// Calling this function like this: 
//   hover_link("http://tale.com/","Stories"); 
// ...will create a new layer with a link like this: 
//   <A HREF="http://tale.com/">Stories</A> 
// ...but the link will turn gray when the user holds his mouse over it. 
// The var layer_number ensures a unique layer name (layer1, layer2...) 
// for each link. 

function hover_link(which_url,what_content){ 
  hover_link_style(which_url,what_content,""); 
} 

// Just like hover_link(), but this one applies <SPAN CLASS=whitelink> to 
ink 

function hover_link_white(which_url,what_content){ 
  hover_link_style(which_url,what_content,"whitelink"); 
} 

// Just like hover_link(), but this one applies the given STYLE to link 

function hover_link_style(which_url,what_content,which_style){ 
  if (do_the_layers) { // If Netscape 4, create an in-line //layer... 
    which_layer = 'layer' + layer_number; 
    layer_number++; 
    document.write('<ILAYER ID="' + which_layer + '">'); 

    q_layer = '\'' + which_layer + '\''; 
    document.write( 
      '<A HREF="' + which_url + '" ' + 
      'onMouseOver="make_bg_gray(' + q_layer + ')" ' + 
      'onMouseOut="make_bg_null(' + q_layer + ')" ' + 
      '>'); 
    if (which_style == "") { 
      document.write(what_content); 
    } else { 
      document.write('<SPAN CLASS='+which_style+'>' + 
        what_content + '</SPAN>'); 
    } 

    document.write('</A></ILAYER>'); 

  } else { // If not Netscape 4, just make a normal link 
    document.write('<A HREF="' + which_url + '">'); 

    if (which_style == "") { 
      document.write(what_content+'</A>'); 
    } else { 
      document.write('<SPAN CLASS='+which_style+'>' + what_content + 
        '</SPAN></A>'); 
    } 
  } 
} 

function make_bg_null (which_layer){ 
  if (do_the_layers) { 
    document.layers[which_layer].bgColor = null; 
  } 

} 

function make_bg_gray (which_layer){ 
  if (do_the_layers) { 
    document.layers[which_layer].bgColor = '#AAAAAA'; 
    // setTimeout because onMouseOut event doesn't always trigger 
    setTimeout(make_bg_null, 3000, which_layer); 
  } 
} 
//--> 
</SCRIPT> 

<TABLE BORDER=1><TR><TD> 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
  hover_link("http://www.nps.gov/edal/","National Historic Site"); 
//--> 
</SCRIPT> 
<NOSCRIPT> 
<A HREF="http://www.nps.gov/edal/">National Historic Site</A> 
</NOSCRIPT> 

 | 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
  hover_link("http://www-scf.usc.edu/~khachato/poeraven.html","The Raven"); 
//--> 
</SCRIPT> 
<NOSCRIPT> 
<A HREF="http://www-scf.usc.edu/~khachato/poeraven.html">The Raven</A> 
</NOSCRIPT> 

 | 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
  hover_link("http://www.poemuseum.org/","Museum"); 
//--> 
</SCRIPT> 
<NOSCRIPT> 
<A HREF="http://www.poemuseum.org/">Museum</A> 
</NOSCRIPT> 

</TD></TR></TABLE> 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
  hover_link_white("http://raven.ubalt.edu/features/poe/poecanat.htm","E. 
A. Poe Society of Baltimore"); 
//--> 
</SCRIPT> 
<NOSCRIPT> 
<A HREF="http://raven.ubalt.edu/features/poe/poecanat.htm">E. A. Poe 
Society of Baltimore</A> 
</NOSCRIPT> 

<BR> 
  
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
  hover_link_white("http://pariah.simplenet.com/Poe/poe2.html","The Comic 
Book"); 
//--> 
</SCRIPT> 
<NOSCRIPT> 
<A HREF="http://pariah.simplenet.com/Poe/poe2.html">The Comic Book</A> 
</NOSCRIPT> 

</BODY> 
  
Listing 3.
 
> 
<A HREF="http://pariah.simplenet.com/Poe/poe2.html">The Comic Book</A> 

We'll need a link like this: 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 

hover_link("http://pariah.simplenet.com/Poe/poe2.html","The Comic Book"); 
//--> 
</SCRIPT> 
<NOSCRIPT> 
<A HREF="http://pariah.simplenet.com/Poe/poe2.html">The Comic Book</A> 
</NOSCRIPT>  


 

All Rights Reserved
Copyright ©  2004 SYS-CON Media, Inc.
  E-mail: [email protected]

Java and Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States and other countries. SYS-CON Publications, Inc. is independent of Sun Microsystems, Inc.