Info
Home Page Articles Software GoodiesExplanations
How do they do that? The Web in FocusResources
Web Site Stuff Tech Books E-Books Tech Toys Web Hosting LinksWomen
Opinion Tech Women Women's StudiesTech News
Computer Security Databases Java Linux MP3 PC Software Robotics Site Owner Tech Latest Web Development XMLSpread the Word
Newsletter
Recommend this Page
Site Info
Legal Disclaimer
Privacy
Contact
Lighter Side
Crazy for Life crazy for romance Crazy for Kitties Crazy for Dogs Crazy for CowsCopyright 2000-2001, hertechnology.com
Popup Text
Putting it together
The first step is to put the mouse detection event(s) on the the image. In this example, the box stays visible even after the mouse rolls off the logo image, so we're only using onMouseOver. Because NN needs an A HREF tag for the event to be recognized, we have to make the logo image a link. But I don't want the link to go anywhere if the user clicks it. You can prevent the link from going anywhere by calling a little JavaScript function and returning a 0 or null. javascript:void() will do that. Here's the link:
<a href="javascript:void()" onMouseOver="div_over(1,1)" >
<img border=0 src="/graphics/logo.jpg"></a>
1) Set the A HREF= to a javascript:void() call so that the link won't do anything. 2) Set the onMouseOver= to the name of a JavaScript function that will do whatever you want when the onMouseOver occurs. In this case, I called the function div_over.
The second step is to define the DIV that will contain the text. Here is what I originally set up at the end of the page, just before the </body> tag:
<DIV id='div1' style='position:absolute; visibility:hidden; top:25px; left:150px; z-index:2; width:400; height:180; float:left;' onClick="div_over(1,0)">
<TABLE cellpadding=5 bgcolor=#CCFFFF>
<TR>
<TD>Her Technology?...[rest of text]
<A HREF="javascript:void()" onclick="div_over(1,0)">Close</a>
</TD>
</TR>
</TABLE>
</div>
Remember that NN doesn't recognize onClick on the DIV statement itself, so I had to add an A HREF link in the text in the box. I left the onClick on the DIV statement anyway, so IE users can still click anywhere in the text box and it will hide the text.
Make this DIV position: absolute so we can write to it. You may have a user with a NN that has a problem writing to a relatively positioned object.
I said a moment ago that this was what I originally set up. With the div_over function that I'll discuss in a minute, this DIV arrangement worked fine. I rolled the cursor over the logo image and the text box was made visible. I clicked (either on the word Close or in the box, depending) and the box was hidden. But, if I resized the window while running NN and made the window skinnier, the box appeared at the end of the page and there was nothing I could do to get rid of it after that.
Want to bookmark this site? Press
Control-D. (Hold down the control key and the letter D at the same time.)