JavaScript Examples Bible - UserWorks Technologies

332
MAP.areas
JavaScript Examples Bible: The Essential Companion to JavaScript Bible
image displayed in that IMG element, scripts change the useMap property of the
IMG element object to point to a second MAP that has specifications more suited to
the desk lamp in the second image. Roll the mouse pointer atop the images, and
view the URLs associated with each area in the statusbar (for this example, the
URLs do not lead to other pages).
Another button on the page, however, invokes the makeAreas() function (not
working in IE5/Mac), which creates four new AREA element objects and (through
DOM-specific pathways) adds those new area specifications to the image. If you roll
the mouse atop the image after the function executes, you can see that the URLs
now reflect those of the new areas. Also note the addition of a fourth area, whose
status bar message appears in Figure 6-2.
Listing 22-7: Modifying AREA Elements on the Fly
MAP Element Object
// generate area elements on the fly
function makeAreas() {
document.myIMG.src = “desk3.gif”
// build area element objects
var area1 = document.createElement(“AREA”)
area1.href = “Script-Made-Shade.html”
area1.shape = “polygon”
area1.coords = “52,28,108,35,119,29,119,8,63,0,52,28”
var area2 = document.createElement(“AREA”)
area2.href = “Script-Made-Base.html”
area2.shape = “rect”
area2.coords = “75,65,117,87”
var area3 = document.createElement(“AREA”)
area3.href = “Script-Made-Chain.html”
area3.shape = “polygon”
area3.coords = “68,51,73,51,69,32,68,51”
var area4 = document.createElement(“AREA”)
area4.href = “Script-Made-Emptyness.html”
area4.shape = “rect”
area4.coords = “0,0,50,120”
// stuff new elements into MAP child nodes
if (document.all) {
// works for IE4+
document.all.lampMap.areas.length = 0
document.all.lampMap.areas[0] = area1
document.all.lampMap.areas[1] = area2
document.all.lampMap.areas[2] = area3
document.all.lampMap.areas[3] = area4