Mouse Over (Java Script)



  • Purpose: To show text when the mouse hovers over a link.


  • Instructions: Study the Script/HTML Code Below. Copy and Paste it to your Web Page, and edit to your preference.

SPECIAL NOTE: Unlike with most Java Scripts, do not place the Java Script portion of this HTML Code in the <HEAD>,</HEAD> portion of the Web Page. Keep it in the spot it is presently in.


Page 1
Page 2
Page 3
Page 4

Page 1 Text
Page 2 Text
Page 3 Text
Page 4 Text


To Display Text when a mouse is placed over text, Type:

<STYLE>.desc
{text-align: left;
font-family: times;
font-size: 20px;
color: #FF0000;
position: absolute;
center: 250px;
left: 20px;
width: 1000px;
visibility: hidden;
z-index: 0;}
BODY {background: #FFFFFF;}
A {text: bold;
text-decoration:none;
color: #0000FF;}
A:HOVER {color: #FF0000; background-color: #FFFF00;}
</STYLE>

<SCRIPT LANGUAGE = "JavaScript"> /* Show an object */ function showObject(object) { object.visibility = VISIBLE; } /* Hide an object */ function hideObject(object) { object.visibility = HIDDEN; } </SCRIPT>

<H2 ALIGN="LEFT">
<A HREF = "http://your-web-page.html" onMouseOver = "showObject(desc1)" onMouseOut = "hideObject(desc1)"><FONT SIZE=3>Page 1</FONT></A>
<BR>
<A HREF = "http://your-web-page.html" onMouseOver = "showObject(desc2)" onMouseOut = "hideObject(desc2)"><FONT SIZE=3>Page 2</FONT></A>
<BR>
<A HREF = "http://your-web-page.html" onMouseOver = "showObject(desc3)" onMouseOut = "hideObject(desc3)"><FONT SIZE=3>Page 3</FONT></A>
<BR>
<A HREF = "http://your-web-page.html" onMouseOver = "showObject(desc4)" onMouseOut = "hideObject(desc4)"><FONT SIZE=3>Page 4</FONT></A>
<BR>
</H2>
<DIV ID = "desc1" CLASS = "desc"><FONT SIZE=4><B>Page 1 Text</B></FONT></DIV>
<DIV ID = "desc2" CLASS = "desc"><FONT SIZE=4><B>Page 2 Text</B></FONT></DIV>
<DIV ID = "desc3" CLASS = "desc"><FONT SIZE=4><B>Page 3 Text</B></FONT></DIV>
<DIV ID = "desc4" CLASS = "desc"><FONT SIZE=4><B>Page 4 Text</B></FONT></DIV>

<SCRIPT LANGUAGE = "JavaScript"> /* Simple version detection */ var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4); /* They can be used in place of hidden and visible because on occasion Navigator has problems with the two */ var HIDDEN = (isNS) ? 'hide' : 'hidden'; var VISIBLE = (isNS) ? 'show' : 'visible'; /* Create shortcut variables for different absolutely positioned elements */
var desc1 = (isNS) ? document.desc1 : document.all.desc1.style;
var desc2 = (isNS) ? document.desc2 : document.all.desc2.style;
var desc3 = (isNS) ? document.desc3 : document.all.desc3.style;
var desc4 = (isNS) ? document.desc4 : document.all.desc4.style;
</SCRIPT>




| HTML Help Homepage | Help Topics |