How to make a section of an image a clickable link

Question

I have a banner on web page, and part of the image there is a graphic of a button box. How do I make just the part where the button is a clickable link such as a href? You can see a sample image below.

In the banner image there is a "Join Now, Its Free" Button graphic. I want to add a link on this box, so when users click on this box on the banner, then it will open the next page. I want to know how I can add a link on just this button. I don't want to add the <button> tag to it; I just want to add a link based on the area of the "Join Now, Its Free" Button graphic. Anybody have any ideas on how I can add a link on this part of the image area without using the <button> tag.

 <div class="flexslider">                  <ul class="slides" runat="server" id="Ul">                                                  <li class="flex-active-slide" style="background: url(&quot;images/slider-bg-1.jpg&quot;) no-repeat scroll 50% 0px transparent;                                               width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;">                        <div class="container">                          <div class="sixteen columns contain"></div>                               <img runat="server" id="imgSlide1" style="top: 1px; right:         -19px; opacity: 1;" class="item"             src="images/slider1.png"            data-topimage="7%">                            <a href="#" style="display:block; background:#00F; width:356px; height:66px; position:absolute; left:1px; top:-19px; left: 162px; top: 279px;"></a>                               </div>                        </li>                 </ul>              </div>              <ul class="flex-direction-nav">                  <li><a class="flex-prev" href="#"><i class="icon-angle-left"></i></a></li>                 <li><a class="flex-next" href="#"><i class="icon-angle-right"></i></a></li>             </ul>                     </div> 

Thank You

Answer 1

If you don't want to make the button a separate image, you can use the <area> tag. This is done by using html similar to this:

<img src="imgsrc" width="imgwidth" height="imgheight" alt="alttext" usemap="#mapname">  <map name="mapname">     <area shape="rect" coords="see note 1" href="link" alt="alttext"> </map> 

Note 1: The coords=" " attribute must be formatted in this way: coords="x1,y1,x2,y2" where:

x1=top left X coordinate y1=top left Y coordinate x2=bottom right X coordinate y2=bottom right Y coordinate 

Note 2: The usemap="#mapname" attribute must include the #.

EDIT:

I looked at your code and added in the <map> and <area> tags where they should be. I also commented out some parts that were either overlapping the image or seemed there for no use.

<div class="flexslider">     <ul class="slides" runat="server" id="Ul">                                      <li class="flex-active-slide" style="background: url(&quot;images/slider-bg-1.jpg&quot;) no-repeat scroll 50% 0px transparent; width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;">             <div class="container">                 <div class="sixteen columns contain"></div>                    <img runat="server" id="imgSlide1" style="top: 1px; right: -19px; opacity: 1;" class="item" src="./test.png" data-topimage="7%" height="358" width="728" usemap="#imgmap" />                 <map name="imgmap">                     <area shape="rect" coords="48,341,294,275" href="http://www.example.com/">                 </map>                 <!--<a href="#" style="display:block; background:#00F; width:356px; height:66px; position:absolute; left:1px; top:-19px; left: 162px; top: 279px;"></a>-->             </div>         </li>     </ul> </div> <!-- <ul class="flex-direction-nav">     <li><a class="flex-prev" href="#"><i class="icon-angle-left"></i></a></li>     <li><a class="flex-next" href="#"><i class="icon-angle-right"></i></a></li> </ul> --> 

Notes:

1. The coord="48,341,294,275" is in reference to your screenshot you posted.
2. The src="./test.png" is the location and name of the screenshot you posted on my computer.
3. The href="http://www.example.com/" is an example link.

Answer 2

You can auto generate Image map from this website for selected area of image. https://www.image-map.net/

Easiest way to execute!