1 / 15

Hyperlinks

Hyperlinks. 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. Working with Linked Images and Image Maps. Earlier, entire image linked to the same destination

ckline
Download Presentation

Hyperlinks

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

  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

  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

  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

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

  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: <area shape="rect" coords="128,132,241,179" href="http://jjcweb.jjay.cuny.edu/ssengupta/"> • 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?

  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: <area shape="circle" coords="68,211,35" href="http://www.google.com/"> • Coordinates are (68, 211), and it has a radius of 35 pixels • The hotspot is a hypertext link to google.com

  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: <area shape="poly" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.jjay.cuny.edu/"> • Coordinates are for each vertex in the shape • Two at a time • The hotspot is a hypertext link to JJ homepage

  10. Creating a Default Hotspot <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 Any spot that is not covered by another hotspot will activate the default hotspot link

  11. 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!

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

  13. Creating a Client-Side Image Map (3) Let us create a rectangular shape image link: Associate the map to an image! • <imgsrc="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>

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

  15. Lab exercise #2Create 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.

More Related