如何让缩略图悬停以更改上面的图像？

Question

我正在尝试获取我页面上的缩略图，以便在您将鼠标悬停在缩略图上方时更改缩略图。我是 javascript 的新手，似乎不知道该做什么。我已经使用过 fancybox，所以当你点击大图时，它会打开一个画廊。

我在下面包含了 html 和 css。如果有人可以帮助我 javascript ，我将不胜感激。

 <html lang="en">
 <head> 
   <link rel="shortcut icon" href="favicon.ico">
   <meta name="description" content="Collectables and memorabilia from the  TV show LOST. Screen used props, action figures, trading cards, costumes and much much more">
   <meta name="keywords" content="autographs, props, trading cards, Mcfarlane, Bif Bang Pow, ABC, LOST, RITTENHOUSE, Inkworks, Damon Lindelof, Carlton Cuse, Oceanic 815, Ajira 316, 4815162342
                                 authentic, screen used, dharma initiative, kahana, hawaii, beach, jungle,the others, french science expedition, Jack, Charlie, Kate, Hurley, Jacob, MIB">
   <meta charset="UTF-8"></script>
    <div class= <title>LOST Collector</title>
   <link rel="stylesheet" type="text/css" href="main.css"/>

   <!-- Add jQuery library -->
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 <!-- Add mousewheel plugin (this is optional) -->
 <script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

 <!-- Add fancyBox -->
 <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5"   type="text/css" media="screen" />
 <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

 <!-- Optionally add helpers - button, thumbnail and/or media -->
 <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>


</head>
<body>
    <div class="pagecontent">
        <header>    
            <a href="http://www.lostcollector.com">
                <img src="images/logo.png" alt="Lost Collector" title="Lost Collector"/>
            </a> 
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About LOST Collector</a></li>
                    <li><a   href="mailto:lostcollector815@gmail.com">Contact</a></li>
                </ul>
            </nav>
        </header>
        <ul id="navigation_layout">
            <li><a href="artwork.html" id="artworknav">Artwork</a></li>
            <li><a href="autographs.html" id="autographsnav">Autographs</a>     </li>
            <li><a href="badgespins.html">Badges and Pins</a></li>
            <li><a href="booksandmagazines.html">Books/Magazines</a></li>
            <li><a href="clothing.html">Clothing</a></li>
            <li><a href="dvdsandcds.html">Dvds and Cds</a></li>
            <li><a href="filmcrew.html">Film Crew</a></li>
            <li><a href="originalprops.html">Original Props</a></li>
            <li><a href="specialevents.html">Special Events</a></li>
            <li><a href="toysandgames.html">Toys and games</a></li>
            <li><a href="tradingcards.html">Trading cards</a></li>
            <li><a href="everythingelse.html">Everything else</a></li>
            <div class="noline">
               <li><a href="wishlist.html">Wish list</a></li>
            </div>
        </ul> 
        <div class="itemdetails">
           <div class="itemtext">
                <h1>Inkworks: Season One</h1>
                <h2>AR-1 unused Redemption Card</h2>
                <h3>For Maggie Grace autograph card A-3</h3>
                <p>Inkworks included redemption cards for the first 3 autograph cards in the packs because they didn't receive the signed cards back in time to include them in the boxes. So the redemption cards were issued instead. The idea was when you found the card you filled it out and sent it to Inkworks who would then send you back the punched redemption card and the autograph card in question. 
                </p>
           </div>

           <div class="itemdetails_aside">
                <a class="fancybox" rel="group" href="images/tradingcards/season1inkworks/AR1big.jpg"><img src="images/tradingcards/season1inkworks/AR1.jpg" alt="AR-1 Redemption Card" title="click to enlarge" height="430" width="308"/>
           </div>
           <div class="thumbnails">
                <img src="images/tradingcards/season1inkworks/thumbnails/ar1.jpg" alt="ar1" title="Click thumbnail to enlarge" width="107" height="150" /></a>
                <img src="images/tradingcards/season1inkworks/thumbnails/ar1mgb.jpg" alt="mgrdmp" title="Click thumbnail to enlarge" width="107" height="150" /></a>
            </div>
        </div>
 </body>

body {
background-color: #5D6D7E;
display: inline;
}

/*Styles body background colour, text colour and font syle and size*/
div.pagecontent {
margin: 10px;
border: 1px solid #000000;
border-radius: 20px;
width: 1300px;
height: auto;
margin: 0 auto;
background-color: #ffffff;
color: #000000;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 90%;
}

/*Styles the header*/
header {
width: 1300px;
height: 200px;
background: #ffffff;
position: static;

border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin-top: 0;
}

/*finds all img tags as links inside header*/
header a img {
padding-bottom:  10px;
margin: 25px 10px 10px 20px;
display: inline;
height: 150px;
width: 150px;
}


nav {
display: inline;
float: right;
}

nav ul li  {
display: inline-block;
text-decoration: none;
font-size: 100%;
font-weight: bold;
color: #000000;
padding: 40px 10px 30px;
margin-top: 25px;     
margin-right: 25px;
}     

nav li a {
display: inline-block;
padding: 60px 10px 30px 10px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
} 

nav li a:hover {
color: #ffffff;
background-color: #000000;
}

/*selects the navigation_layout id, styles the whole nav layout*/
#navigation_layout  {
position: absolute;
width: 1300px;
top: 188px;
float: left;
list-style: none; 
background-color:  #ffffff;
border-top:  #ffffff;
padding: 0;
}

 /*makes the nav list items display from the left*/
 #navigation_layout li {
 float: left;
 background-color: #000000;
 margin: 1px;
 padding-right: 2.65px;
 list-style: none;     
 }

 /*styles the list a tags*/
#navigation_layout li a  {
display: block;
padding: 4px 9px 4px 8px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #ffffff; 
}

 /*styles link colour when mouse hovers over it only**/
    #navigation_layout li a:hover {
    color: #ff0000;
    background-color: #ffffff; 
    }   


div.pic img{ padding:2px;
         border: 1px solid #000000;         
}

div.itemdetails {
display: inline-block;
position: relative;
width:1250px;
height: auto;
margin: 25px;
border: 1px solid  #000000;
background-color: #d3d3d3;
}

/**div.itemtext is all of the text on the page, with separate rules**/        
div.itemtext {
float: right;
width: 600px;
height: auto;
text-align: center;
padding: 25px 25px 25px 25px;
}
div.itemtext h1 {
float:right;
width:600px;
text-align: center;
margin-bottom: 0;
font-size: 300%;
}

div.itemtext h2 {
float: right;
width: 600px;
text-align: center;
text-decoration: underline;
font-size: 200%;
}

div.itemtext h3{
font-size: 200%;
}

div.itemtext p{
float: right;
width: 600px;
text-align: center;
font-size: 200%;
margin-top: 0;
}


div.itemdetails_aside {
display: block;
float: left;
padding: 25px 25px 25px 25px;
margin: 25px;
}

div.itemdetails_aside img {
border: 1px solid #000000;
padding: 25px 25px 25px 25px;
background-color: #ffffff
}





div.itemdetails_content {
float: right;
width: 550px;
height: auto;
padding: 25px 25px 25px 25px;
margin:25px;
}

div.thumbnails {
display: inline;
float:left;
padding: 25px 25px 25px;
}

div.thumbnails img{
display: inline-block;
border: 1px solid #000000;
background-color: #ffffff;
padding: 20px 20px 20px 20px;
margin: 10px;
}




div.related_items{
display: inline;
padding: 25px 25px 25px 25px;
margin-right: 100px;
margin-left: 100px;
}


div.box {
margin: auto;
width:1150px;
height: 400px;
}

div.gallery {
width: 1100px;
height: 900px;
margin: auto;
}
div.cardcontent {
display: inline;
float: left;
border: 1px solid #000000;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
background-color: #ffffff;
text-align: center;
font-weight: bold;
width: 200px;
height: 150px;
}

 div.cardcontent img{
border: 1px solid #000000;
}

Answer 1

CSS Image Sprites 可能就是您要找的。请参阅链接页面底部的悬停效果。不需要 Javascript。

Answer 2

假设您的图像遵循这种命名模式..

ar1.jpg (thumbnail)    
ar1big.jpg (full size)

向缩略图标签添加新属性，例如 rn="" (rootname) 或确保alt="" 有根图像名称（不包括 .jpg），然后您可以将 big 添加到根，当鼠标悬停在大的全尺寸图像上时，link。

jquery

$(function() { // document ready
    $('.thumbnails img').mouseover(function() { // when thumb hovered do..
        var fullImagePath = 'images/tradingcards/season1inkworks/'; // root path to full size image
        var imageRootName = $(this).attr('rn'); // get root image name
        var bigImageNameAndPath = fullImagePath + imageRootName + 'big' + '.jpg'; // put it all together
        $('.fancybox img').attr('src', bigImageNameAndPath); // replace src="" with path to full image corresponding to thumb hovered
    });
});

以上内容未经测试，如有问题请告诉我。

html

<div class="itemdetails_aside">
    <a class="fancybox" rel="group" href="images/tradingcards/season1inkworks/ar1big.jpg">
        <img src="images/tradingcards/season1inkworks/AR1.jpg" alt="AR-1 Redemption Card" title="click to enlarge" height="430" width="308"/>
    </a>
</div>
<div class="thumbnails">
    <img src="images/tradingcards/season1inkworks/thumbnails/ar1.jpg" rn="ar1" alt="ar1" title="Click thumbnail to enlarge" width="107" height="150" />
    <img src="images/tradingcards/season1inkworks/thumbnails/ar1mgb.jpg" rn="ar1mgb" alt="mgrdmp" title="Click thumbnail to enlarge" width="107" height="150" />
</div>

Answer 3

您需要为 img 元素添加 ID 和类，如下所示：

  <div class="itemdetails_aside">
        <a class="fancybox" rel="group" href="images/tradingcards/season1inkworks/AR1big.jpg">
        <img id="imgBigThumb" src="1.jpg" alt="AR-1 Redemption Card" title="click to enlarge" height="430" width="308" />
  </div>
  <div class="thumbnails">
        <img class="imgSmallThumb" src="1.jpg" alt="ar1" title="Click thumbnail to enlarge" width="107" height="150" /></a>
        <img class="imgSmallThumb" src="2.jpg" alt="mgrdmp" title="Click thumbnail to enlarge" width="107" height="150" /></a>
  </div>

那么javascript代码不是很难:

var BigThumb = document.getElementById("imgBigThumb"),
    SmallThumbs = document.getElementsByClassName("imgSmallThumb");

for(var i=0; i<SmallThumbs.length;i++) {
    (function(i){
        SmallThumbs[i].addEventListener("mouseover",function(){
            BigThumb.setAttribute("src",SmallThumbs[i].getAttribute("src"));
        });
    }(i));
}

如何让缩略图悬停以更改上面的图像？

How do I get the thumbnail hover to change the image above?

html

javascript

css

jquery

fancybox