gpt4 book ai didi

javascript - 在 Nivo Slider 中使图像成为超链接

转载 作者:行者123 更新时间:2023-11-28 15:32:34 25 4
gpt4 key购买 nike

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

StackOverflow 上有一个类似的问题,但它是针对一个非常旧版本的 Nivo。

我正在为 slider 使用这种语法。

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

一切正常。幻灯片、过渡、字幕等。但是,我无法使 anchor 链接在整个图像上起作用。 :(

如果有人知道如何让它工作,请告诉我。

编辑:这是我写的唯一一段 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;

关于javascript - 在 Nivo Slider 中使图像成为超链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19382787/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com