ECA 228 InternetIntranet Design I Image Maps image

  • Slides: 22
Download presentation
ECA 228 Internet/Intranet Design I Image Maps

ECA 228 Internet/Intranet Design I Image Maps

image map l l a single image divided up into smaller sections each section

image map l l a single image divided up into smaller sections each section links to a different URL – – l 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

image map l two steps to creating an image map – – l cont

image map l two steps to creating an image map – – l cont … 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 l l x is horizontal axis y is vertical axis ECA 228 Internet/Intranet Design I

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

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

pixel coordinates l to determine the coordinates of a region or “hot spot”, open

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

shapes l 3 different shapes to choose from when defining a “hot spot” –

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

original image l original image ECA 228 Internet/Intranet Design I

original image l original image ECA 228 Internet/Intranet Design I

circle l circular area ECA 228 Internet/Intranet Design I

circle l circular area ECA 228 Internet/Intranet Design I

circle l cont … takes two sets of numbers – (x, y) coordinates to

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

circle l cont … circular area ECA 228 Internet/Intranet Design I

circle l cont … circular area ECA 228 Internet/Intranet Design I

rectangle l rectangular area ECA 228 Internet/Intranet Design I

rectangle l rectangular area ECA 228 Internet/Intranet Design I

rectangle l cont … two sets of numbers – – – (x, y) coordinates

rectangle l 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

rectangle l cont … rectangular area ECA 228 Internet/Intranet Design I

rectangle l cont … rectangular area ECA 228 Internet/Intranet Design I

polygon l triangular area ECA 228 Internet/Intranet Design I

polygon l triangular area ECA 228 Internet/Intranet Design I

polygon l use to define irregular shapes – l cont … triangle, octagon, outline

polygon l use to define irregular shapes – l cont … 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

polygon l cont … triangular area ECA 228 Internet/Intranet Design I

polygon l cont … triangular area ECA 228 Internet/Intranet Design I

image map code l <map> </map> tagset – one attribute, name <map name=‘my. Map’>

image map code l <map> </map> tagset – one attribute, name <map name=‘my. Map’> ECA 228 Internet/Intranet Design I

image map code l l cont … <area> tag three attributes – shape l

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

image map code l cont … circular hotspot <area shape=’circle’ coords=’x, y, r’ href=’url’>

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

image map code l cont … rectangular hotspot <area shape=’rect’ coords=’x 1, y 1,

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

image map code l cont … triangular hotspot <area shape=’poly’ coords=’x 1, y 1,

image map code l cont … triangular hotspot <area shape=’poly’ coords=’x 1, y 1, x 2, y 2, x 3, y 3’ href=’url’> – where x 1 is the x-coordinate of the first triangle point, y 1 is the y-coordinate of the first triangle point, etc <area shape=’poly’ coords=’ 310, 15, 400, 175, 225, 175’ href=’harassment. html’> ECA 228 Internet/Intranet Design I

adding image l when adding image, reference the image map with a usemap attribute

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