ECA 228 InternetIntranet Design I Image Maps image
- Slides: 22
ECA 228 Internet/Intranet Design I Image Maps
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 … 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
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” – – – circle rectangle polygon 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 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
rectangle l rectangular area ECA 228 Internet/Intranet Design I
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
polygon l triangular area ECA 228 Internet/Intranet Design I
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
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 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’> – 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, 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, 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 <img src=’office_trio. jpg alt=”Office Trio” usemap=”#my. Map’> ECA 228 Internet/Intranet Design I
- Acuerdo 228 medicamentos pos
- Cs 228
- Asw 228
- Eaf 228
- 1629-1695
- Hymn 228
- Art 228 cc
- Maps reittihaku
- O que é eca direitos e deveres
- Foramen spinosu.
- Eca financing
- Incisive defintion
- Hbs eoc review
- Envirolyte eca generators
- Ica vs eca
- Metodologa
- Ritmo musical de ecuador
- Eca
- Evolucion del dibujo
- Eca
- Objetivos para trabajar leyendas
- Eca building
- Eca artigo 6