使圖像成爲Nivo Slider中的超鏈接

我正在使用NivoSlider，並且無法使圖像成爲鏈接。我知道，我可以使用字幕創建鏈接。但是，這還不夠。爲了更好的可訪問性，我希望圖像也是一個鏈接。使圖像成爲Nivo Slider中的超鏈接

在StackOverflow上有一個類似的問題，但它是一個非常舊版本的Nivo。

我正在使用此語法的滑塊。

<div class="slider-wrapper theme-default container"> 
    <div class="ribbon"></div> 
    <div id="slider" class="nivoSlider"> 
     <div class='slide'><a href='#'><img src='abc.png'></a> 
     </div> 
     <div class='slide'><a href='http://google.com'><img src='google.png' title=''></a> 
     </div> 
    </div> 
</div>

一切正常。幻燈片，轉換，字幕等。但是，我無法使錨鏈接在整個圖像上工作。 :(

如果有人知道如何使它工作，那麼請讓我知道

編輯：這裏是CSS的我寫的唯一的一塊：

.slider-wrapper { 
    margin: auto; 
    margin-top: 15px; 
    background: fade(white,80%); 
    padding-top: 15px; 
    margin-bottom: 40px; 
} 
.slide-title { 
    .font; 
    color: #ddd; 
}

來源

2013-10-15 Rohitink

這可能是相關的CSS ...您的圖片可能是一個絕對位置（而不是錨點），因此錨點的高度/寬度爲0.在瀏覽器的調試面板中，確保錨點佔據圖像的整個寬度/高度。或者在問題中發佈你的CSS代碼。 –

_在整個page_上。你那是什麼意思？ – putvande

@ vyx.ca我已經添加了CSS。你能否給我一些CSS來幫助我。 – Rohitink

-1

如果除去包裝用類「幻燈片」的div它會工作得很好。例如，這是從NIVO滑塊的演示

3210

或結帳這個線程，

NIVO SLIDER - Make a slide a link?

來源

2013-10-15 13:50:22 melc

我已經很晚了派對。可能有人有用

HTML

<div class="slider-wrapper theme-default"> 
       <div id="slider" class="nivoSlider"> 
       <a href="http://www.google.ae/" target="_new"><img title="#htmlcaption1" src="images/01.png" alt=""></a> 
       <a href="http://www.yahoo.ae/" target="_new"><img title="#htmlcaption2" src="images/02.png" alt=""></a>     
       </div> 
      </div>

CSS

.nivoSlider a.nivo-imageLink { 
background:white; 
filter: alpha(opacity=0); 
opacity: 0; 
z-index: 8; 
width: 100%; 
height: 100%; 
position: absolute;

}

來源

2014-05-06 07:03:48

使圖像成爲Nivo Slider中的超鏈接

回答

相關問題