如何将多个链接添加到图像的某些部分

Question

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.

Answer 1

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>