in black and white
Main menu
Home About us Share a book
Biology Business Chemistry Computers Culture Economics Fiction Games Guide History Management Mathematical Medicine Mental Fitnes Physics Psychology Scince Sport Technics

Javascript for dummies 4th edition - Veer E.V

Veer E.V Javascript for dummies 4th edition - Wiley publishing , 2004. - 387 p.
ISBN: 0-7645-7659-3
Download (direct link): javascriptfordummies2005.pdf
Previous << 1 .. 66 67 68 69 70 71 < 72 > 73 74 75 76 77 78 .. 118 >> Next

Listing 11-2: Using the <STYLE> and </STYLE> Tags to Define a Tooltip Style
<STYLE type=”text/css”>
.tooltipStyle {background-color: pink; border: pink 1px solid; layer-
background-color: pink; width: 100px; font: 20px arial, helvetica, sans-serif; padding: 5px; position: absolute; visibility: hidden}
-- >
The code you see in Listing 11-2 defines a tooltip style called, appropriately enough, tooltipStyle. The code specifies that tooltip text should appear as a relatively large 20 pixels on a nice bright-pink background.
Creating custom JavaScript functions to display and hide tooltips
You use JavaScript to access the correct tooltip and then to display that tooltip (as a user’s mouse pointer moves into the active area) or hide it (if a user’s mouse pointer moves away from the active area).
In Listing 11-3, you see two JavaScript functions defined: displayTip() and hideTip(). Take a peek at the code, and then see the human-readable description that follows.
Listing 11-3: The displayTip() and hideTip() Functions
function displayTip(theEvent,currentElement) {
if (latestBrowser) {
tooltip = document.getElementById(currentElement).style }
else {
tooltip = eval("document.” + currentElement)
if (document.all) {
tooltip.pixelTop = parseInt(theEvent.y)+2 tooltip.pixelLeft = Math.max(2,parseInt(theEvent.x)-75)
Chapter 11: Creating Pop-Up Help (Tooltips) 207
else {
if (latestBrowser) { = parseInt(theEvent.pageY)+2 + "px” tooltip.left = Math.max(2,parseInt(theEvent.pageX)-75) + "px”
else { = parseInt(theEvent.pageY)+2 tooltip.left = Math.max(2,parseInt(theEvent.pageX)-75)
tooltip.visibility = "visible”
function hideTip(currentElement) {
if (latestBrowser) {
tooltip = document.getElementById(currentElement).style
else {
tooltip = eval("document.” + currentElement)
tooltip.visibility = "hidden”
The displayTip() function accepts two parameters: theEvent (the value of which at runtime is either the mouseOver or mouseOut object) and currentElement (the value of which at runtime is the name of the tooltip to manipulate).
The first if-else statement in displayTip() obtains the tooltip style object. The second if-else statement sets the x,y coordinates for the tooltip. Finally, the third if-else statement turns the visibility of the tooltip on.
The hideTip() function is much shorter than the displayTip() function. The hideTip() function simply obtains the tooltip to manipulate and then hides it.
The displayTip() and hideTip() functions don’t execute unless they’re attached to event handlers. Fortunately, the following section demonstrates how to do just that.
Calling custom functions in response to the onMouseOver and onMouseOut events
For tooltips to be effective, they must appear when a user mouses over something on a page and disappear when the mouse pointer moves away. Fortunately, accomplishing this feat is easy with JavaScript, as the code in Listing 11-4 shows.
208 Part III: Making Your Site Easy for Visitors to Navigate and Use
Listing 11-4: Attaching the displayTip() and hideTip() Calls to Mouse Events
<MAP name=”PicMap” id=”PicMap”>
<AREA SHAPE=”rect” COORDS=”112,91,136,315” HREF=”#” onMouseOut=”hideTip('tooltip1')”
onMouseOver=”displayTip(event,'tooltip1')” ALT=”Sarah” />
<AREA SHAPE=”rect” C00RDS=”180,81,200,320” HREF=”#” onMouseOut=”hideTip('tooltip2')”
onMouseOver=”displayTip(event,'tooltip2')” ALT=”Mary” />
<AREA SHAPE=”rect” C00RDS=”59,26,208,64” HREF=”#” onMouseOut=”hideTip('tooltip3')”
onMouseOver=”displayTip(event,'tooltip3')” ALT=”bougainvillea” /> <AREA SHAPE=”rect” C00RDS=”226,25,303,82” HREF=”#” onMouseOut=”hideTip('tooltip4')”
onMouseOver=”displayTip(event,'tooltip4')” ALT=”needs paint” />
<SPAN CLASS=”tooltipStyle” ID=”tooltip1”>Left cousin</SPAN>
<SPAN CLASS=”tooltipStyle” ID=”tooltip2”>Right cousin</SPAN>
<SPAN CLASS=”tooltipStyle” ID=”tooltip3”>Tree</SPAN>
<SPAN CLASS=”tooltipStyle” ID=”tooltip4”>Shutters</SPAN>
Much of the code in Listing 11-4 also appears in Listing 11-1 earlier in this chapter. The new parts of the code added here are the onMouse0ut and onMouse0ver definitions. (See the bold portions of the code.)
As you can see from Listing 11-4, the JavaScript function displayTip() is attached to the onMouse0ver event handlers for the each of the active areas, and the JavaScript function hideTip() is attached to the onMouse0ut event handlers for those same active areas. (To check out the JavaScript code for the displayTip() and hideTip() functions, flip to Listing 11-3. )
If you’re interested in finding out more about events and event handlers, including onMouse0ut and onMouse0ver, flip to Chapter 13, which is devoted to these topics.
What all this means is that at runtime, when a user mouses over one of the active areas (active areas are defined using the <AREA> tag) the JavaScript interpreter calls the displayTip() function, sending the following two parameters:
Previous << 1 .. 66 67 68 69 70 71 < 72 > 73 74 75 76 77 78 .. 118 >> Next