Picture cards are an exciting and interesting way to liven up your website. They allow you to upload images and make certain parts of those images clickable for other online resources. If you are in trouble and don’t want to download an image map editor, you can easily create a map using HTML tags.
You’ll need an image, an image editor, and some sort of HTML or text editor. Most image editing programs will show you your mouse coordinates when you mouse over the image. This coordinate data is all you need to start using image maps.
Creating an image map
To create an image map, you must first select an image on which to base the map. The image should be “regular size”, which means you shouldn’t use an image that’s so big that the browser scales it.
When pasting the image, add an additional attribute that identifies the coordinates of the map:
When you create an image map, create a clickable area on the image so that the map’s coordinates should match the height and width of the selected image. Maps support three different types of shapes:
- Rectangle or figure with four sides
- a polygon or figure with many sides
- Circle – a circle
To create the zones you need to isolate the specific coordinates you want to map. A map can consist of one or more areas defined on the image, which when clicked open a new hyperlink.
For a rectangle, you map only the top-left and bottom-right corners. All coordinates are given in x,y (top, top). So for the upper left corner you would enter 0,0 and the lower right corner 10,15 0,0,10,15. Then add it to the map:
With a polygon, we map each x, y coordinate separately. The web browser automatically links the last set of coordinates to the first; Everything within these coordinates is part of the map.
Circle shapes only require two coordinates, like the rectangle, but for the second coordinate you specify the radius or distance from the center of the circle. So for a circle with center 122.122 and radius 5 you would write 122.122.5:
All areas and shapes can be contained in the same map tag:
considerations
Image maps were much more common in the Web 1.0 era of the 1990s to early 2000s – image maps often formed the basis of website navigation. A designer would create some sort of image to display menu items and then draw a map.
Modern approaches encourage responsive design and use cascading style sheets to control the placement of images and hyperlinks on a page.
Although the map tag is still supported in the HTML standard, using small form factor mobile devices can cause unexpected performance issues with image maps. Bandwidth problems or broken pictures also make the value of a picture card questionable.
So you can continue to use this stable and well-understood technology knowing that there are more effective alternatives that are currently trending among web designers.