Presentation is loading. Please wait.

Presentation is loading. Please wait.

Image mapping in HTML Please use the speaker notes for additional information.

Similar presentations


Presentation on theme: "Image mapping in HTML Please use the speaker notes for additional information."— Presentation transcript:

1 Image mapping in HTML Please use the speaker notes for additional information

2 Image mapping - web14.html In this example, I have mapped the image shown so that when I click on the i, I link to a particular part of the page, when I click on the m, I link to a different part of the page, etc. This is done through mapping.

3 Mapping... This is an image that I am going to map... You can use Microsoft Photo Editor or another graphic package to get the coordinates. Web14.html (first part) I have the image named image.gif. In photo editor or a similar graphics package I can determine the coordinates for particular parts of the image. I can then connect a reference to these coordinates so a click on different parts of the image will result in moving to different referenced areas. Here I am specifying the image with IMG SRC=“image.gif”. I am also referencing the name of the map with USEMAP=“#image”. The MAP NAME=“image” is specified above. MAP area

4 coordinates The coordinates at the bottom corner say Cursor (2,19). These coordinates were a result of the mouse being at the top of the i in image. When the mouse was positioned at the bottom of the i on the right side, the coordinates were 8,75. Note that the coordinates used are the top left and bottom right of the designated area - this forms a rectangle.

5 The coordinates of the i are 2,19 for the top left and 8,75 for the bottom right. The coordinates of the m are 14,29 for the top left and 42,65 for the bottom right. The coordinates of the a are 49,22 for the top left and 63,55 for the bottom right. The coordinates of the g are 74,14 for the top left and 92,49 for the bottom right. The coordinates of the e are 99,,8 for the top left and 115,30 for the bottom right. Coordinates cont.

6 Link to I This is where I go when I select I! Link to M This is where I go when I select M! Web14.html (from start of map) Link to A Link to G This is where I go when I select G! Link to E This is where I go when I select E! This is the end!!! When the mouse is clicked within the coordinates the link to the named area is made.


Download ppt "Image mapping in HTML Please use the speaker notes for additional information."

Similar presentations


Ads by Google