weilun weilun - 4 months ago 10
HTML Question

how to set link on my image

I want to set hyperlink on the biggest circle area in my image.

I try to use map tag.

I try to set absolute position coords on area tag and it work fine when I click it on my browser in PC.

But the absolute position is wrong on my android's browser.

Hence, I try to use div tag to get my link.

But I didn't find my green area for clicking.

My code as below link

<style type="text/css">
#outer{
background:orange;
}
#inner{
width: 50%;
height: 50%;
top:10%;
right:10%;
margin: 0 auto;
position: relative;
background:green;
}
</style>

<div id=outer>
<div>
<img src="https://docs.google.com/drawings/d/1KuxMbSoKHsl1MXQUi2nmrOcSpCWN_WaRsL7Q1WatODA/pub?w=960&amp;h=720" height="100%" width="100%" />
</div>
<div id=inner>
<a href="https://www.google.com"></a>
</div>
</div>


You can check out https://jsfiddle.net/hL09ses6/1/ for more.

Answer

You can use your image as a hyperlink to another page:

  • by wrapping it inside an anchor tag <a> &
  • by setting its href attribute to the url of the page you want the browser to navigate to.

Code:

<a href="https://www.google.com">
    <img src="https://docs.google.com/drawings/d/1KuxMbSoKHsl1MXQUi2nmrOcSpCWN_WaRsL7Q1WatODA/pub?w=960&amp;h=720"height="100%" width="100%"  />
</a>

Check out this fiddle for more. In the following snippet you can see your own code working:

#outer {
  background: orange;
}

#inner {
  width: 50%;
  height: 50%;
  top: 10.5%;
  right: 10%;
  margin: 0 auto;
  position: relative;
  background: green;
}

#bigcircle {
  /* The numbers may require slight adjustments */
  width: 21.6%;
  height: 36%;
  top: 1.6%;
  right: 22.8%;
  margin: 0 auto;
  position: absolute;
  border-radius: 100%;
}
<div id=outer>
  <div>
    <img src="https://docs.google.com/drawings/d/1KuxMbSoKHsl1MXQUi2nmrOcSpCWN_WaRsL7Q1WatODA/pub?w=960&amp;h=720" height="100%" width="100%" />
  </div>
  <a href="https://www.google.com">
    <div id="bigcircle"></div>
  </a>
  <div id=inner>
    <a href="https://www.google.com"></a>
  </div>
</div>


For more advanced uses I suggest that image mapping is used! Find out more here.