50 likes | 164 Views
HOME. CALENDAR. ASSIGNMENTS. LINKS. GOOGLE. Introduction to ImageMaps. Imagemaps allow you to create highly stylized links by placing them within an image. Imagemaps specify “hot spots” within an image that are clickable.
E N D
HOME CALENDAR ASSIGNMENTS LINKS GOOGLE Introduction to ImageMaps • Imagemaps allow you to create highly stylized links by placing them within an image. • Imagemaps specify “hot spots” within an image that are clickable. • Imagemaps have two components: the image, and the map specifying the hotspots. • We’ll use this example:
The <img> and <map> tags • Images are tied to specific image maps using names in the tags. • The image requires a usemap parameter with the name of the map <img src="imap.jpg" width=200 height=292 usemap="#nav"> • The map describes a set of areas that are clickable • Rect: rectangular areas require x,y coordinates for the top left and bottom right coordinates. • Circ: circular areas require an x,y coordinate for the center, and a value for the radius. • Polygon: describes any polygon using s set of x,y coordinates. • The unit of measure is the pixel.
The <map> tag • The map describes a set of areas that are clickable • Rect: rectangular areas require x,y coordinates for the top left and bottom right coordinates. • Circ: circular areas require an x,y coordinate for the center, and a value for the radius. • Polygon: describes any polygon using s set of x,y coordinates. • The unit of measure is the pixel, so you should • Create the image using a specific size in pixels, OR • Force the image size using the ‘height’ and ‘width’ parameters of the <img> tag. • The map tag receives a name matching the name called out in the <img> tag.
Imagemap Example <img src="imap.jpg" width=200 height=292 usemap="#nav"> <map name="nav"> <area shape="rect" href="http://www.cs.ucf.edu/courses/cgs3175/cgs3175home.html" coords="0, 0, 200, 35" target="display"> <area shape="rect" coords="0, 36, 200, 70" href="http://www.cs.ucf.edu/courses/cgs3175/cgs3175calendar.html" target="display"> <area shape="rect" coords="0, 71, 200, 105" href="http://www.cs.ucf.edu/courses/cgs3175/cgs3175assignments.html" target="display"> <area shape="rect" coords="0, 106, 200, 140" href="http://www.cs.ucf.edu/courses/cgs3175/cgs3175links.html" target="display"> <area shape="circ" coords="100, 210, 70" href="http://www.google.com" target="display" • </map>
Imagemap Example • http://www.cs.ucf.edu/courses/cgs3175/example/cgs3175imagemap.html