Ex No: 15 IMAGE MAP APPLICATION USING JSP
Aim: To create a Image Map application using JSP.
Algorithm
Step1: Create a folder “Ex15” to place the HTML and JSP files.
Step2: Create files “index.html” and “ex15.jsp”.
Source Code

index.html


<!DOCTYPE html>
<html>
 <head>
  <title>JSP Image Maps</title> 
   <meta charset="UTF-8"> 
 </head>
 <style>
  header {
   text-align:center;
   height: 100px;
   background-color: DarkCyan;
   padding: 10px; 
   border-radius: 10px 10px 0px 0px;
  }
  footer {
   text-align:center;
   font-size: 12px;
   height: 50px;
   line-height: 50px;
   background-color: DarkCyan;
   padding: 10px; 
   border-radius: 10px;  
  }
  section{
   width: auto; 
   border: 2px solid gray;
   padding: 10px; 
   border-radius: 10px;
   margin:5px;
  }
  input{
   border-radius: 5px;
   margin: 5px;
  }
 </style>
 <body>  
  <header>
   <h1>JSP Image Maps</h1>  
  </header>  
  <article>
    <section>  
    <a href="ex15.jsp"> 
      <img src="PC.jpg" ismap> 
    </a> 
    </section>
  </article>
  <footer>
   Developed by K. Anbarasan
  </footer>
 </body>
</html>

ex15.jsp


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" %>
<%@ page import="java.lang.String" %>
<%@ page import="java.lang.*" %>
<!DOCTYPE html>
<html>
 <head>
  <title>JSP Image Maps</title> 
   <meta charset="UTF-8"> 
 </head>
 <style>
  header {
   text-align:center;
   height: 100px;
   background-color: DarkCyan;
   padding: 10px; 
   border-radius: 10px 10px 0px 0px;
  }
  footer {
   text-align:center;
   font-size: 12px;
   height: 50px;
   line-height: 50px;
   background-color: DarkCyan;
   padding: 10px; 
   border-radius: 10px;  
  }
  section{
   width: auto; 
   border: 2px solid gray;
   padding: 10px; 
   border-radius: 10px;
   margin:5px;
  }
  input{
   border-radius: 5px;
   margin: 5px;
  }
 </style>
 <body>  
  <header>
   <h1>JSP Image Maps</h1>  
  </header>  
  <article>
    <section>
    <%
      String obj;
      String[] val = request.getQueryString().split(",");
      int x,y;
      x = Integer.parseInt(val[0]);
      y = Integer.parseInt(val[1]);
      if((x>25&&x<180) && (y>30&&y<135))
        obj = "You have Clicked <b>Monitor</b>";
      else if((x>190&&x<260) && (y>35&&y<160))
        obj = "You have Clicked <b>CPU</b>";
      else if((x>5&&x<206) && (y>160&&y<184))
        obj = "You have Clicked <b>Keyboard</b>";
      else if((x>215&&x<265) && (y>165&&y<215))
        obj = "You have Clicked <b>Mouse</b>";
      else
        obj = "Click on the Image";
    %>    
     <p><%=obj%></p>
    </section>
  </article>
  <footer>
   Developed by K. Anbarasan
  </footer>
 </body>
</html>
Result: Thus Image Map application is created using JSP.