Advertisement:
Read Later
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.
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:
Click on a linked scientist to view his/her biography.
(1) https://www.w3schools.com/tags/tag_map.asp