0

首先，我对 Javascript 完全陌生，但我有一些 HTML/CSS 经验。我一直在尝试为网站创建一个 html/javascript 图片库；（在 PHP 中可能会容易得多，但出于安全原因，Web 协调器在我们的服务器上禁用了 PHP）。

无论如何，我所拥有的是一个页面，分别在不同的 div 和 2 个 iframe 中显示专辑列表、专辑浏览器和照片查看器。我进行了设置，以便当有人单击专辑列表中的专辑时，会在专辑浏览器部分中打开一个页面（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并将其命名为 image-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 直到在查看器框架中加载所选图片的所有内容（我正在运行 onlick 事件在浏览器框架页面中默认加载图片 1、2、3 ）（默认图片 4 和 5 只是将图像加载到 iframe 中，但无法调整大小，它太大并被切断，我不想要那）

我已经工作了一整天，我确定我在这里做错了什么，但我无法弄清楚它到底是什么。我感觉这与更改全局变量有关：浏览器框架页面中的image_to_be_viewed但我想与专家确认，而不是像无头鱼一样四处乱窜。我将继续尝试解决这个问题，但我想也许有一些专家的帮助会加快这个过程。

4

2 回答 2

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。我推荐这本书

于 2012-05-23T23:58:43.703 回答
0

谢谢你，我让它工作了！我认为 changeImg 函数的目标是错误的文档/错误的框架，我通过将 js 脚本更改为：

function changeImg (image_to_be_viewed) {
window.parent.viewer_frame.document.getElementById("viewed_image").src = image_to_be_viewed;
}
于 2012-05-25T18:55:15.587 回答