画像のセクションをクリック可能なリンクにする方法

Question

ウェブページにバナーがあり、画像の一部にボタンボックスのグラフィックがあります。ボタンがhrefなどのクリック可能なリンクである部分だけをどうやって作るのですか？下のサンプル画像を見ることができます。バナー画像で

ボタングラフィック「今、その自由参加」があります。このボックスにリンクを追加したいので、ユーザーがバナーのこのボックスをクリックすると、次のページが開きます。このボタンにリンクを追加する方法を知りたい。私はそれに<button>タグを追加したくありません。私はちょうど "今すぐ参加、無料"ボタンのグラフィックの領域に基づいてリンクを追加したいと思います。誰も私がどのように<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>タグを使用することができますありがとうございました。これは、これと同様のHTMLを使用して行われる：

<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=" "属性は、この方法でフォーマットされなければならない：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>