.png?w=3840&q=75)
.webp?w=3840&q=75)
.webp?w=3840&q=75)
Image mapping in HTML is a powerful technique that allows you to define clickable areas within an image. These clickable areas, or "hotspots," can be linked to different destinations, perform various actions, or display additional information. By using image maps, you can enhance the interactivity of your website and provide a more engaging user experience.
Here's a simple example of an image map in HTML:
1<img src="example.jpg" alt="Example Image" usemap="#example-map"> 2 3<map name="example-map"> 4 <area shape="rect" coords="34,44,270,350" href="https://example.com/link1" alt="Link 1"> 5 <area shape="circle" coords="477,300,100" href="https://example.com/link2" alt="Link 2"> 6 <area shape="poly" coords="130,130,190,290,230,250" href="https://example.com/link3" alt="Link 3"> 7</map>
In this example, the usemap attribute of the image element references the map element with the name attribute example-map. The area elements within the map define the clickable areas.
The rect shape is used to define a rectangular clickable area. You specify the coordinates of the top-left and bottom-right corners.
1<area shape="rect" coords="34,44,270,350" href="https://example.com/link1" alt="Link 1">
The circle shape defines a circular clickable area. You specify the coordinates of the center and the radius.
1<area shape="circle" coords="477,300,100" href="https://example.com/link2" alt="Link 2">
The poly shape is used to define a polygonal clickable area. You provide a series of coordinate pairs that outline the shape.
1<area shape="poly" coords="130,130,190,290,230,250" href="https://example.com/link3" alt="Link 3">
The default shape can be used to define a clickable area that covers the entire image if none of the other shapes are activated.
1<area shape="default" href="https://example.com/default" alt="Default Link">
The usemap attribute is added to the img tag to associate it with a specific map element.
1<img src="example.jpg" alt="Example Image" usemap="#example-map">
The coords attribute defines the coordinates for the shapes. For rectangles, you need four values: x1, y1, x2, y2. For circles, you need three values: x, y, radius. For polygons, you need a series of coordinate pairs.
The href attribute specifies the link for the clickable area.
1<area shape="rect" coords="34,44,270,350" href="https://example.com/link1" alt="Link 1">
The alt attribute provides alternative text for the clickable area, improving accessibility.
Client-side image maps are defined within the HTML code and processed by the browser. They are the most common type of image maps and are ideal for static content.
1<img src="example.jpg" alt="Example Image" usemap="#example-map"> 2 3<map name="example-map"> 4 <area shape="rect" coords="34,44,270,350" href="https://example.com/link1" alt="Link 1"> 5</map>
Server-side image maps are processed on the web server. When a user clicks on the image, the coordinates are sent to the server, which then determines the action to take. This method is less common today but can be useful for dynamic content.
1<img src="example.jpg" alt="Example Image" ismap>
In the example above, the ismap attribute indicates that this is a server-side image map.
You can enhance image maps with JavaScript to create dynamic interactions. For example, you can display tooltips or highlight areas on hover.
1<img src="example.jpg" alt="Example Image" usemap="#example-map" id="interactive-image"> 2 3<map name="example-map"> 4 <area shape="rect" coords="34,44,270,350" href="https://example.com/link1" alt="Link 1" onmouseover="highlightArea('area1')" onmouseout="resetArea('area1')"> 5</map> 6 7<script> 8function highlightArea(areaId) { 9 document.getElementById(areaId).style.backgroundColor = 'yellow'; 10} 11 12function resetArea(areaId) { 13 document.getElementById(areaId).style.backgroundColor = ''; 14} 15</script>
To ensure your image maps work well on different devices, you can use CSS and JavaScript to adjust the coordinates based on the image's size.
1<style> 2 img { 3 max-width: 100%; 4 height: auto; 5 } 6</style> 7 8<script> 9 window.onload = function() { 10 var image = document.getElementById('interactive-image'); 11 image.addEventListener('load', function() { 12 var originalWidth = image.naturalWidth; 13 var originalHeight = image.naturalHeight; 14 var currentWidth = image.clientWidth; 15 var currentHeight = image.clientHeight; 16 17 // Adjust coordinates here based on the new size 18 }); 19 }; 20</script>
Image mapping in HTML is a versatile technique that allows you to create interactive and engaging web experiences. By defining clickable areas within images, you can link to different destinations, perform actions, or display additional information.
Whether you're using client-side or server-side image maps, mastering this technique can significantly enhance the functionality and user experience of your website. With the right combination of HTML, CSS, and JavaScript, you can create responsive and dynamic image maps that cater to various user needs and devices.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.
