|
|
Doing it with JavaScript |
|
  |
JavaScript is a scripting language that gives web designers the ability to add zip to their pages and make them interactive. One of the more commonly used JavaScript features is the mouseOver function that causes the browser to change some aspect of a web page when the mouse is rolled over a specified area in web page. When images are used in conjunction with anchor tags, mouseOver can be used to swap one image for another when the mouse is rolled over link. Roll the mouse over either of the links shown to the left and you'll see the color of the image appears to change. The browser is actually displaying a similar image that has a different color scheme.
To see a sample of some JavaScript that can be used for this kind of mouseOver, click here. |
|
The style sheet approach |
|
|
Happy Sad |
One of the drawbacks to using the JavaScript mouseOver function to accomplish the above effect is that it doubles the number of image files that must be downloaded by the browser for each link that's using the image swapping. This normally is not a major problem since the number of images to be loaded is small the the image files are usually small. However, if a user has the browser set so it does not display images, the effect will be lost entirely. In addition, the web page design gets a little more complex.
An alternative to consider is the use of a style sheet. Although style sheets have been around years, it has only been in the last couple of years that the folks who set standards for things like HTML have started promoting their use. Style sheets can be used to control just about all aspects of a web document's appearance. They can get very complex. Fortunately, it is very easy to create a short, simple style sheet that controls the appearance of a text-based link when the mouse is hovering over it. The following style sheet would be included in the head section of an HTML file.
<style type="text/css">
a.hover {color: white; background-color: navy;}
</style>
The a.hover entry indicates this style should be appled when the mouse pointer is over a link. Between the "{" and "}" characters are the attributes to be used. In this case the foreground color is set to white and the background color is navy blue. Setting the background color to transparent lets the web page's regular background color or image remain visible. The one drawback to using style sheets to accomplish this effect is that not all browsers support the a.hover style sheet entry. Microsoft Internet Explorer 5.0 and later handle it without a hitch, as does the latest version of Netscape's browser. Alas, Netscape Navigator does not. |
|
Another MouseOver Trick |
|
|
Another potentially helpful way to use the mouseOver function is to swap images in an area of the screen other than where the mouse pointer is positioned. Move your mouse pointer so it is over the link beneath the image shown below. The images will be swapped without clicking the mouse. This technique can be handy if you have several images you want display on a page, but you don't need to show them all at the same time.
To see a sample of some JavaScript that can be used for this kind of mouseOver, click here. |
|
