外贸B2C系列：magento wine模板 slidershow超链接失效解决方法

        magento wine是个很有艺术气息的网站模板，很受人喜欢。但按User-Guide配置slidershow时，如下：

<ul>
<li>
<div class="slideshow_img"><a href="#"><img src="{{skin
url='images/media/slide1.png'}} " alt="" /></a></div>
</li>
<li><divclass="slideshow_img"><a href="#"><img src="{{skin url='images/
media/slide2.png'}}" alt="" /></a></div>
</li>
<li>
<div class="slideshow_img"><a href="#"><img src="{{skin
url='images/media/slide3.png'}} " alt="" /></a></div>
</li>
<li>
<div class="slideshow_img"><a href="#"><img src="{{skin
url='images/media/slide4.png'}} " alt="" /></a></div>
</li>
<li>
<div class="slideshow_img"><a href="#"><img src="{{skin
url='images/media/slide5.png'}} " alt="" /></a></div>
</li>

</ul>

        按上述配置发现超链接点击无效。

        首先查询“图片超链接失效”，有人说是图片挡住了超链接，设z-index="-1"解决。分析页面源码后，发现z-index="-1"已经加上。

对比其他magento网站android-ya后，发现如下代码：

<div class="std"><div id="slider">
<div class="slidercontrolwr">
<div class="slidercontrol"><a title="Slide 1" href="#section1">1</a> <a title="Slide 2" href="#section2">2</a> <a title="Slide 3" href="#section3">3</a> <a title="Slide 4" href="#section4">4</a> <a title="Slide 5" href="#section5">5</a></div>
</div>
<div class="scroller">
<div class="content">
<div id="section1" class="sectionslide"><a href="http://www.android-ya.com/"><img src="http://www.android-ya.com/skin/frontend/default/f001/images/slider/slider1.jpg" alt="アンドロイドタブレット" /></a></div>
<div id="section2" class="sectionslide"><a href="http://www.android-ya.com/"><img src="http://www.android-ya.com/skin/frontend/default/f001/images/slider/slider2.jpg" alt="アンドロイドタブレット" /></a></div>
<div id="section3" class="sectionslide"><a href="http://www.android-ya.com/"><img src="http://www.android-ya.com/skin/frontend/default/f001/images/slider/slider3.jpg" alt="アンドロイドタブレット" /></a></div>
<div id="section4" class="sectionslide"><a href="http://www.android-ya.com/"><img src="http://www.android-ya.com/skin/frontend/default/f001/images/slider/slider4.jpg" alt="アンドロイドタブレット" /></a></div>
<div id="section5" class="sectionslide"><a href="http://www.android-ya.com/"><img src="http://www.android-ya.com/skin/frontend/default/f001/images/slider/slider5.jpg" alt="アンドロイドタブレット" /></a></div>
</div>
</div>

        再分析chinamadeviolins，发现如下代码：

<div class="slideshow" id="slideshow2">
  <div class="slideshow-box">
   <div class="slideshow_show">
   </div>
   <div class="slideshow_show">
<ul>
<li>
<div class="slideshow_img"><a href="http://www.jiayinviolin.com"><img src="http://www.chinamadeviolins.com/skin/frontend/em0009/default/images/media/slide1.png" alt="" /></a></div>
</li>
<li>
<div class="slideshow_img"><a href="#"><img src="http://www.chinamadeviolins.com/skin/frontend/em0009/default/images/media/slide2.png" alt="" /></a></div>
</li>
<li>
<div class="slideshow_img"><a href="#"><img src="http://www.chinamadeviolins.com/skin/frontend/em0009/default/images/media/slide3.png" alt="" /></a></div>
</li>
<li>
<div class="slideshow_img"><a href="#"><img src="http://www.chinamadeviolins.com/skin/frontend/em0009/default/images/media/slide4.png" alt="" /></a></div>
</li>
<li>
<div class="slideshow_img"><a href="#"><img src="http://www.chinamadeviolins.com/skin/frontend/em0009/default/images/media/slide5.png" alt="" /></a></div>
</li>
</ul>
<div>   
  </div>

        受到启发，改为如下是否可行呢？

<div class="slideshow_show">
<ul>
<li>
<div class="slideshow_img"><a href="http://www.jiayinviolin.com"><img src="{{skin url='images/media/slide1.png'}}" alt="" /></a></div>
</li>
<li>
<div class="slideshow_img"><a href="#"><img src="{{skin url='images/media/slide2.png'}}" alt="" /></a></div>
</li>
<li>
<div class="slideshow_img"><a href="#"><img src="{{skin url='images/media/slide3.png'}}" alt="" /></a></div>
</li>
<li>
<div class="slideshow_img"><a href="#"><img src="{{skin url='images/media/slide4.png'}}" alt="" /></a></div>
</li>
<li>
<div class="slideshow_img"><a href="#"><img src="{{skin url='images/media/slide5.png'}}" alt="" /></a></div>
</li>
</ul>
</div>

        修改后，图片超链接正常。但发现出现两个<div class="slideshow_show">。这可能是这个模板的bug吧。至此，问题解决。