How to insert and customize tooltips in the image using map and area tags

0

Personal I'm trying to create in a picture of a product several points of interest, when the person clicks on one of these points will open a tooltip with the necessary information.

I've already created the coordinates using an online tool ( link ) and so far so good, everything working, when I click opens the link or appears the title I've set. Only I want it to stay in the "icon" of (+) in each area of interest and this I do not know how to do.

My code is like this so far:

<img src="imagem-que-estou-usando.jpg" usemap="#image-map">

<map name="image-map">
  <area target="_blank" alt="Alt da Imagem" href="http://google.com" coords="629,336,56" shape="circle" title="Title quando hover">
</map>

Is there any way I can insert such customizations in the area? And how do I trigger this with the click to open the tooltip? I was thinking of doing using jQeury, but I'm open to suggestions!

An example of how I wanted this is: link

Thank you!

    
asked by anonymous 31.01.2018 / 15:14

0 answers