捕獲的圖像點擊一個頁面，並顯示在另一個頁面相同HTML

-6

新手到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>

來源

2016-05-31 NAREN H

第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。

來源

2016-05-31 11:01:18 Leo

嗨，Leo ..我可以通過'onclick'函數顯示

NARENH ...請參閱我答案的編輯部分。 – Leo

試試下面的代碼：

function showImage(imagePath){ 

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

，並在上面的網址，你可以使用此路徑來顯示圖像+任何其他內容，無論是必需的。

來源

2016-05-31 10:11:21 abhinsit

你能解釋一下在哪裏放置這段代碼，並使用var + imagePath？ –

這段代碼不過是一個javascript函數，您可以在html頁面的腳本塊中添加它。正如你已經在圖像上添加了一個onclick函數，它是一個相同的處理程序 – abhinsit

捕獲的圖像點擊一個頁面，並顯示在另一個頁面相同HTML

回答

相關問題