image maps
Download
Skip this Video
Download Presentation
Image Maps

Loading in 2 Seconds...

play fullscreen
1 / 11

Image Maps - PowerPoint PPT Presentation


  • 101 Views
  • Uploaded on

Image Maps. Lecture 14. Image Maps. An image map is a single image that can be used to link to several different URLS. Hot Spots. Image Maps. Server-Side Image Maps Client-Side Image Maps Summary: Image Maps. Image used as image map

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Image Maps' - robin-noble


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
image maps

Image Maps

Lecture 14

image maps1
Image Maps
  • An image map is a single image that can be used to link to several different URLS

Hot Spots

image maps2
Image Maps
  • Server-Side Image Maps
  • Client-Side Image Maps
  • Summary: Image Maps
server side image maps
Image used as image map

Map file defines areas of image and corresponding URLs

Image map program runs on server as part of its server software

Map file and image map program reside on server

Web server performs calculations

Server-Side Image Maps

Image Maps

client side image maps
HTML document contains map information

Browser performs calculations

Better performance that server-side image maps

Can test and implement locally

URL of hyperlink will display in browser status bar when mouse hovers over image

Client-Side Image Maps
four steps to create a client side image map
Select image to use

Define areas of image map

Three shapes: circle, rectangle, polygon

X and Y coordinates in pixels

Get coordinates from a graphics program such as Paint Shop Pro or Photoshop

Four Steps to Create a Client-Side Image Map
four steps to create a client side image map1
Four Steps to Create a Client-Side Image Map
  • Include map information in HTML document:
    • - NAME attribute names the map
    • tags identify shapes in map
      • SHAPE attribute – circle, rect, poly
      • HREF attribute – URL to load
      • COORDS – x and y coordinates of shape
  • Connect image with map information
    • USEMAP attribute in tag
    • USEMAP value is map name with a # symbol before it
finding coordinates
Finding Coordinates
  • Open image in Irfanview or some other graphics program
  • Point to the locations of interest and click to see the X, Y coordinates in the title bar
circle
x,y

x+r,y

Circle

COORDS=“x,y,r”

HREF=“url”>

  • Replace x,y,r with three numbers: horizontal and vertical position of the circle’s center, and the radius of the circle in pixels
  • Replace url with the Web address of the link target
rectangle
x1,y1

x2,y2

Rectangle

COORDS=“x1,y1,x2,y2”

HREF=“url”>

  • Replace x1,y1 with two numbers: horizontal and vertical position of one corner of the rectangle
  • Replace x2,y2 with the horizontal and vertical position of the opposite corner of the rectangle
  • Replace url with the Web address of the link target
polygon
x1,y1

x2,y2

x6,y6

x3,y3

x5,y5

x4,y4

Polygon

COORDS=“x1,y1,x2,y2,x3,y3,x4,y4,…”

HREF=“url”>

  • Replace x1,y1 with two numbers: horizontal and vertical position of a point on the edge of the polygon
  • Add more x,y pairs until you have traced around the desired shape
ad