33

我在网页上有一个横幅，部分图像有一个按钮框的图形。如何只制作按钮是可点击链接的部分，例如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>

谢谢你

4

4 回答 4

57

如果您不想让按钮成为单独的图像，则可以使用<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>and标记。<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/"是一个示例链接。
于 2013-09-01T16:05:02.207 回答
11

您可以从该网站为选定的图像区域自动生成图像地图。https://www.image-map.net/

最简单的执行方式！

于 2018-10-26T01:25:02.757 回答
8

通过在相对定位的 div 内创建一个绝对定位的链接。您需要将链接的宽度和高度设置为按钮尺寸，并将左上角坐标设置为包装 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>
于 2013-09-01T16:22:17.050 回答
0

最简单的方法是将“按钮图像”制作为单独的图像。然后将它放在主图像上（使用“style =“position：absolute;”。将URL链接分配给“按钮图像”。然后微笑:)

于 2020-03-09T18:02:46.900 回答