This is the next article in the series of image control. In this article, I am going to develop an application for making an image form. In which if we click on the different part of the image then it shows the different output. To develop this application we follow the following steps.
Step 1: Create a New Project.
In this step we select New Project option from file menu.
![create new project.jpg]()
Step 2: Choose Project.
In this step we select web application from Java web option and then click on the next button.
![select new web application.jpg]()
Step 3: Name and Location.
In this step we given it a specific name and set a specific location and click on the next button.
![name and location.jpg]()
Step 4: Server and Setting.
We select a specific server for this application and click on the next button.
![server and setting.jpg]()
Step 5 : Select Framework.
There is no need to select any framework for this application; just click on the finish button.
![selectframework.jpg]()
Step 6: Create JSP file.
We create one JSP file for this application
![create new jsp file.jpg]()
index.jsp
<HTML>
<HEAD>
<TITLE>Using Image As Maps</TITLE>
</HEAD>
<BODY BGCOLOR="cyan">
<H1>Using Image As Maps</H1>
<FORM ACTION="formAction.jsp" METHOD="POST">
<INPUT TYPE="IMAGE" NAME="imagemap" SRC="demoImage.jpg">
</FORM>
</BODY>
</HTML>
formAction.jsp
<HTML>
<HEAD>
<TITLE>Reading Image Controls</TITLE>
</HEAD>
<BODY>
<% int x = Integer.parseInt(request.getParameter("imagemap.x"));
int y = Integer.parseInt(request.getParameter("imagemap.y"));
%>
<% if(x > 16 && x < 127
&& y > 39 && y < 61) {
%>
<jsp:forward page="A.html" />
<%
}
%>
<% if(x > 98 && x < 209
&& y > 104 && y < 126) {
%>
<jsp:forward page="B.html" />
<%
}
%>
<% if(x > 62 && x < 173
&& y > 71 && y < 93) {
%>
<jsp:forward page="C.html" />
<%
}
%>
<% if(x > 411 && x < 522
&& y > 35 && y < 57) {
%>
<jsp:forward page="D.html" />
<%
}
%>
<% if(x > 360 && x < 471
&& y > 67 && y < 89) {
%>
<jsp:forward page="E.html" />
<%
}
%>
<% if(x > 328 && x < 439
&& y > 98 && y < 120) {
%>
<jsp:forward page="F.html" />
<%
}
%>
</BODY>
</HTML>
Step 7: Compile and Run the application.
Now we compile the application and then run it on the server and find the following output.
Output
index.jsp
![index.jsp.jpg]()
formAction.jsp
![formaction.jsp.jpg]()
Resources related to this article