Question

滑块有效，但不是链接。每张幻灯片都应更改网址

例如：

使用Bing链接<幻灯片1 ，
使用Google链接<幻灯片2
使用yahoo链接滑动。

我无法使用 javascript 。

<div class="framebanner">

<img src="http://i.imgur.com/cdPVj2b.jpg" alt=""  usemap="#kitchurrasco" id="kitchurrasco">

<img src="http://i.imgur.com/z3uurbl.jpg" alt="=" usemap="#rechaud" id="rechaud">

<img src="http://i.imgur.com/gZ4awVQ.jpg" alt="" usemap="#refrigerator" id="refrigerator">

</div>

<map name="kitchurrasco" id="kitchurrasco">
<area  alt="" href="http://bing.com" shape="rect" coords="0,0,847,300" style="outline:none;" target="_self"     />
<area shape="rect" coords="845,298,847,300" alt="" style="outline:none;" title="http://bing.com" />
</map>

<map name="rechaud" id="rechaud">
<area  alt="" title="Rechaud Banho Maria Aço Inox GN 1/2 65mm 9 Litros" href="http://www.google.com" shape="rect" coords="0,0,847,300" style="outline:none;" target="_self"     />
<area shape="rect" coords="845,298,847,300" alt="" style="outline:none;" title="" href="http://www.google.com" />
</map>

<map name="refrigerator" id="refrigerator">
<area  alt="" href="http://yahoo.com" shape="rect" coords="0,0,847,300" style="outline:none;" target="_self"     />
<area shape="rect" coords="845,298,847,300" alt="" style="outline:none;" title="" href="http://yahoo.com" />
</map>

示例网站：http://codepen.io/anon/pen/XboOXM

Answer 1

由于您使用absolute定位将图像定位在彼此之上，因此单个图像位于顶部，而该图像地图上的链接是唯一生效的图像。

您需要做的是更新z-index以及曝光图像的动画，以便将可见光保持在最顶层，以便它的链接起作用。这是新的example，更新的css如下：

           @media (max-width: 480px) {
                #espacoembranco img { 

width: 270px!important;
                }
            }


.framebanner img {
max-width:97%;
}
.framebanner img {
  position: absolute;
  top: 90px;
  z-index: 3;
  -webkit-animation: slideshow 18s linear 0s infinite!important;
  -moz-animation: slideshow 18s linear 0s infinite!important;
  -ms-animation: slideshow 18s linear 0s infinite!important;
  -o-animation: slideshow 18s linear 0s infinite!important;
  animation: slideshow 18s linear 0s infinite!important;
}

.framebanner img:nth-child(2) {
  z-index: 2;
  -webkit-animation: slideshow 18s linear 6s infinite!important;
  -moz-animation: slideshow 18s linear 6s infinite!important;
  -ms-animation: slideshow 18s linear 6s infinite!important;
  -o-animation: slideshow 18s linear 6s infinite!important;
  animation: slideshow 18s linear 6s infinite!important;
}

.framebanner img:nth-child(3) {
   z-index: 1;
  -webkit-animation: slideshow 18s linear 12s infinite!important;
  -moz-animation: slideshow 18s linear 12s infinite!important;
  -ms-animation: slideshow 18s linear 12s infinite!important;
  -o-animation: slideshow 18s linear 12s infinite!important;
  animation: slideshow 18s linear 12s infinite!important;
}
@-webkit-keyframes slideshow {
 25% { opacity: 1;z-index:4}
   33.33% { opacity: 0;z-index:1} 
   91.66% { opacity: 0;z-index:1}
   100% { opacity: 1;z-index:4}
}
@-moz-keyframes slideshow {
   25% { opacity: 1;z-index:4}
   33.33% { opacity: 0;z-index:1} 
   91.66% { opacity: 0;z-index:1}
   100% { opacity: 1;z-index:4}
}
@-ms-keyframes slideshow {
 25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-o-keyframes slideshow {
 25% { opacity: 1;z-index:4}
   33.33% { opacity: 0;z-index:1} 
   91.66% { opacity: 0;z-index:1}
   100% { opacity: 1;z-index:4}
}
@keyframes slideshow {
   25% { opacity: 1;z-index:4}
   33.33% { opacity: 0;z-index:1} 
   91.66% { opacity: 0;z-index:1}
   100% { opacity: 1;z-index:4}
}

为什么我的滑动链接网址不起作用？

1 个答案: