Defining an HTML Map and Designating Active Areas in Java

Encode Quick Response Code in Java Defining an HTML Map and Designating Active Areas

// From <MAP> to </MAP> defines an HTML and active areas <MAP NAME= PicMap ID= PicMap > <AREA SHAPE= rect COORDS= 112,91,136,315 HREF= # ALT= Sarah /> <AREA SHAPE= rect COORDS= 180,81,200,320 HREF= # ALT= Mary />

11: Creating Pop-Up Help (Tooltips)

<AREA SHAPE= rect COORDS= 59,26,208,64 HREF= # ALT= bougainvillea /> <AREA SHAPE= rect COORDS= 226,25,303,82 HREF= # ALT= needs paint /> </MAP> // Overlaying a map on top of an image <IMG SRC= cousinsjpg USEMAP= #PicMap HEIGHT= 289 WIDTH= 289 BORDER= 0 ALT= Two cousins />

You can use a graphics program such as Paint, which comes installed with Windows, to get the upper-left and lower-right x,y coordinates for each active area The code in Listing 11-1 defines a map named PicMap and four separate rectangular areas Then, near the bottom of Listing 11-1, you see the HTML <IMG> tag, which places an image on the page and overlays that image with the PicMap map After you define your active areas, you re ready to define a style for the tooltip, which I demonstrate in the following section

You define a style for a Web page object by using the HTML <STYLE> and </STYLE> tags Defining a style for your tooltips accomplishes two important tasks: It allows you to specify how you want your tooltips to appear: bolded, large font, and so on It allows you to create a named, JavaScript-accessible tooltip object that you can make visible and invisible In Listing 11-2, you see an example of the <STYLE> and </STYLE> tags in action Because cascading style sheets are so powerful and flexible, they re also relatively complex You might want to check out a book, such as Designing CSS Web Pages, by Christopher Schmitt (New Riders) Alternatively, you could pick up a good HTML book many devote a chapter or two to the <STYLE> and </STYLE> tags and cascading style sheet syntax

<STYLE type= text/css > <!-tooltipStyle {background-color: pink; border: pink 1px solid; layerbackground-color: pink; width: 100px; font: 20px arial, helvetica, sans-serif; padding: 5px; position: absolute; visibility: hidden} --> </STYLE>

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

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:

function displayTip(theEvent,currentElement) { if (latestBrowser) { tooltip = documentgetElementById(currentElement)style } else { tooltip = eval( document + currentElement) } if (documentall) { tooltippixelTop = parseInt(theEventy)+2 tooltippixelLeft = Mathmax(2,parseInt(theEventx)75) }

11: Creating Pop-Up Help (Tooltips)

else { if (latestBrowser) { tooltiptop = parseInt(theEventpageY)+2 + px tooltipleft = Mathmax(2,parseInt(theEventpageX)-75) + px } else { tooltiptop = parseInt(theEventpageY)+2 tooltipleft = Mathmax(2,parseInt(theEventpageX)-75) } } tooltipvisibility = visible } function hideTip(currentElement) { if (latestBrowser) { tooltip = documentgetElementById(currentElement)style } else { tooltip = eval( document + currentElement) } tooltipvisibility = 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