無法將圖片鏈接到網址（<img>標記<a>標記不適用於幻燈片）

我有幻燈片，我想將每張幻燈片鏈接到某個網址，這應該很簡單，但它不起作用。無法將圖片鏈接到網址（<img>標記<a>標記不適用於幻燈片）

我使用的滑塊從這裏：http://dev7studios.com/lean-slider/ 如果你不想下載代碼，我想你可以使用inspect元素並編輯它來自己測試它。

  ... 
       <div class="slide1 lean-slider-slide"> 
        <a href="http://www.google.com"><img src="images/1.jpg" alt="" /></a> 
       </div> 
      ...

我也嘗試使用onclick與JavaScript沒有運氣。

<script> 
function test(){ 
    document.location.href = 'http://www.google.com'; 
} 
</script> 

<img src="images/1.jpg" alt="" onclick="test()" />

來源

2013-08-27 user2189190

我將默認演示版本上傳到我的website，將所有圖片鏈接到google.com。除了添加鏈接之外，我還沒有對原始代碼進行任何更改。我假設你已經嘗試過，但我看不出問題是什麼。通常這些問題與腳本和樣式表的路徑有關，但這些看起來很簡單。至少有一個可行的例子。我使用的代碼如下。

<!DOCTYPE html> 
<html lang="en" class="no-js"> 
<head> 
    <meta charset="utf-8" /> 

    <title>Lean Slider Demo</title> 

    <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
    <script src="scripts/modernizr-2.6.1.min.js"></script> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
    <script src="../lean-slider.js"></script> 
    <link rel="stylesheet" href="../lean-slider.css" type="text/css" /> 
    <link rel="stylesheet" href="sample-styles.css" type="text/css" /> 
</head> 
<body> 

    <div class="slider-wrapper"> 
     <div id="slider"> 
      <div class="slide1"> 
       <a href="http://google.com" target="blank"></><img src="images/1.jpg" alt="" /></a> 
      </div> 
      <div class="slide2"> 
       <a href="http://google.com" target="blank"><img src="images/2.jpg" alt="" /></a> 
      </div> 
      <div class="slide3"> 
       <a href="http://google.com" target="blank"><img src="images/3.jpg" alt="" /></a> 
      </div> 
      <div class="slide4"> 
       <a href="http://google.com" target="blank"><img src="images/4.jpg" alt="" /></a> 
      </div> 
     </div> 
     <div id="slider-direction-nav"></div> 
     <div id="slider-control-nav"></div> 
    </div> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
     var slider = $('#slider').leanSlider({ 
      directionNav: '#slider-direction-nav', 
      controlNav: '#slider-control-nav' 
     }); 
    }); 
    </script> 

</body> 
</html>

來源

2013-08-27 21:59:04

非常感謝！我注意到的一件奇怪的事情是，當所有四張幻燈片都有修改過的href行時，它只會鏈接它。但至少現在工作了，非常感謝。 – user2189190

它無法正常工作。預計每個圖像都可以擁有自己的超鏈接，但使用傾斜滑塊，只有最後一個超鏈接適用於所有圖像。在你的情況下，你已經給每個圖像google.com，所以它似乎工作正常，但一旦你改變每個網址，然後你會注意到它不會超鏈接。

感謝，克尚

來源

2014-04-01 01:56:34

但解決的辦法，我不能有diferent URL's，總是最後一個環節;玩與CSS你可以強制元素的位置，並啓用yhe鏈接爲每個圖像：

/*lean slider overwrite*/ 
#slider-control-nav, #slider-direction-nav 
{ 
z-index:3; 
} 

.lean-slider-slide.current 
{ 
z-index:2; 
} 

.lean-slider-slide.current a 
{ 
float:left; 
}

來源

2015-07-09 22:34:06

無法將圖片鏈接到網址（<img>標記<a>標記不適用於幻燈片）

回答

相關問題