They can be assigned ID and attributes, which work with javascript selectors, and they also support onMouseOver and onMouseOut events, which enable you to include javascript functions.Īdvantages and disadvantages of an image map Polygon shapes can be used to create very intricate shapes for links.Īn example of a triangular area created using the polygon shape inside a tag is:Īs an HTML element that resides within the DOM, image maps can also be manipulated with javascript. Each coordinate represents a node, which are linked together with the resulting inner space made into a clickable element. This takes much the same format as the rectangle, but instead of 2 sets of coordinates, it repeats ad infinitum. Polygon shapes allow for more complex geometry to be made into clickable elements. The x,y coordinates specify the center of the circle. The pattern for the coordinates is x,y,radius. This could be used on an image of the solar system to create clickable links for each planet, as an example.Īn example of a circle area inside a tag is: The top left corner of the image map is considered to be 0,0.Ī circle shape requires three coordinates and creates a circular clickable element. The pattern for the coordinates is x1,y1,x2,y2. Rectangle shapes are easy to create and work well across all devices.Īn example of a rectangle area inside a tag is: This is a basic shape and covers a good portion of use cases. The tag supports three different shapes natively: rectangle, circle, and polygon.Ī rectangle shape requires four coordinates, one for each of the corners of the rectangle. The tag of HTML image maps requires a set of coordinates that become the boundary box of a clickable element on an image map. The values of the coordinates (coords) depend on the shape of the clickable areas. This example creates an image map with two clickable areas a circle and a polygon. Prior to their addition to HTML, image maps on the web had to be rendered through CGI processes.įor example, the HTML code for a client-side map might look like this: This is done through the support of the and HTML tags. Client-side image maps are ones that are rendered client-side in the browser. Client-side maps, however, can be created using simple HTML tags.Īlmost all image maps on the web nowadays are client-side image maps. In addition, creating a server-side image map requires a lot of knowledge about server-side programming. However, since the use of old browsers that do not support client-side maps is negligible, server-side maps are no longer necessary. Screenshot with image map of Possible implementations of an image mapĪ graphic can be implemented as a server-side or client-side map. Every state contains a clickable link and leads to further information about said state, as well as an in-depth map. An example is the interactive US State map of. ![]() Image maps can also be used to provide website visitors with further information about various topics. Another example of where image maps could be implemented would be a photograph featuring several people where each person is turned into a clickable element. These maps support creating links in a variety of shapes, so their use can get quite creative from simply creating actionable links over simple button shapes to more intricate uses, like making the boundaries of different regions on a map into clickable elements. There are many varied uses for image maps. These shapes can come in a variety of sizes and enable developers to match links to visual elements on images, such as making a circular action button a clickable link.Īn image map is created by adding the 'usemap' attribute to an tag, which specifies the ID of a tag. 3.3 Advantages and disadvantages of an image mapĪn image map is an HTML feature that enables developers to create hyperlinks over different sections of an image, without having to break up the image.3.2 Creating an image map using javascript.3.1.1 rect - definition of rectangular areas. ![]() ![]()
0 Comments
Leave a Reply. |