Post
Ask Question

Develop an Image Form in JSP


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


Similar Articles