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
Now for some specifics related to this example. In this example, the HTML for the logo image is placed inside of a link tag. The link tag includes a "special instruction" that tells the browser to do something when the cursor rolls over the image-link combination.
(Aside: in IE's browser we would not need the link tag. But Netscape at version 4 does not recognize the "special instruction" on an image tag.)
The "special instruction" is the onMouseOver attribute of the A tag:
<A href=""javascript:void()" onMouseOver="div_over(1,1)" >
The onMouseOver attribute identifies the JavaScript program to run when the mouse cursor goes over the link-image combination. The program div_over will write the text that you see pop up.
The text itself is contained in another HTML element, an absolutely positioned DIV (or division) of the web page. DIVs can have various properties, including whether they are visible or not. We initially make the DIV hidden so it doesn't show up on the page. Then, when the cursor goes over the image-link combination, the JavaScript is executed which causes text to be written into the DIV and the DIV made visible. Voila! The text appears on the screen.
Once the text is written, we need a way to get rid of it. Inside the popup text is another link with a "special instruction". This time the "special instruction" is onClick. When you click the link, the browser executes the JavaScript associated with that onClick. In this example, the code causes the text that was written to become hidden; therefore, you can't see it any more and the popup goes away.
So, to put it all together. The browser knows where the link tags (both the image-link combination and the link inside the popup) are with the special instructions. The browser recognizes in the first case when you put your mouse over the image-link combination and in the second case when you click on the link. Because these links have JavaScript associated with them, the browser executes the appropriate JavaScript code. The first code causes the text popup to be written and made visible so you can see it. The second code causes the text to become hidden so you don't see it any more.
A programmer can cause many different effects using the onMouseOver and onClick attributes of links based upon the JavaScript that she associates with them. Many of the pages that you visit with cool effects are caused by JavaScript code.
For a related example, check out the Rollovers writeup.
Want to bookmark this site? Press
Control-D. (Hold down the control key and the letter D at the same time.)