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

by


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 = "https://stackoverflow.com/questions/37542650/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.

2

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