Hyperlinks Working with Linked Images q A standard

Hyperlinks

Working with Linked Images q A standard practice on the Web is to turn the Web site’s logo into a hypertext link pointing to the home page q Link the JJ streetsign image to JJ homepage 2

Working with Linked Images and Image Maps q Earlier, entire image linked to the same destination q HTML also allows you to divide an image into different zones, or hotspots, each linked to a different destination q A single image can be linked to several locations 3

Working with Linked Images and Image Maps q To define these hotspots, you create an image map that matches a specified region of the inline image to a specific destination q How to create that? v Client-side image map 4

Client-Side Image Maps q A client-side image map is inserted in an image q q q into the HTML file The browser locally processes the image map Because all of the processing is done locally, you can easily test Web pages More responsive than server-side maps The browser’s status bar displays the target of each hotspot Older browsers do not support client-side images 5

Creating Hotspots (1) q Define a hotspot using two properties: Its location in the image v Its shape v q Syntax of the hotspot element: <area shape=“shape” coords=“coordinates” href=“url” alt=“text” /> 6

Creating a Rectangular Hotspot q Two points define a rectangular hotspot: v the upper-left corner v the lower-right corner q A sample code for a rectangular hotspot is: <area shape="rect" coords="128, 132, 241, 179" href="http: //jjcweb. jjay. cuny. edu/ssengupta/"> v v first two numbers represent the coordinates for the upper-left corner of the rectangle, and the second two numbers indicate the location of the lower-right corner v The hotspot is a hypertext link to course website v But, how do we get the coordinates? 7

Creating a Circular Hotspot q A circular hotspot is defined by the location of its center and its radius q A sample code for a circular hotspot is: <area shape="circle" coords="68, 211, 35" href="http: //www. google. com/"> v Coordinates are (68, 211), and it has a radius of 35 pixels v The hotspot is a hypertext link to google. com 8

Creating a Polygonal Hotspot q To create a polygonal hotspot, you enter the coordinates for each vertex in the shape q A sample code for a polygonal hotspot is: <area shape="poly" coords="19, 44, 45, 11, 87, 37, 82, 76, 49, 98" href="http: //www. jjay. cuny. edu/"> v Coordinates are for each vertex in the shape • Two at a time v The hotspot is a hypertext link to JJ homepage 9

Creating a Default Hotspot q <area shape="default" coords="0, 0, 345, 325" href="http: //www. yahoo. com/"> where 345 is the width of the inline image in pixels and 325 is the image’s height q Any spot that is not covered by another hotspot will activate the default hotspot link 10

Creating a Client-Side Image Map (2) Let us create a rectangular shape image link: <map name="green"> <area shape="rect" coords="128, 132, 241, 179" href="http: //jjcweb. jjay. cuny. edu/ssengupta/"> </map> Give the map a name! 11

Creating a Client-Side Image Map (3) Let us create a rectangular shape image link: Associate the map to an image! <img src="streetsign. jpg" usemap="#green" /> <map name="green"> <area shape="rect" coords="128, 132, 241, 179" href="http: //jjcweb. jjay. cuny. edu/ssengupta/"> </map> 12

Creating a Client-Side Image Map (3) Let us create a rectangular shape image link: Associate the map to an image! <img src="streetsign. jpg" usemap="#green" border="0" > <map name="green"> <area shape="rect" coords="128, 132, 241, 179" href="http: //jjcweb. jjay. cuny. edu/ssengupta/"> </map> 13

Lab exercise #1 Create 4 rectangular hotspots in the image in assign 1. htm and link them to 4 department homepages Follow Instructor’s instruction for this exercise.

Lab exercise #2 Create 4 circular hotspots in the image in assign 1. htm and link them to 4 department homepages. Make the default image link to JJ homepage. Follow Instructor’s instruction for this exercise.