Information



Tags



Share

How to create interactive images using image maps in HTML

Advertisement:


read_later

Read Later

Keywords



Keywords



read_later

Read Later

Information

Tags

Share





Advertisement

Advertisement


Best VPN Service
Best VPN


Definition

In this tutorial, I will show you how to create an interactive image using plain HTML to improve the user experience. In this way, you can, for instance, either make a brand new navigation bar for your website footer or create an interactive comic panel. To exemplify this method, I choose to use a picture from the Solvay Conference(1927) and attach each biography which belongs to a scientist posed at the Solvay Conference by using the area tag as explained below.

Code

The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.

The required name attribute of the 6lt;map> element is associated with the 6lt;img>'s usemap attribute and creates a relationship between the image and the map.

The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.(1)

Define the size of the image in order to create a map precisely.

Name the map as biography and do not forget to add # to implement the map on the image using the usemap property.

Define areas on the image using coordinates to create clickable sections, in this case, scientists, on the image.

<-------------HTML------------->
<img src="Pictures/Solvay_Conference.jpg" alt="Solvay_Conference" width="400" height="300" usemap="#biography" />

<map name="biography">
<area shape="rect" coords="190,70,230,250" href="https://www.biography.com/scientist/albert-einstein" alt="Einstein">
<area shape="rect" coords="190,30,230,50" href="https://www.biography.com/scientist/erwin-schrdinger" alt="Schrödinger">
<area shape="rect" coords="275,30,295,50" href="https://www.nobelprize.org/prizes/physics/1945/pauli/biographical/" alt="Pauli">
<area shape="rect" coords="110,70,150,250" href="https://www.biography.com/scientist/marie-curie" alt="Curie">
<area shape="rect" coords="60,70,100,250" href="https://www.nobelprize.org/prizes/physics/1918/planck/biographical/" alt="Plank">
</map>

Result:

Solvay_Conference
Einstein Schrödinger Pauli Curie Plank

Click on a linked scientist to view his/her biography.

References

(1) https://www.w3schools.com/tags/tag_map.asp