1. Hyperlinks

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

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

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

5. Client-Side Image Maps  A client-side image map is inserted in an image 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

6. Creating Hotspots (1)  Define a hotspot using two properties:  Its location in the image  Its shape  Syntax of the hotspot element: 6

7. Creating a Rectangular Hotspot  Two points define a rectangular hotspot:  the upper-left corner  the lower-right corner  A sample code for a rectangular hotspot is:  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  The hotspot is a hypertext link to course website  But, how do we get the coordinates? 7

8. Creating a Circular Hotspot  A circular hotspot is defined by the location of its center and its radius  A sample code for a circular hotspot is:  Coordinates are (68, 211), and it has a radius of 35 pixels  The hotspot is a hypertext link to google.com 8

9. Creating a Polygonal Hotspot  To create a polygonal hotspot, you enter the coordinates for each vertex in the shape  A sample code for a polygonal hotspot is:  Coordinates are for each vertex in the shape Two at a time  The hotspot is a hypertext link to JJ homepage 9

10. Creating a Default Hotspot  where 345 is the width of the inline image in pixels and 325 is the image’s height  Any spot that is not covered by another hotspot will activate the default hotspot link 10

11. Creating a Client-Side Image Map (2) 11 Let us create a rectangular shape image link: Give the map a name!

12. Creating a Client-Side Image Map (3) 12 Let us create a rectangular shape image link: Associate the map to an image!

13. Creating a Client-Side Image Map (3) 13 Let us create a rectangular shape image link: Associate the map to an image!

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

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