1
マウスの上にマウスを置いたときに、その上の画像を変更するためにページのサムネイルを取得しようとしています。 私は非常に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:[email protected]">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;
}
' ' –