捕获的图像点击一个页面，并显示在另一个页面相同HTML

问题描述：

新手到HTML ...创建自定义设计选项卡，这有助于设计自己的家具的自定义家具网站..现在我想捕获点击图像（在我的main.html页面中用户），并在用户导航到第二页以选择沙发的颜色时，在secondary.html页面中显示所选图像...需要帮助！捕获的图像点击一个页面，并显示在另一个页面相同HTML

main.html中

<div class="red"> 
    <div class="blue">4 Seater <img src="images/4_Seater_Default.jpg" alt="4_Seater_Default.jpg" onclick="showImage('4_Seater_Default.jpg');" /></a></div> 
    <div class="blue">3 Seater<img src="images/3_Seater_Default.jpg" alt="3_Seater_Default.jpg" onclick="showImage('3_Seater_Default.jpg');" /></a></div> 
    <div class="blue">2 Seater<img src="images/2_Seater_Default.jpg" alt="2_Seater_Default.jpg" onclick="showImage('2_Seater_Default.jpg');" /></a></div> 
    <div class="blue">1 Seater<img src="images/1_Seater_Default.jpg" alt="1_Seater_Default.jpg" onclick="showImage('1_Seater_Default.jpg');" /></a></div>

答

第1页：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Page 1</title> 
<script type="text/javascript"> 
function filename(){ 
    var fullPath = document.getElementById("image").src; 
    var filename = fullPath.replace(/^.*[\\\/]/, ''); 
    var fileid = filename.split("\.")[0];; 
    window.location.href = "test2.jsp?imgid="+fileid; 
} 
</script> 
</head> 
<body> 
<IMG id="image" SRC="images/1.png" width="100px" alt="Logo" onclick="filename();"> 
</body> 
</html>

第2页：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Page 2</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 
var imageId = location.search.split('imgid=')[1]; 
document.getElementById('image').src = "images/"+imageId+".png"; \\it will set the value of the img src to 1.png which is passed from the previous page 
}); 
</script> 
</head> 
<body> 
<IMG id="image" SRC="images/2.png" width="400px"> 
</body> 
</html>

编辑

在第1页onclick事件，我们简单地调用filename()功能。该函数依次将imageId附加到第二页的url中。现在，当您登录第二页时，$(document).ready(function(){})正在从url中获取imageId并将<IMG>标记的SRC设置为图像1.png。

嗨，Leo ..我可以通过'onclick'函数显示

NARENH ...请参阅我答案的编辑部分。 – Leo

答

试试下面的代码：

function showImage(imagePath){ 

window.location.href= "www.yourdomain.com/yourDirectory/path/showImage?image_path="+imagePath; 
}

，并在上面的网址，你可以使用此路径来显示图像+任何其他内容，无论是必需的。

你能解释一下在哪里放置这段代码，并使用var + imagePath？ –

这段代码不过是一个javascript函数，您可以在html页面的脚本块中添加它。正如你已经在图像上添加了一个onclick函数，它是一个相同的处理程序 – abhinsit

捕获的图像点击一个页面，并显示在另一个页面相同HTML

相关推荐