Presentation is loading. Please wait.

Presentation is loading. Please wait.

 You can also divide an image into regions that link to different documents depending on where someone clicks.  This is called an imagemap, and any.

Similar presentations


Presentation on theme: " You can also divide an image into regions that link to different documents depending on where someone clicks.  This is called an imagemap, and any."— Presentation transcript:

1

2  You can also divide an image into regions that link to different documents depending on where someone clicks.  This is called an imagemap, and any image can be made into an imagemap.  An imagemap is an image on a Web page that leads to two or more different links, depending on which part of the image is clicked. Modern Web browsers use client- side imagemap, but you can also create server-side imagemaps for compatibility with old browsers.

3  The first thing I must say about images is that you probably won’t need – or want- to use them! It’s almost always easier, more efficient, and more reliable to use several ordinary images, placed right next to one another, with a separate link for each image.  When would you want to use an image map, then? Only when the parts of an image you want to link are so numerous or oddly arranged that it would be a big hassle to chop the image into smaller images.

4  To make any type of imagemap, you need to figure out the numerical pixel coordinates of each region within the image that you want to turn into a clickable link.  An easy way to do this is to open the image with Paint and watch the coordinates at the bottom of the screen as you use the rectangle selection tool to select a rectangular region of the image.

5  Once you have the coordinates written down, you're ready to create an HTML imagemap. Type the following just after the tag in your Web Page: ›  Now you need to type tag for each region of the image.

6  Each tag has three attributes: › shape indicates whether the region is a rectangle (shape=“rect”), a circle=“circle”, or an irregular (shape=“poly”) › coords gives the exact pixel coordinates for the region. For rectangles, give the x,y coordinates of the top-left corner followed by the x,y coordinates of the bottom right corner. For circles, give the x,y center point followed by the radius in pixels. For polygons, list x,y coordinates of all the corners, in connect-the-dots order.

7  Each tag has three attributes: › href specifies the page to which the region links. You can use any address or the name that you would use in an ordinary link tag.  After the tags, you are done defining the imagemap; insert a closing tag.  To place the actual imagemap on the page, you use an ordianry tag and add a usemap attribute: ›  Use the name you put in the tag (and don’t forget the # symbol). It is best to include the width and height attributes for any image on a Web page.

8 TagAttributeFunctions Inserts an image into the document. SRC="..."The URL of the image. USEMAP="..."The name of an image map specification for client-side image mapping. Used with and.... A client-side image map, referenced by. Includes one or more tags. Defines a clickable link within a client-side image map. SHAPE="..."The shape of the clickable area. Currently, RECT, POLY, and CIRCLE (or ROUND) are the valid options. COORDS="... " The left, top, right, and bottom coordinates of the clickable region within an image. HREF="..."The URL that should be loaded when the area is clicked.


Download ppt " You can also divide an image into regions that link to different documents depending on where someone clicks.  This is called an imagemap, and any."

Similar presentations


Ads by Google