how would I add multiple links to an image. Linking an image I would just wrap it with a href. I would have an image of a tree with apples then I would want to add a link to each apple in the image. How would I do this?
I was thinking of using position absolute but seems tedious especially when trying to make it mobile responsive of moving the links.
Apple Tree
You can use Image Map Generator
.wrap {
transform: scale(0.3);
width: 0px;
height: 0px;
}<div class="wrap">
<img src="https://www.freepngimg.com/thumb/tree/76337-vector-fruit-tree-apple-download-free-image.png"
usemap="#image-map">
<map name="image-map">
<area target="" alt="" title="" href="#1" coords="626,247,775,130" shape="rect">
<area target="" alt="" title="" href="#2" coords="495,265,632,378" shape="rect">
<area target="" alt="" title="" href="#3" coords="620,437,750,558" shape="rect">
<area target="" alt="" title="" href="#4" coords="346,829,467,931" shape="rect">
<area target="" alt="" title="" href="#5" coords="579,937,707,1041" shape="rect">
<area target="" alt="" title="" href="#6" coords="885,289,1029,386" shape="rect">
<area target="" alt="" title="" href="#7" coords="1082,540,1210,652" shape="rect">
<area target="" alt="" title="" href="#8" coords="1268,926,1403,1035" shape="rect">
<area target="" alt="" title="" href="#9" coords="1025,1096,1171,1206" shape="rect">
</map>
</div>