如何雙鏈接圖像

Question

我有一個旋轉木馬：JS Fiddle。我試圖弄清楚如何將作爲主要圖像出現的每個圖像鏈接到它自己的頁面。目前，點擊圖片會導致維基百科頁面，因爲這是我在main_image div中指定的鏈接。

我應該在<li>中指定一個href嗎？我的猜測是我必須在var imgTitle = $(this).find('a').attr("href")的行上創建另一個JS變量，但我完全不確定。

var intervalId; 
 
var slidetime = 2500; 
 
$(document).ready(function() { 
 
    // Comment out this line to disable auto-play 
 
    intervalID = setInterval(cycleImage, slidetime); 
 
    $(".main_image .desc").show(); // Show Banner 
 
    $(".main_image .block").animate({ 
 
    opacity: 0.85 
 
    }, 1); // Set Opacity 
 
    $(".image_thumb ul li:first").addClass('active'); 
 

 

 
    $(".image_thumb ul li").click(function() { 
 
    // Set Variables 
 
    var imgAlt = $(this).find('img').attr("alt"); // Get Alt Tag of Image 
 
    var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL 
 
    var imgDesc = $(this).find('.block').html(); // Get HTML of block 
 
    var imgDescHeight = $(".main_image").find('.block').height(); // Calculate height of block \t 
 

 
    if ($(this).is(".active")) { // If it's already active, then... 
 
     return false; // Don't click through 
 
    } else { 
 
     // Animate the Teaser \t \t \t \t 
 
     $(".main_image .block").animate({ 
 
     opacity: 0, 
 
     marginBottom: -imgDescHeight 
 
     }, 250, function() { 
 
     $(".main_image .block").html(imgDesc).animate({ 
 
      opacity: 0.85, 
 
      marginBottom: "0" 
 
     }, 250); 
 
     $(".main_image img").attr({ 
 
      src: imgTitle, 
 
      alt: imgAlt 
 
     }); 
 
     }); 
 
    } 
 

 
    $(".image_thumb ul li").removeClass('active'); // Remove class of 'active' on all lists 
 
    $(this).addClass('active'); // add class of 'active' on this list only 
 
    return false; 
 

 
    }).hover(function() { 
 
    $(this).addClass('hover'); 
 
    }, function() { 
 
    $(this).removeClass('hover'); 
 
    }); 
 

 
    // Function to autoplay cycling of images 
 
    function cycleImage() { 
 
    var onLastLi = $(".image_thumb ul li:last").hasClass("active"); 
 
    var currentImage = $(".image_thumb ul li.active"); 
 

 

 
    if (onLastLi) { 
 
     var nextImage = $(".image_thumb ul li:first"); 
 
    } else { 
 
     var nextImage = $(".image_thumb ul li.active").next(); 
 
    } 
 

 
    $(currentImage).removeClass("active"); 
 
    $(nextImage).addClass("active"); 
 

 
    // Duplicate code for animation 
 
    var imgAlt = $(nextImage).find('img').attr("alt"); 
 
    var imgTitle = $(nextImage).find('a').attr("href"); 
 
    var imgDesc = $(nextImage).find('.block').html(); 
 
    var imgDescHeight = $(".main_image").find('.block').height(); 
 

 
    $(".main_image .block").animate({ 
 
     opacity: 0, 
 
     marginBottom: -imgDescHeight 
 
    }, 250, function() { 
 
     $(".main_image .block").html(imgDesc).animate({ 
 
     opacity: 0.85, 
 
     marginBottom: "0" 
 
     }, 250); 
 
     $(".main_image img").attr({ 
 
     src: imgTitle, 
 
     alt: imgAlt 
 
     }); 
 
    }); 
 
    }; 
 

 
});

.features { 
 
    flex: 1; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    /* \t width: 60%; */ 
 
    min-width: 62.4%; 
 
    max-width: 62.4%; 
 
    margin-right: 0; 
 
    padding-right: 0; 
 
    position: relative; 
 
} 
 
.main_image { 
 
    flex: 1 0 auto; 
 
    min-width: 72.3%; 
 
    max-width: 72.3%; 
 
    margin-right: 0; 
 
    height: 400px; 
 
    float: left; 
 
    background: #333; 
 
    position: relative; 
 
    overflow: hidden; 
 
    color: #fff; 
 
    padding-bottom: 10px; 
 
    padding-right: 0; 
 
    /* \t \t \t \t \t \t border-top: 5px solid blue; */ 
 
    /* \t \t \t \t \t \t border-right: 5px solid red; 
 
*/ 
 
} 
 
.main_image img { 
 
    margin-right: 0; 
 
    max-height: 475px; 
 
    padding-right: 0; 
 
    max-width: 610px; 
 
} 
 
.main_image h2 { 
 
    font-size: 2em; 
 
    font-weight: normal; 
 
    margin: 0 0 5px; 
 
    padding: 10px; 
 
    padding-bottom: 0px; 
 
    line-height: 1.2em; 
 
    /* \t font-variant: small-caps; */ 
 
    font-family: Open Sans; 
 
    font-style: italic; 
 
} 
 
.block small { 
 
    padding: 0 0 5px 5px; 
 
    background: url(images/icon_cal.gif) no-repeat 0 center; 
 
    font-size: 1em; 
 
} 
 
.main_image .block small { 
 
    margin-left: 5px; 
 
} 
 
.main_image .desc { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    display: none; 
 
} 
 
.main_image .block { 
 
    width: 100%; 
 
    background: #111; 
 
    border-top: 1px solid #000; 
 
    padding-bottom: 8px; 
 
} 
 
.image_thumb { 
 
    float: left; 
 
    margin-right: 0; 
 
    padding-right: 0; 
 
    margin-left: 0; 
 
    padding-left: 0; 
 
    width: 223px; 
 
    height: 40px; 
 
    background: #f0f0f0; 
 
    /* \t \t \t \t \t \t border-right: 1px solid #fff; */ 
 
    border-top: 1px solid #ccc; 
 
    flex: 1; 
 
} 
 
.image_thumb ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    /* \t \t \t \t \t \t border: 4px solid green; \t 
 
*/ 
 
} 
 
.image_thumb ul li { 
 
    margin: 0; 
 
    padding: 12px 10px; 
 
    background-color: #f0f0f0; 
 
    min-width: 213px; 
 
    height: 56.2px; 
 
    float: left; 
 
    border-bottom: 1px solid #ccc; 
 
    border-top: 1px solid #fff; 
 
    border-right: 1px solid #ccc; 
 
} 
 
.image_thumb ul li.hover { 
 
    background: #ddd; 
 
    cursor: pointer; 
 
} 
 
.image_thumb ul li.active { 
 
    background: #fff; 
 
    cursor: default; 
 
} 
 
.image_thumb ul li h2 { 
 
    font-size: 1.5em; 
 
    margin: 5px 0; 
 
    padding: 0; 
 
    line-height: 1.2em; 
 
    /* \t font-variant: small-caps; */ 
 
    font-family: Open Sans; 
 
    font-style: italic; 
 
} 
 
.image_thumb ul li .block { 
 
    float: left; 
 
    margin-left: 10px; 
 
    padding: 0; 
 
    width: 180px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section class="features"> 
 

 
    <span class="sticker"> 
 
\t \t \t \t \t <img class="tab1special" src="images/featurestab.png" alt="main"> 
 
\t \t \t \t \t \t \t </span> 
 

 
    <div class="main_image"> 
 
    <a href="https://www.wikipedia.org"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/e/e9/Baker's-van-r.jpg" /> 
 
    </a> 
 
    <div class="desc"> 
 
     <div class="block"> 
 
     </div> 
 
    </div> 
 
    <h2>Wagon wins again</h2> 
 
    </div> 
 

 

 
    <div class="image_thumb"> 
 
    <ul> 
 

 
     <li> 
 
     <a href="https://upload.wikimedia.org/wikipedia/commons/e/e9/Baker's-van-r.jpg"></a> 
 
     <div class="block"> 
 
      <h2>Wagon wins again</h2> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <a href="https://s-media-cache-ak0.pinimg.com/736x/00/60/ff/0060ff20d110050c0e350c55f7c7f3be.jpg"></a> 
 
     <div class="block"> 
 
      <h2>Heirloom Scareloom</h2> 
 

 
     </div> 
 
     </li> 
 
     <li> 
 
     <a href="https://upload.wikimedia.org/wikipedia/commons/7/79/Mammuthus_trogontherii122DB.jpg"></a> 
 
     <div class="block"> 
 
      <h2>The Original Wollies</h2> 
 
      <br> 
 

 
     </div> 
 
     </li> 
 
     <li> 
 
     <a href="images/booksleeve2.jpg"></a> 
 
     <div class="block"> 
 
      <h2>Tales from the West</h2> 
 
      <br> 
 

 
     </div> 
 
     </li> 
 
     <li> 
 
     <a href="images/spiceroute.jpg"></a> 
 
     <div class="block"> 
 
      <h2>A Journey through Time</h2> 
 
      <br> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</section>

Answer 1

您不能建立在相同的元素兩個超鏈接。瀏覽器如何知道要關注哪個鏈接？爲什麼不創建一個單獨的文本元素用於鏈接Wikipedia頁面，並使用圖像div作爲頁面鏈接？

Answer 2

圖片不能爲鏈接。但你可以很容易地用jQuery將鏈接中的圖像打包成。您當前的代碼有：

$(".main_image img").attr({ src: imgTitle , alt: imgAlt}); 

它設置當前圖像的源文本和替代文本。如果你想在鏈接中包裝該圖像，你可以這樣做：

$(".main_image img").attr({ src: imgTitle , alt: imgAlt}).wrap($('<a>',{ 
    href: imgTitle // over whatever URL you like 
    })); 

這將img標籤包裝在鏈接中。目前它只是鏈接到圖像源，但您可以將其更改爲任何內容。