[英]How do I get the thumbnail hover to change the image above?
當我用鼠標懸停在我的頁面上時，我試圖讓我的頁面上的縮略圖更改它們上方的圖像。 我是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;
}
CSS Image Sprites可能正是您所尋找的。 請參閱鏈接頁面底部的懸停效果。 不需要Javascript。
假設您的圖像遵循這種命名模式..
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>
您需要為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 make a gallery where I can hover or a video OR image thumbnail and have a larger image appear?
使用縮略圖圖像，如何將主圖像更改為縮略圖圖像？
[英]Using a thumbnail image, how do I change main picture to thumbnail image?
如何獲得圖庫以將顯示圖像更改為縮略圖圖像？
[英]How can I get the image gallery to change the display image to the thumbnail image?
單擊右側的色樣時，如何將大圖更改為縮略圖？
[英]How I do change the BIG image to the thumbnail images when I click the Color Swatches on the right?
如何在圖像通過頁面上的某個點時更改圖像，然后在圖像高於該點時將其更改回來？
[英]How do I change an image when it passes a certain point on a page, and then change it back when it is above that point?
如何用圖像替換表單按鈕，並在懸停時更改圖像？ 還精靈與單獨的圖像？
[英]How do I replace a form button with an image, and have the image change on hover? Also sprites vs separate images?
將鼠標懸停在縮略圖上時，如何為其他視頻進行視頻交換？
[英]How do I make a video swap for a different video when I hover over a thumbnail?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.