2012-05-23 108 views
0

首先我对JavaScript是全新的,但我有一些HTML/CSS的经验。我一直在试图为一个网站创建一个html/javascript图片库; (在PHP中执行操作可能会容易得多,但出于安全原因,Web协调员在我们的服务器上禁用了PHP)。更改全局变量onclick/img源更新与JavaScript变量

无论如何我所拥有的是一个页面,分别显示了不同的div和2个iframe中的Album-list,Album-browser和Photo-viewer。我已经设置好了,当有人点击专辑列表中的相册时,相册浏览器部分会打开一个页面(iframe:“浏览器框架”,显示特定相册中所有图像的缩略图)。我一直在试图设置它,以便当有人点击相册浏览器中的图像时,图像将出现在照片查看器部分(iframe:“查看器帧”,显示照片本身)。

我不想在观众帧照片的比设定尺寸为观众帧所以我创建了一个页面的浏览器框架是将图像放大在一类组尺寸(在样式表中所定义的)如下一个div:

...<body> 
<div class="photoview"> 
<img id="viewed_image" class="large" src="images/album1/1.jpg" />    
</div> 
</body>... 

我然后创建了一个脚本,更新的图片src到一个变量:image_to_be_viewed并把它称为图像changer.js

// JavaScript Document 
{ 
var image_to_be_viewed="images/album1/1.jpg"; 
document.getElementById("viewed_image").src=image_to_be_viewed; 
} 

,并增加了脚本的浏览器框架页,因此它看起来像:

...<body> 
<div class="photoview"> 
<img id="viewed_image" class="large" src="images/album1/1.jpg" /> 
<script src="image-changer.js"></script>    
</div> 
</body>... 

现在我想的画廊工作,以便在浏览器框架中加载的页面中,每当点击一个图片,如下“image_to_be_viewed”全局变量的值会被改为点击图片来源:

<body> 
<div class="photobrowse"> 
     <img class="medium" src="images/album1/1.jpg" onClick="image_to_be_viewed='images/album1/1.jpg'"/> 
     <img class="medium" src="images/album1/2.jpg" onClick="image_to_be_viewed='images/album1/2.jpg'"/> 
     <img class="medium" src="images/album1/3.jpg" onClick="image_to_be_viewed='images/album1/3.jpg'"/> 
</div> 
</body> 

它不工作....

我工作的画廊是http://ptc.tamu.edu/test/gallery_directory/test_gallery.html 的一切行动在观众帧作品选定图片的加载(我运行在上默认加载图片1,2,3点击数事件在浏览器框架页)(默认PIC的4和5只需加载图像中的iframe中,但没有办法调整它的大小太大而被切断,我不希望出现这种情况)

我一直在努力一整天,我确信我在这里做错了事,但我无法弄清楚究竟是什么。我有一种感觉它与改变全局变量做的:image_to_be_viewed浏览器框架的页面,但我想与专家,而不是像一只无头鱼扑腾确认。我将继续尝试解决这个问题,但我想也许有一些专家的帮助会加快这个过程。

回答

0

什么onclick触发应该是一个JavaScript函数调用。

例如onclick="changeImg('images/album1/1.jpg')"

而且功能本身就应该是这样的

function changeImg (image_to_be_viewed) { 
    document.getElementById("viewed_image").src = image_to_be_viewed; 
} 

顺便说一句,你应该学会工作之前,更多的JavaScript一点点真实的东西。我推荐这个book

0

谢谢我让它工作!我认为changeImg函数是针对错误的文档/错误框架,我通过更改js脚本来修复它:

function changeImg (image_to_be_viewed) { 
window.parent.viewer_frame.document.getElementById("viewed_image").src = image_to_be_viewed; 
}