Tuesday, 10 March 2015

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:

No comments:

Post a Comment