使img在文本后面可点击

Question

I have an image (a round image) with a circle shape area that is pointing to a certain URL, and on that image I have some text above it (a simple '< p >' tag) but the problem is now that you have to click on that image and not on the text to go to the URL, when you click on the text you are just selecting the text, nothing else.

How can I fix that please ?

<p>this is the text<br />
that is not clickable, only selectable :( </p>
<img src="circle.png" alt="" usemap="#hitzone" />
<map name="hitzone">
    <area shape="circle" coords="0,0,100" href="#">
</map>

Answer 1

You can try:

<p>
    <a href="your url here" style="text-decoration: none; color: black">Click me</a>
</p>
<img src="circle.png" alt="" usemap="#hitzone" />
<map name="hitzone">
    <area shape="circle" coords="0,0,100" href="#">
</map>