TABLE 7.2 CLICKABLE AREAS IN THE JUKEBOX IMAGE.

Number	Type		URL		Coordinates
1	rect		Music / classics, html		101,113,165,134
2	Rect		Music /country. Html		101,139,165,159
3			Music / rockpop.html		101,163,165,183
4			Music /home.html		175,152,203,118 220,118,247,152 237,153,237,181 186,181,186,153
5	poly		Music /swing, html		259,113,323,134
6	rect		Music /jazz.html		259,139,323,159
7	rect		Music /gospel.html		259,163,323,183
8		circle		Music /help.html	379,152,21

FIGURE 7.26

Eight not spots, numbered as identified in table 7.26

For the jukebox image, the <map> tag and its associated <area> tags and attributes look like the following:

<map name =” jukebox”?

<area shape =”rect” cords =”101,113, 165, 134”

Href =”/music /classics. Html”

Alt =”classical music and composers”/>

<area shape =”refct” cords =”101,139,165,159”

Href =”/music / country. Html”

Alt =”country and folk music “/>

<area shape =”rect” cords =”cords =”101, 163, 165, 183”

Href =”/music /rock op. Html”

Alt =”rock and pop from 50’ s on”/>

<area shape ==”poly” cords =”175, 152, 203, 118, 220,1 18, 247, 152, 237, 153, 2237, 181, 186, 153”

Href =”code/music /home. Html”

Alt =”home page for music section”/?

<area shape =”rect” cords =”259, 113, 323, 134”

Href =”/music /swing, html”

Alt =”swing and Big Band Music”/>

<area shape =”rect” cords =”259, 139, 323, 159”

Href =”/music /jazz.html”

Alt “jazz and free style”/>

<area shape =”rect” cords =”259, 163, 323, 183”

Href=”/music /gospel. Html”

Alt =”Gospel and Inspirational Music “ />

<area shape =” circle” cords =”379, 152, 21”

Alt =”help”/>

</map>

The <img> tag that refers to the map coordinates uses use map, as follows:

<img src =“jukebox. Gif” use map=”#jukebox”>

Finally, put the whole thing together and test it. Here’s a sample HTML file for the really cool music page with a client – side image map, which contains both the <map> tag and the image that uses it: