NAREN H NAREN H - 5 months ago 11
HTML Question

capture image clicked in one page and display the same in another page HTML

Newbie to HTML...creating a custom furniture website with custom design tab which helps in designing your own furniture..now i wanted to capture the image clicked(out of many) by user in my main.html page and display the selected image in secondary.html page when the user navigates to second page to select the color for the sofa...Need help!

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>

Leo Leo
Answer

Page 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>

Page 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>

EDIT

In Page1 onclick event we are simply calling the filename() function. This function in turn is appending the imageId in the url of the second page. Now, when you land on the second page, the $(document).ready(function(){}) is taking the imageId from the url and setting the SRC of the <IMG> tag with the image 1.png.

Comments