Question

您好我正在尝试制作一个简单的JS图像查看器，它需要做的就是将我的mainImage的图像源更改为我从图库中单击的图像源。由于某种原因它不起作用任何想法？我刚刚离开了css，这对于你来看画廊是必要的，这就是为什么它看起来有点疯狂。当我在此处粘贴代码并单击图像时，它会给我一个错误，我猜是问题所在。还要忽略jscript的链接缺失的事实，因为我只是将其内联以排除它只是没有正确的通信。

非常感谢任何帮助。这是一个指向页面的链接，因为它现在处于非常早期的开发阶段，所以它不是很好http://stevengamedev.com/page5.html

@charset "utf-8";
/* CSS Document */

#containerImg{
	width:100%;	
	position: fixed;	
	top: 0px;
	bottom: 0px;
}

#Gallery{
	width:100%;
	position: fixed;	
	top: 0px;
	bottom: 0px;
	z-index: -7;
	background-color:;
}

#padding{
	width:25%;
	height:100%;
	background-color:;
	float: left;
}

#padding2{
	width:18.75%;
	height:100%;
	background-color: ;
	float: left;
}

#boundry{
	background-color: ;
	width:50%;
	right: 0px;
	height: 100%;
	float: left;
	margin-left: auto;
	align-content: center;
}

#mainImage{
	float:left;
	width: 90%;
	height: auto;
	margin-left: 10%;
	margin-top: 10%;
	margin-right: auto;
	background-color:rgba(0,0,0,0.65) ;
	align-content: center;
}

#imagedescription{
	color: white;
}

#contentcontainerimage{
	width:75%;
	margin-left: 25%;		
	height:100%;
	z-index: 2;	
	float: left;
	overflow-y: auto;
	background-color: ;
	z-index: inherit;
}

#Gallerybounds{
	float: left;
	height: auto;
	z-index: inherit;
}

#Imagebounds{
	float:left;
	width: 25%;
	height: 100%;
	padding-left: ;
	z-index: inherit;
	background-color: rgba(0,0,0,0.50);
}

#Imagebounds img{
	margin-left: 5%;
}

.gallery{
	
}

.imgStyle{
	margin:auto;
	align-content: center;
	margin-bottom: 20px;
	float: left;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Steven game design</title>
<link rel="stylesheet" type="text/css" href="style3.css"/>
<link rel="stylesheet" type="text/css" href="Image.css"/>
<link type="text/javascript" href=""/>
</head>
<div id="navigation">
<div id="navcontent">
<div id="icon">
	<img src="images/softwares/nav.png">
</div>
<div id="bodycontainer">
	<div class="navigationbody"></div>
	<div class="navigationbody">
	<a href="home.html">Home</a>
	</div>
	<div class="navigationbody">
	<a href="page2.html">About</a>
	</div>
	<div class="navigationbody">
	<a href="page3.html">Blog</a>
	</div>
	<div class="navigationbody">
	<a href="page4.html">Videos</a>
	</div>
	<div class="navigationbody">
	<a href="page5.html">Pictures</a>
	</div>
	<div class="navigationbody">
	<a href="page6.html">Contact</a>
	</div>
</div>
</div>
</div>
<body>
	<div id="Gallery">
	<div id="padding"></div>
	<div id="padding2"></div>
		<div id="boundry">	
		<div id="mainImage"><img id ="mainImg" src="images/background/bridge4.jpg" alt="bridge" width="100%" height="auto">
		<div id="imagedescription">
		<h1>description!</h1>
		<a>this is a description of the picture etc! lots more words need more words words words words words words.</a>
		</div>
		</div>	
	</div>	
		</div>
	<div id="containerImg">
		
		<div id="contentcontainerimage">
		<div id="Gallerybounds">
		<div id="Imagebounds" onClick="changeImage(event)">
		
		<img  src="images/background/bridge4.jpg" width="90%" height="auto"/>
		
		<img  src="images/Blog/help6.png" width="90%" height="auto"/>
		
		<img  src="images/background/bridge4.jpg" width="90%" height="auto"/>
		
		<img  src="images/background/bridge4.jpg" width="90%" height="auto"/>
		
		<img  src="images/background/bridge4.jpg" width="90%" height="auto"/>
		
		<img  src="images/background/bridge4.jpg" width="90%" height="auto"/>
		
		<img  src="images/background/bridge4.jpg" width="90%" height="auto"/>
		
		<img  src="images/background/bridge4.jpg" width="90%" height="auto"/>
		
		<img  src="images/background/bridge4.jpg" width="90%" height="auto"/>
		
		<img  src="images/background/bridge4.jpg" width="90%" height="auto"/>
		
		</div>
		</div>
	</div>
	</div>
	<script type="text/javascript">
		function changeImage(event) {
			event = event || window.event;
			
			var targetElement = event.target || event.srcElement;
			
			if (targetElement.tagName == IMG){
			document.getElementById("mainImg").src = targetElement.getAttribute("src");
			}
		}
	</script>
</body>
</html>

Answer 1

尝试将IMG包装在双引号或单引号中，以便if语句条件为：

if (targetElement.tagName == 'img') {
    document.getElementById("mainImage").src = targetElement.getAttribute("src");
}

为什么画廊不起作用？

1 个答案: