在Javascript上的onclick语句上显示点击图像

-1

首先，请记住，我不擅长Javascript。我几天前才了解到这一点。我想要的页面：当用户点击调色板时，图像会改变。 [我已经完成了这个] 但是当用户点击前。灰色图像的缩略图，然后大盒子上的主图像应该改变并显示更大的图像视图。在Javascript上的onclick语句上显示点击图像

事情我已经尝试：

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:[email protected]"><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>

来源

2012-11-28 Shizuka Aoyama

同时单击可以改变在运行时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-28 04:20:56 Dineshkani

：我将在哪里放置？你能给我提供一个示例代码使用我的代码上面？因为我试过了，它没有奏效。 –

你的代码没有工作。我还评论了原来的switchImg功能，但仍然没有为我工作。 –

在Javascript上的onclick语句上显示点击图像

回答

相关问题