In other words, the top left corner always has coordinates (0,0). Note that all coordinate values are relative to the top left corner of the image. (The top left and bottom right corners of the rectangle) The coordinates depend on the shape specified in the shape attribute: Shape Specifies the coordinates that define the corners of the shape. default (which represents the remaining area of the image not defined by any area tags).poly (an arbitrary polygon, with 3 or more points), or.The area tag has the following attributes: shape="rect | circle | poly | default" So, each image map is given a name ( map-name), and one or more area tags to specify the hot spots in the image. The general syntax for the map element is: In fact, it can be placed anywhere within the HTML page body. The above map element is placed after the image in our HTML file. You can see that we’ve defined 3 “hot spot” areas in the image map - a circle, a rectangle, and a polygon - and that we’ve linked each of these areas to a JavaScript function to display the appropriate shape name. In our example above, the map tag looks like this: In this definition, you tell the browser where the hot spots are in the image, and what the hot spots need to link to. The other half of the image map is the map definition itself. Note the usemap="#shapes" attribute, that associates the image map with the image. In the above example, the image map is called "shapes", so our img tag looks like this: How do you turn an image into an image map? Well, to associate an image map with an image, simply add the usemap attribute to the img tag for the image. Try clicking on each of the shapes and you’ll see that each shape has its own link, bringing up its own JavaScript message! Linking to an image map: The usemap attribute This means that, rather than having the whole image behave as one link, you can have lots of different links within the one image.įor example, the single image below has an associated image map containing 3 hot spots that, when clicked on, bring up different JavaScript messages: You’ll learn how to create client-side image maps, and we’ll touch on server-side image maps too.Īn image map is a way of defining “hot spot” links within an image on a Web page. This article shows how to create image maps using HTML.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |