I want to display a different image in JSP on clicking a different links in the same JSP. Can any one please help me in displaying image with respect to the DIV id.

here are my links bellow

<table class="contentTable" cellspacing=1 cellpadding=0 border=0 >
        <tr class="altRow1">

            <th class="fieldName" nowrap="nowrap" align="center" colspan="<%=metricCols %>">Business statistics </th>
        </tr>

<tr>

<div class="greyBorderBox bottomSpacer10">

<ul class="noBullet" >

             <li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app1(this.id);" id="id_1">link1</a></li>
                <li class="nav-off" ><a  class="headerNav-myworkspace" href="#" onClick="show_app2(this.id);" id="id_2">link2</a></li>

</ul></td></tr>

below are the two DIV parts to be displayed

<tr class="altRow1">

<!-- if link1 is clicked this part should be displayed -->

    <%if(bus.exists())){ %>
        <div id="id1"> <td class="fieldName" style="vertical-align:top;" id="id1">
                      <a href="C:\Users\Desktop\graph.GIF" target="_blank"><img height="240px" src= "C:\Users\Desktop\graph.GIF" style="align:'center';" ></img></a>
            </td></div>

<!-- if link2 is clicked this part should be displayed -->

<% }else {  %>

                <div id="id2"><td class="fieldName" style="vertical-align:top;">
                      <a href="C:\Users\Desktop\Capture.GIF" target="_blank"><img height="240px" src= "C:\Users\Desktop\Capture.GIF" style="align:'center';" ></img></a>

                </td>
            <%
            }

</div>  </tr>

Put user defined attribute inside link and send only this param as a references like so :

<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app(this);" id="id_1" data-target="id1">link1</a></li>
<li class="nav-off" ><a  class="headerNav-myworkspace" href="#" onClick="show_app(this);" id="id_2" data-target="id2">link2</a></li>

One more thing, id should be unique(remove id="id1" inside img tag), change into this :

<div id="id1" style="display:none">
 <td class="fieldName" style="vertical-align:top;" >
 <a href="C:\Users\Desktop\graph.GIF" target="_blank"><img height="240px" src= "C:\Users\Desktop\graph.GIF" style="align:'center';" ></img>
 </a>
 </td>
</div>

For initial state, just hidden those two div using style="display:none", see above code. Same applied for second div.

And JS would be :

 <script>
 function show_app(e){
   var target = $(e).data('target');
   $('#'+target).toggle();
   // ... another rest of code
 }
 </script>