how to Display HTMLs, PDFs, Imges inside same JSP page

I am new to Java/HTML/JSP. I have a JSP page(designed using Eclipse running Apache Tomcat server) which contain a table. On the left side of table I have several href links like HTMLs, PDFs, Images. I have created the HTMLs folder, PDFs fodler and Images folder inside WebContent Directory in project's workspace and stored the respective files.

Now when user clicks these links I want the respective file stored in directory to be displayed on right side within same page rather navigating to other page or downloading it.

Can anyone suggest me how can I achieve that. Here is my code

<body>
<table style="width:1000px;" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1 style="margin:0;padding:0;">Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;vertical-align:top;">
<b><a href="/HTMLs/login.html" >HTML Files</a></b><br>
<a href="/PDFs/pdf file.pdf" >PDfs</a><br>
<a href="/Images/Tulips.jpg" >Images</a><br>
<a href="/rar/a.zip" >Rars</a>
</td>
<td style="background-color:#eeeeee;height:1000px;width:400px;vertical-align:top;">
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
</td>
</tr>
</table>
</body>

Solution

Give the iframe a name

<iframe id="youriframe"name='youriframe' src=''></iframe>

and add target='youriframe' to your links e.g.:

<a href='../html_folder/yourfile.html' target='youriframe' class="link">Click!</a>
<a href='../pdf_folder/yourfile.pdf' target='youriframe' class="link">Click!</a>

Give all the links that you need to display a class called link as I have done in the code above

Dont think zip will work.. In your jquery

$('.link').click(function(e) {
    e.preventDefault(); // if you have a URL in the link
    var addressValue = $(this).attr("href");
    $("#youriframe").attr('src',addressValue);
    });
});

This should work for you