[asp.net] How to make a section of an image a clickable link

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

The easiest way is to make the "button image" as a separate image. Then place it over the main image (using "style="position: absolute;". Assign the URL link to "button image". and smile :)

by creating an absolute-positioned link inside relative-positioned div.. You need set the link width & height as button dimensions, and left&top coordinates for the left-top corner of button within the wrapping div.

<div style="position:relative">
 <img src="" width="??" height="??" />
 <a href="#" style="display:block; width:247px; height:66px; position:absolute; left: 48px; top: 275px;"></a>
</div>

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

Easiest way to execute!