Cách tạo một phần của hình ảnh là một liên kết có thể nhấp

Question

Tôi có một biểu ngữ trên trang web và một phần của hình ảnh có một hình ảnh của một hộp nút. Làm cách nào để tạo một phần trong đó nút là một liên kết có thể nhấp như a href? Bạn có thể thấy hình ảnh mẫu bên dưới.

Trong hình ảnh biểu ngữ có một "Tham gia ngay, miễn phí của nó" Nút đồ họa. Tôi muốn thêm một liên kết trên hộp này, vì vậy khi người dùng nhấp vào hộp này trên biểu ngữ, sau đó nó sẽ mở trang tiếp theo. Tôi muốn biết làm thế nào tôi có thể thêm một liên kết trên chỉ nút này. Tôi không muốn thêm thẻ <button> vào đó; Tôi chỉ muốn thêm liên kết dựa trên khu vực của đồ họa Nút "Tham gia ngay, miễn phí". Bất kỳ ai cũng có ý tưởng về cách tôi có thể thêm liên kết trên phần này của khu vực hình ảnh mà không cần sử dụng thẻ <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> 

cảm ơn

Answer 1

Nếu bạn không muốn làm cho nút một hình ảnh riêng biệt, bạn có thể sử dụng thẻ <area>. Này được thực hiện bằng cách sử dụng html tương tự như sau:

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

Lưu ý 1: Thuộc tính coords=" " phải được định dạng theo cách này: coords="x1,y1,x2,y2" nơi:

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

Note 2: Thuộc tính usemap="#mapname" phải bao gồm # .

EDIT:

Tôi nhìn mã của bạn và thêm vào trong <map> và <area> thẻ nơi họ nên được. Tôi cũng đã nhận xét một số phần đã chồng chéo hình ảnh hoặc dường như không sử dụng.

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

Ghi chú:

1. Các coord="48,341,294,275" là khi đề cập đến ảnh chụp màn hình của bạn, bạn đăng.
2. src="./test.png" là vị trí và tên của ảnh chụp màn hình bạn đã đăng trên máy tính của mình.
3. href="http://www.example.com/" là liên kết mẫu.

Answer 2

bằng cách tạo ra một liên kết tuyệt đối ở vị trí bên trong div tương đối ở vị trí .. Bạn không cần thiết lập chiều rộng liên kết & chiều cao như kích thước nút, và trái & top phối cho góc trái-top nút trong gói 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>