web-dev-qa-db-ja.com

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

Webページにバナーがあり、画像の一部にボタンボックスのグラフィックがあります。ボタンがhrefなどのクリック可能なリンクである部分だけを作成するにはどうすればよいですか？以下のサンプル画像をご覧ください。

sample banner image with button graphic

バナー画像には、「今すぐ参加、無料」ボタンのグラフィックがあります。このボックスにリンクを追加したいので、ユーザーがバナーのこのボックスをクリックすると、次のページが開きます。このボタンだけにリンクを追加する方法を知りたい。 <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>

ありがとうございました

htmlasp.nethtml5hyperlink
25
Vikram

ボタンを別の画像にしたくない場合は、<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/"はリンクの例です。
44
Burn_E99

相対位置のdiv内に絶対位置のリンクを作成します。リンクの幅と高さをボタンの寸法として設定し、ラッピングdiv内のボタンの左上隅のleft＆top座標を設定する必要があります。

<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>
7
Michael B.

画像の選択した領域に対して、このWebサイトから画像マップを自動生成できます。 https://www.image-map.net/

実行する最も簡単な方法！

2
Ishan Patel