in black and white
Main menu
Share a book About us Home
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 .. 67 68 69 70 71 72 < 73 > 74 75 76 77 78 79 .. 118 >> Next

1. The appropriate event, which is mouseOver
2. The name of the tooltip to display: tooltipl, tooltip2, tooltip3, or tooltip4. (The tooltip names and content are defined by using the <SPAN> and </SPAN> tags, as shown in Listing 11-4.)
Then, when a user mouses away from the active area, the JavaScript interpreter calls the hide() function, sending the name of the tooltip to hide.
Chapter 11: Creating Pop-Up Help (Tooltips) 209
Putting it all together: Using DHTML code to create simple tooltips
Sometimes you find it useful to experiment with a working script containing all the necessary elements for DHTML tooltips: HTML code that defines the active areas for which you want to create tooltips, style sheet code that defines how you want your tooltips to appear, and JavaScript code that tells the Web browser to display (or hide) the appropriate tooltips depending on mouse pointer position.
In Listing 11-5, a complete, working script is exactly what you find. Listing 11-5 pulls together the code you see in Listings 11-1 through 11-4 to demonstrate how each piece fits together.
You can find the code in Listing 11-5 on the companion CD under the filename
Listing 11-5: The Whole Enchilada: A Working Tooltip Script
<TITLE>Tooltip Example from JavaScript For Dummies, 4th Edition</TITLE> <SCRIPT type=”text/javascript” language=”Javascript”>
<!-- Hide script from older browsers
if (document.getElementById) { latestBrowser = true
else {
latestBrowser = false
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)
else {
if (latestBrowser) { = parseInt(theEvent.pageY)+2 + ”px
210 Part III: Making Your Site Easy for Visitors to Navigate and Use
Listing 11-5 (continued)
tooltip.left = Math.max(2,parseInt(theEvent.pageX)-75) + "px” i
1 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 i
else { tooltip = eval("document.” + currentElement) 1
1 tooltip.visibility = "hidden” 1
// End hiding script -->
<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: hidden1 -- >
<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” COORDS=”180,81,200,320” HREF=”#” onMouseOut=”hideTip('tooltip2')” onMouseOver=”displayTip(event,'tooltip2')” alt=”Mary” />
<AREA SHAPE=”rect” COORDS=”59,26,208,64” HREF=”#” onMouseOut=”hideTip('tooltip3')” onMouseOver=”displayTip(event,'tooltip3')” alt=”bougainvillea” />
Chapter 11: Creating Pop-Up Help (Tooltips) 211
<AREA SHAPE="rect" COORDS=”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>
<DIV align="center">
<IMG SRC="cousins.jpg" USEMAP="#PicMap" HEIGHT="289" WIDTH="289" BORDER="0" alt="Two cousins" />
Taking Advantage of Third-Party Tooltips Scripts
Creating DHTML tooltips from scratch, as you see from Listing 11-5, takes not just JavaScript expertise but expertise in HTML and CSS programming, too. If your heart is set on adding custom tooltips to your site but you don’t want to invest the time and trouble in finding out everything you need to know to code them by hand, you’re in luck: Third-party scripts are available, and they take most of the hard work out of creating custom tooltips.
Lots of shareware tooltips scripts are available for download over the Web. If you’re interested, you might want to start your search for the perfect tooltips tool by checking out the following two sites:
With Walter Zorn’s DHTML Tooltips you can create cross-platform, crossbrowser tooltips containing images as well as text. More information about this cool shareware tool is available at tooltip/tooltip_e.htm.
Dan Allen’s DOM Tooltip is a shareware tool you can use to create tooltips that work not just in Internet Explorer and Navigator but also in other browsers, such as Opera. You can find download instructions and tons of examples at
Previous << 1 .. 67 68 69 70 71 72 < 73 > 74 75 76 77 78 79 .. 118 >> Next