Download presentation
Presentation is loading. Please wait.
Published byErick Jennings Modified over 8 years ago
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.
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.