If you are new to HTML, a rollover probably sounds like a pet trick. But, in actuality, a rollover is perhaps the most common use of DHTML on the Web. A rollover brings your Web page to life when a mouse hovers over an image or text.
Consider the two-states of the image rollover shown in Figures:
Figure : A very simple button.
Figure : A very simple button with the cursor over it.
he images subdirectory holds two separate image files with identical dimensions:
Add the following attributes to use homeButton:Next, add these attributes to use aboutMeButton:
With this image rollover script, note the following behavior:
Recent versions of Microsoft Internet Explorer (5.x and 6.x) contain a bug that can make preloading ineffective. Under certain circumstances, the browser will ignore images already downloaded into your local cache and instead request the image all over again each time a visitor moves the mouse over the rollover image. If you encounter this problem, consider a text rollover instead, which is discussed in the “Text rollovers with CSS” section later in this chapter.
Text rollovers with CSS
One of the following figures shows a plain-Jane Web page with two rollover text links: Home and About Me. Moving the cursor over one of the images, as shown in Figure , causes the rolled-over version of the text to display. Listing displays the HTML and CSS required for this rollover effect.
The page can still display whether you’ve visited the linked page or not. One of the following figures shows how the page appears after you’ve been to this site’s home page. And although that image is grayed out, it’s still a link, so rolling over it still gives the same effect as in One of the following figures.
Figure : A page with text rollovers handled with CSS.
Figure : Moving the cursor over the link text changes the text and background colors.
Listing : A Text Rollover with CSS<<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
In this example, we’ve made the text change from black on white to white on black when the cursor hovers over the link so that it’s easy for you to see what’s going on in the black-and-white figures. You likely want your site to use a more colorful approach.
Adding this type of navigation to your site couldn’t be simpler:
1. Within the <head> tags, add the preceding code inside and including the <style> and </style> tags.
2. Add links inside individual <h4> tags.
3. Make sure that the entire menu is inside a <div> tag with an id attribute of navbar.
HTML 4 Related Interview Questions
|XML Interview Questions||HTML 4 Interview Questions|
|HTML Interview Questions||HTML 5 Interview Questions|
|HTML DOM Interview Questions||Java Interview Questions|
|CSS Interview Questions||Java Abstraction Interview Questions|
|Dynamic HTML Interview Questions||XHTML Interview Questions|
Html 4 Tutorial
The Least You Need To Know About Html And The Web
Creating And Viewing A Web Page
Proper Planning Prevents Poor Page Performance
Creating (x)html Document Structure
Text And Lists
Linking To Online Resources
Finding And Using Images
Introducing Cascading Style Sheets
Using Cascading Style Sheets
Getting Creative With Colors And Fonts
Using Tables For Stunning Pages
Scripting Web Pages
Working With Forms
Fun With Client-side Scripts
The About Me Page
The Ebay Auction Page
A Company Site
A Product Catalog
Ten Cool Html Tools
Ten Html Do’s And Don’ts
Ten Ways To Exterminate Web Bugs
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.