使图像成为 Nivo 滑块中的超链接
Making an Image a Hyperlink in Nivo Slider
我正在使用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;
}
我参加派对很晚了。 它可能对某人有用
.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;
}
以下内容对我有用:
我删除了属性图像标题="#caption"
就是这样。
如果您使用类"slide"删除包装器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 滑块 - 将幻灯片设为链接?
相关文章:
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 用超链接替换URLS
- 使用JavaScript从超链接加载时的默认下拉值
- Hammer.js阻止在Android Webview中点击超链接
- 将超链接添加到“;标题“;标记文本
- 文本建议的超链接
- 用Javascript按钮替换Javascript超链接
- 删除默认的ui超链接行为
- 谷歌将广告超链接映射到国家标记
- 如何在点击超链接时调用fullcalendar回调
- 单击“禁用其他超链接”
- 为Angularjs制作超链接
- 指向的超链接刚刚赢得'不起作用
- 如何将超链接添加到通过传单创建的传单多段线.Draw
- 如何禁用鼠标中键单击超链接以在新选项卡或新窗口中打开
- 如何在每个动态创建的ImageButton周围包装超链接?Visual Studio
- 将数据库中的超链接添加到查询结果
- 从JSON对象创建具有超链接的HTML表
- 使图像成为 Nivo 滑块中的超链接