当我用鼠标悬停在我的页面上时，我正试图让缩略图在我们的页面上方更改图像。 我对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;
}
答案 0 :(得分：0)
CSS Image Sprites可能正是您要找的。请参阅链接页面底部的悬停效果。不需要Javascript。
答案 1 :(得分：0)
假设您的图片遵循这种命名模式..
ar1.jpg (thumbnail)
ar1big.jpg (full size)
为缩略图标记添加新属性，例如rn=""（ r oot n ame）或确保alt=""具有根图像名称（不包括.jpg）然后您可以将单词big添加到根目录，以便在鼠标悬停时链接到大型全尺寸图像。
<强> 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>
答案 2 :(得分：0)
您需要为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));
}