在 Nivo Slider 中使图像成为超链接答案

【问题标题】：Making an Image a Hyperlink in Nivo Slider在 Nivo Slider 中使图像成为超链接
【发布时间】：2013-10-15 13:41:42
【问题描述】：

我正在使用 NivoSlider，但无法将图像设为链接。我知道，我可以使用字幕来创建链接。但是，这还不够。为了更好的可访问性，我希望图像也是一个链接。

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

【问题讨论】：

这可能与 CSS 相关...您的图像可能处于绝对位置（而不是锚点），因此锚点的高度/宽度为 0。在浏览器的调试面板中，确保锚占据了图像的整个宽度/高度。或者在问题中发布您的 CSS 代码。
在整个页面上。你这是什么意思？
@vyx.ca 我已经添加了 css。你能给我一些CSS来帮助我吗？
@RohitSmith 您的 CSS 不相关。 .slide-title 甚至没有被使用，你也没有将 css 提供给 .slide, .slide a

标签： javascript jquery html css nivo-slider

【解决方案1】：

我参加聚会很晚了。它可能对某人有用

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;

}

【讨论】：

【解决方案2】：

如果您删除带有“幻灯片”类的包装 div，它会正常工作。例如，这是来自 nivo 滑块的演示

<a href="#1"><img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /></a>
                <a href="#2"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <a href="#3"><img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /></a>
                <a href="#4"><img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" /></a>

或查看此线程，

NIVO SLIDER - Make a slide a link?

【讨论】：