-1

まず第一に、私はJavascriptにそれほど熟練していないことに注意してください。私はこれを数日前に知ったばかりです。

このページで実現したいこと: ユーザーがカラー パレットをクリックすると、画像が変化します。[私はすでにこれを達成しています]しかし、ユーザーが元をクリックすると. 灰色の画像のサムネイルをクリックすると、大きなボックスのメイン画像が変更され、画像が大きく表示されます。

私が試したこと：

onclicks データ

ここに私のコード全体があります:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Banana Peel</title>
<link href="../CSS/style.css" rel="stylesheet" type="text/css">


<script type="text/javascript" src="../Javascript/jquery.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="../Javascript/imagepanner.js"></script>

<script type="text/javascript" src="../Javascript/ProdPop.js"></script>

<script type="text/javascript">
function ImgSwitch1() {
document.swap.src='../Images/Prod1.jpg';
}

function ImgSwitch2() {
document.swap.src='../Images/Prod2.jpg';
}

function ImgSwitch3() {
document.swap.src='../Images/Prod3.jpg';
}

function ImgSwitch4() {
document.swap.src = '../Images/Men1.jpg';
}

function ImgSwitch5() {
document.swap.src = '../Images/Men1A.jpg';
}

function ImgSwitch6() {
document.swap.src = '../Images/Men1B.jpg';
}

function ImgSwitch7() {
document.swap.src = '../Images/women1.jpg';
}

function ImgSwitch8() {
document.swap.src = '../Images/kids1.jpg';
}


function switch1(div) {
if (document.getElementById('one')) {
var option=['one','two','three'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }
}
}
//
function switchImg(i){
document.images["wine"].src = i;

}
</script>


<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Benjamin Wright, Editor -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://www.javascriptsource.com -->

<!-- Begin
// Preload Images
var image0 = new Image(); image0.src = "../Images/Prod1.jpg";

var image1 = new Image(); image1.src = "../Images/Prod1.jpg"; onclick = switchImg("../Images/Prod1.jpg");
var image2 = new Image(); image2.src = "../Images/Prod1B.jpg"; onclick = switchImg("../Images/Prod1B.jpg");
var image3 = new Image(); image3.src = "../Images/Prod1C.jpg"; onclick = switchImg("../Images/Prod1C.jpg");


var image4 = new Image(); image4.src = "../Images/Men1.jpg";
var image5 = new Image(); image5.src = "../Images/Men1A.jpg";
var image6 = new Image(); image6.src = "../Images/Men1Bjpg";



var image7 = new Image(); image7.src = "../Images/Prod1.jpg"; onclick = switchImg("../Images/Prod1.jpg");
var image8 = new Image(); image8.src = "../Images/Prod1B.jpg"; onclick = switchImg("../Images/Prod1B.jpg");
var image9 = new Image(); image9.src = "../Images/Prod1C.jpg"; onclick = switchImg("../Images/Prod1C.jpg");


//  End -->
</script>
</head>

<body id="PicPopUp">    
<!-- TWO STEPS TO INSTALL CHANGE MULTIPLE IMAGES:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->
<!--------------->
<!--
<a href="#" onclick="image0.src='../Images/Men1.jpg'; image1.src='../Images/Men2.png'; image2.src='../Images/Men3.png';
image3.src='../Images/Men4.png';" 
>
<img name="image0" src="../Images/Prod1.jpg" width="100px" height="100px"></a>


<img name="image1" src="../Images/Prod2.jpg" border="1" width="100px" height="100px">
<img name="image2" src="../Images/Prod3.jpg" border="1" width="100px" height="100px">
-->
<!----------------------------------------------->

<!--------------------------------------------->


<div id="GalleryPopUp">
<div id="image-switch">
<div id="ZoomBoxContainer">
<div class="pancontainer">
<table id="ProdTable">
<tr>
<td colspan="3">
<div class="fright"><img src="../Images/Prod1.jpg" id="wine" height="350px" alt="" /></div>
</td></tr>
</table>
</div><!--end of class pancontainer-->
</div><!--end of ZoomBoxContainer-->


<div id="ProductDescription">
<!--img id="prodexit" src="../Images/prodexit.png"-->
<p id="ProdName5">
<b>STATUS QUO</b> / NAVY BLUE
</p>

<p id="ProdCode">
SRP: <b>PHP 310.00</b><br/>
CODE: <b>001</b>
</p>

<div id="ProdDescBG">
<p id="ProdDesc">Product Details:<br/>
<font color="#FFFFFF">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</font>
</p>
</div><!--end of ProdDescBG-->

<div id="colorbox1" onclick="switchImg('../Images/Prod1.jpg');
image1.src='../Images/Prod1.jpg'; image2.src='../Images/Prod1A.png';
image3.src='../Images/Prod1B.png';
">
</div><!--end of colorbox1-->

<div id="colorbox2" onclick="switchImg('../Images/Prod2.jpg');
image1.src='../Images/Prod2.jpg'; image2.src='../Images/Prod2B.jpg';
image3.src='../Images/Prod2C.jpg';
">
</div><!--end of colorbox2-->

<div id="colorbox4" onclick="switchImg('../Images/Prod3.jpg');
image1.src='../Images/Prod3.jpg'; image2.src='../Images/Prod3B.jpg';
image3.src='../Images/Prod3C.jpg';
">
</div><!--end of colorbox4-->

<div id="SelectSize">
<img id="prodselect" src="../Images/selectsize.png">
<select id="prodselectsize">
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div><!--end of SelectSize-->

<div id="SelectQuantity">
<img id="quantityselect" src="../Images/quantity.png"><input id="prodselectquantity" type="text" value=""></input>
</div><!--end of Selectquantity-->


<div id="StockStats">
<p id="StockStatus">
STOCK STATUS: <b>IN STOCK</b></p>
</div><!--end of StockStats-->


<div id="HomeEmail">
<a href="../HTML/Home.html"><img id="homeicon" src="../Images/home.png"></a>
<a href="mailto:sales@bananapeel.net"><img id="emailicon" src="../Images/email.png"></a>
<a href="../HTML/Cart.html" onmouseover="this.src='../Images/addviewcart2.jpg'"  onmouseout="this.src='../Images/addviewcart.jpg'" /><img id="addviewcart" src="../Images/addviewcart.jpg" onmouseover="this.src='../Images/addviewcart2.jpg'"  onmouseout="this.src='../Images/addviewcart.jpg'"></a>
</div><!--end of HomeEmail onmouseover="this.src='image2.gif'"
onmouseout="this.src='image1.gif'"-->



<!--div id="AddToViewCart">
</div><end of AddToViewCart-->

</div><!--end of ProductDescription-->

<div id="thumbnails">
<table id="ProdThumbs">
<tr>

<td style="margin-left:-2px;">
<a href="#n" name="image7" onclick="switchImg('../Images/Prod1.jpg');"><img id="ProdThumb1" name="image1" src="../Images/Prod1.jpg"></a>
</td>


<td style="margin-left:4px;">
<a href="#n" name="image8" onclick="switchImg('../Images/Prod1A.png');"><img id="ProdThumb2" name="image2" src="../Images/Prod1A.png"></a>
</td>



<td style="margin-left:4px;">
<a href="#n" name="image9" onclick="switchImg('../Images/Prod1B.png')"><img id="ProdThumb3" name="image3" src="../Images/Prod1B.png"></a>
</td>
</tr>
</table>
</div><!--end of thumbnails-->

</div>
<div class="clear"></div>
</div><!--End of Gallery-->
</body>
</html>
4

1 に答える 1

0

クリックしている間、実行時にsrcを変更できます

syntax: elementNode.setAttribute(name,value)

document.getElementById('something').setAttribute('src','image/men1.jpg');

更新しました：

<a href="#n" name="image9" onclick="switchImg('../Images/Prod1B.png',this)"><img id="ProdThumb3" name="image3" src="../Images/Prod1B.png"></a>

<script>
function switchImg(i,ev)
{
var ret_id=$(ev).children().attr('id');
//in javascript
document.getElementById(ret_id).setAttribute('src',i);
//in jquery
$('#'+ret_id).attr('src',i);
}
</script>
于 2012-11-28T04:20:56.610 に答える