Enhanced Web Site Design Week 2 Stanford University Continuing Studies CS 22 •Using Photoshop and Fireworks • ImageMaps • Using Sound and Video Mark Branom
[email protected] http://www.stanford.edu/people/markb/ Course Web Site: http://www.stanford.edu/group/csp/cs22 CS 22: Enhanced Web Site Design - Week 2 Slide 1 (of 22) CS 22: Enhanced Web Site Design - Week 2 Slide 2 (of 22) Page 1 of 11 Graphic Manipulation What is an image map? • See “Using Photoshop and Fireworks” • Image maps allow a webmaster to take an image and define more than one hyperlink for the image. Each hyperlinked section is called a "hotspot". • To define a hotspot, webmasters open the image in a graphics program and record the coordinates of the points corresponding to the hotspot boundaries. CS 22: Enhanced Web Site Design - Week 2 Slide 3 (of 22) CS 22: Enhanced Web Site Design - Week 2 Slide 4 (of 22) Page 2 of 11 Map tags rect <img src="map.gif" usemap="#name-of-map" /> <map name="name-of-map"> <area shape="rect" coords="x,y,a,b" <area shape="rect" coords="x,y,a,b" href="link1.html" /> href="link1.html" /> <area shape="circle" coords="x,y,r" href="link2.html" /> • Coordinates refer to the x/y coordinates for the upper left <area shape="polygon" and the lower right coordinates for the rectangle. coords="x1,y1,a1,b1,x2,y2,a2,b2,…" href="link3.html" /> </map> CS 22: Enhanced Web Site Design - Week 2 Slide 5 (of 22) CS 22: Enhanced Web Site Design - Week 2 Slide 6 (of 22) Page 3 of 11 circle polygon <area shape="polygon" coords="x1,y1,a1,b1,x2,y2,a2,b2,…" <area shape="circle" coords="x,y,r" href="link3.html" /> href="link2.html" /> • Coordinates refer to the x/y coordinates for as many are needed to define the polygon.