이미지 섹션을 클릭 할 수있는 링크로 만드는 방법

Question

웹 페이지에 배너가 있고 이미지의 일부에 버튼 상자 그래픽이 있습니다. 버튼이 href와 같은 클릭 가능한 링크 인 부분을 어떻게 만듭니 까? 아래 샘플 이미지를 볼 수 있습니다. 배너 이미지에서

는 "지금 가입, 자사의 무료"버튼 그래픽이있다. 이 상자에 링크를 추가하고 싶습니다. 사용자가 배너에서이 상자를 클릭하면 다음 페이지가 열립니다. 이 버튼에 링크를 어떻게 추가 할 수 있는지 알고 싶습니다. 나는 그것에 <button> 태그를 추가하고 싶지 않습니다; "Join Now, Free"버튼 그래픽 영역을 기반으로 링크를 추가하고 싶습니다. 아무도 <button> 태그를 사용하지 않고 이미지 영역의이 부분에 링크를 추가하는 방법에 대한 아이디어가 없습니다.

<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> 

당신이 버튼을 별도의 이미지를 만들고 싶어하지 않을 경우 당신은

Answer 1

, 당신은 <area> 태그를 사용할 수 있습니다 감사합니다.

<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> 

주 1 : coords=" " 속성이이 방법으로 포맷해야합니다 :이이에 HTML과 유사한 사용하여 수행됩니다 coords="x1,y1,x2,y2"은 여기서

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

주 2 : usemap="#mapname" 속성은 #를 포함해야 .

편집 : 나는 당신의 코드를 보면서 그들이해야 어디 <map> 및 <area> 태그에 추가

. 또한 이미지가 겹치거나 사용하지 못하는 것처럼 보이는 부분을 주석 처리했습니다.

<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> --> 

주 :

1. coord="48,341,294,275" 당신이 게시 된 스크린 샷을 참조입니다.
2. src="./test.png"은 내 컴퓨터에 게시 한 스크린 샷의 위치와 이름입니다.
3. href="http://www.example.com/"은 링크 예입니다. 상대 위치 DIV 내부의 절대 위치에 대한 링크를 생성하여

Answer 2

.. 당신은 & 링크 폭을 설정 버튼 측정 기준 높이와 & 최고 권취 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>