如何使图像的可点击的链接的一段 [英] How to make a section of an image a clickable link

问题描述

我的网页上的横幅，和图像的一部分有一个按钮框的图形。如何使流向何方按钮是A HREF一个可点击的链接这样的角色？你可以看到下面的样本图像。

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.

在横幅图像有一个现在加入，它的免费按钮图形。我想添加这个框链接，因此当用户在此框中点击旗帜，那么它就会打开下一页。我想知道我怎么能对眼前这个按钮添加一个链接。我不想添加＆LT;按钮和GT; 标记它;我只是想基于现在加入，它的免费按钮图形的区域添加一个链接。任何人有我如何能在图像区域，这部分链接添加任何想法，而无需使用＆LT;按钮方式＆gt; 标签

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>

感谢您

推荐答案

如果您不想让按钮的单独图像，您可以使用＆LT;区域＆GT; 标记。这是通过使用HTML类似这样完成的：

If you don't want to make the button a separate image, you can use the <area> tag. This is done by using html similar to this:

<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：X1，Y1，X2，Y2<：本 COORDS = COORDS = 属性必须以这种方式进行格式化 / code>其中：

Note 1: The coords=" " attribute must be formatted in this way: coords="x1,y1,x2,y2" where:

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

注2：本 USEMAP =＃映射名属性必须包括＃

编辑：

我看着你的code和中添加的＆LT;地图＆GT; 和＆LT;区域＆GT; 标签，他们应该。我还评论了一些地区的要么图像重叠或似乎那里没有用了。

I looked at your code and added in the <map> and <area> tags where they should be. I also commented out some parts that were either overlapping the image or seemed there for no use.

<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. 的坐标=48341294275是在参考你的屏幕截图您发布。


2. 的 SRC =./ test.png是你贴在我的电脑截图的位置和名称。


3. 的 HREF =htt​​p://www.example.com/就是一个例子链接。

1. The coord="48,341,294,275" is in reference to your screenshot you posted.
2. The src="./test.png" is the location and name of the screenshot you posted on my computer.
3. The href="http://www.example.com/" is an example link.

这篇关于如何使图像的可点击的链接的一段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！