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:
No comments:
Post a Comment