Question

我创建了一个html文件，其中包含所有照片和另一个html文件，其中我只看到1个图像全尺寸。现在，如果我从第一个文件中单击一个图像，我希望将这些图像打开到第二个html页面，使用他想要使用javascript的第一个文件中的src。（是的，我知道我可以创建20个html文件，其中每个都有不同的照片，但我只想使用1个html文件）

文件1 =“index.html”：

 <a href="work_detail.html" ><img src="images/templatemo_image_01_big.jpg" alt="image" 
 width="100%" height="100%" id="pic1" onClick="hello();" /></a>

文件2 =“work_detail.html”：

 <a target="_parent"><img src="" alt="product" id="work" /></a>

JavaScript的：

 function hello(){
  var pic1 = document.getElementById('pic1').src;
 document.getElementById('work').src= pic1;
 }

如何使用JavaScript将第一个id与第二个id连接在不同的文件中？

Answer 1

我能想到的一个选择是让第二页作为url参数接收图像的来源。 Here是一篇描述如何使用javascript读取网址参数的帖子。

之后使用图像src并将其设置为第二个图像。您需要按顺序对url进行url编码。对于编码使用encodeURIComponent，如：

str = encodeURIComponent(imageSource);

您在接收页面中使用decodeURIComponent进行解码：

str = decodeURIComponent(uri_encode);

Answer 2

考虑PHP。

在php中它就像

将显示完整图像的页面

<?php
$src= isset($_GET['src']) ? $_GET['src'] : "default_image_url.ext";
$alt= isset($_GET['alt']) ? $_GET['alt'] : "default_alt";
echo "<img src='$src' alt='$alt'>";

现在，在主要的javascript页面上添加它

function GtU(url, alt){
 window.location.href="second_page.php?src="+url+"&alt="+alt;
}

在每个img标签中添加此项，＆lt; img src =“source”alt =“alt”onclick =“GtU（this.src，this.alt）”＆gt;实际上它的方式要好得多......只需要一点服务器端。它也可以用饼干来完成，但它会弄脏手

在1 html页面中打开大量图像

2 个答案: