ECA 228 Internet/Intranet Design I

1. ECA 228 Internet/Intranet Design I Image Maps

2. image map • a single image divided up into smaller sections • each section links to a different URL • a click on one section takes you to one place • a click on another section takes you to a different place • example • http://quickfacts.census.gov/ ECA 228 Internet/Intranet Design I

3. image map cont … • two steps to creating an image map • map out the clickable regions of the image • define which URL corresponds to each region • mapping image • regions correspond to (x, y) pixel coordinates of image • x is horizontal axis • y is vertical axis ECA 228 Internet/Intranet Design I

4. mapping image x-axis (0,0) y-axis (400,200) ECA 228 Internet/Intranet Design I

5. pixel coordinates • to determine the coordinates of a region or “hot spot”, open the image in a graphics program • PhotoShop • Paint Shop Pro • etc • roll mouse over image to see coordinates ECA 228 Internet/Intranet Design I

6. shapes • 3 different shapes to choose from when defining a “hot spot” • circle • rectangle • polygon ECA 228 Internet/Intranet Design I

7. original image • original image ECA 228 Internet/Intranet Design I

8. circle • circular area ECA 228 Internet/Intranet Design I

9. circle cont … • takes two sets of numbers • (x,y) coordinates to indicate center of the circle • positions the circle within the image, to indicate where the circular hot spot is located • r, the radius of the circle • number of pixels • will set the diameter or width of the circle ECA 228 Internet/Intranet Design I

10. circle cont … • circular area ECA 228 Internet/Intranet Design I

11. rectangle • rectangular area ECA 228 Internet/Intranet Design I

12. rectangle cont … • two sets of numbers • (x,y) coordinates to indicate the UPPER LEFT corner of the rectangular hot spot • (x,y) coordinates to indicate the LOWER RIGHT corner of the rectangular hot spot • clickable region is defined by the parallel lines drawn between two sets of coordinates ECA 228 Internet/Intranet Design I

13. rectangle cont … • rectangular area ECA 228 Internet/Intranet Design I

14. polygon • triangular area ECA 228 Internet/Intranet Design I

15. polygon cont … • use to define irregular shapes • triangle, octagon, outline of state, outline of person, etc • multiple sets of coordinates • (x,y) coordinates to indicate each of the points which make up the irregular shape ECA 228 Internet/Intranet Design I

16. polygon cont … • triangular area ECA 228 Internet/Intranet Design I

17. image map code • <map> </map> tagset • one attribute, name <map name=‘myMap’> ECA 228 Internet/Intranet Design I

18. image map code cont … • <area> tag • three attributes • shape • rect • circle • poly • coords • (x, y) coordinates of points defining hot spots • href • actual link ECA 228 Internet/Intranet Design I

19. image map code cont … • circular hotspot • where x is the x-coordinate, y is the y-coordinate, and r is the radius <area shape=’circle’ coords=’x, y, r’ href=’url’> <area shape=’circle’ coords=’70, 135, 65’ href=’glassceiling.html’> ECA 228 Internet/Intranet Design I

20. image map code cont … • rectangular hotspot • where x1 is the x-coordinate of the upper left point, y1 is the y-coordinate of the upper left point, and x2 is the x-coordinate of the lower right point, y2 is the y-coordinate of the lower right point <area shape=’rect’ coords=’x1, y1, x2, y2’ href=’url’> <area shape=’rect’ coords=’135, 0, 215, 200’ href=’powerdresser.html’> ECA 228 Internet/Intranet Design I

21. image map code cont … • triangular hotspot • where x1 is the x-coordinate of the first triangle point, y1 is the y-coordinate of the first triangle point, etc <area shape=’poly’ coords=’x1, y1, x2, y2, x3, y3’ href=’url’> <area shape=’poly’ coords=’310, 15, 400, 175, 225, 175’ href=’harassment.html’> ECA 228 Internet/Intranet Design I

22. adding image • when adding image, reference the image map with a usemap attribute <img src=’office_trio.jpg alt=”Office Trio” usemap=”#myMap’> ECA 228 Internet/Intranet Design I