|
Departments 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 |
Rollovers Put your mouse cursor over the picture below: 
If you are running IE 4+ or NN 4+ and you don't have JavaScript turned off (which you won't, by default), what you've just seen is an example of a rollover. You probably have seen rollovers on other sites; rollovers have been popular for a few years now. Part of their appeal is that they can make the web page more interesting looking. They can also reinforce something about a particular item on the page. For example, if a menu item changes color or appearance when you put the mouse cursor over it, you can be certain that you've targeted that particular item.
When you have your browser running (Netscape's Navigator or Microsoft's Internet Explorer, for example), the browser keeps track of when you move the mouse. It also knows where the mouse cursor is and if you click one of the mouse buttons. In addition, when the browser put the web page up for you to look at, it made a note of where certain "things" were in the window. Links are one of kind of those "things". Images are another.
The person who developed a web page, besides typing in text and using images, also entered elements that you don't see. These elements are called tags. The browser reads the tags and uses them to format the page, decide what is a link, determine the font, size, and color of the text, as well as figure out what to do if you move or click the mouse. There are numerous tags and they all have additional sub-instructions associated with them, called attributes. Furthermore, browsers come with their own programming language called JavaScript. The web page developer can use this programming language in conjunction with tags and attributes to cause things to happen in the browser window. When a page gets loaded by the browser, if the page has JavaScript code, the browser will load the code too (under most circumstances) and execute the program as appropriate.
When I created the web page with the little image, I also included a short bit of JavaScript code that detects when the mouse is over the image, and if so, replaces the image with another image. The code also notices when you move the mouse cursor off the image and puts the original image back. A site that uses rollovers for its horizontal menu bar is Nasa Human Spaceflight. (This web page also uses another kind of menu called a flyout that requires some different JavaScript code. We'll talk about flyouts in a later column.) So, remember that your browser is watching you -- well, it's watching your mouse cursor. The browser knows when the cursor moves over certain elements on the web page. And, if the web page developer has set up some JavaScript code to do something when the mouse is over an element, the browser will execute the code, and voila! In this case, you get a different image on the screen. PS. For those of you who know HTML: the JavaScript calls to do the rollover have to be placed on an A HREF tag (in Netscape's Navigator). Consequently, the image is contained inside of a link. I don't want the link to go anywhere, so I cancel it by setting the HREF=javascript:void(0). View the source of this page and you will see what I mean.
|
|