Solved

Displaying image in jsp doubt

Posted on 2011-09-14
2
276 Views
Last Modified: 2012-05-12
Hi Experts...
I have three images that i need to display in a comperssed format and on clicking one of the images i need to display in the display region as shown below.
Please help... sample template
0
Comment
Question by:gaugeta
2 Comments
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 36540732
try this one
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		#leftColumn
		{
			width:100px;
			height:400px;
			float:left;
		}
		#leftColumn .imageThumbnail
		{
			width:110px;
			height:110px;
			border:1px solid #000;
			margin-bottom:25px;
		}

		#leftColumn .imageThumbnail img
		{
			width:110px;
			height:110px;
		}

		#displayArea
		{
			width:400px;
			height:400px;
			float:left;
			margin-left:25px;
			border:1px solid #000;
		}
		#displayArea img
		{
			width:400px;
			height:400px;
		}
	</style>
	<script>
		function displayInMainArea(thisObj)
		{
			document.getElementById("displayArea").innerHTML = "<img src='" + thisObj.getAttribute("src") +"'>";
		}
	</script>
</HEAD>

<BODY>
	<div id="container">
		<div id="leftColumn">
			<div class="imageThumbnail"><img src="lastscan.jpg" onclick="displayInMainArea(this)"/></div>
			<div class="imageThumbnail"><img src="lastscan.jpg" onclick="displayInMainArea(this)"/></div>
			<div class="imageThumbnail"><img src="lastscan.jpg" onclick="displayInMainArea(this)"/></div>
		</div>
		<div id="displayArea"></div>
	</div>
</BODY>
</HTML>

Open in new window

0
 

Author Comment

by:gaugeta
ID: 36540782
@gurvinder372:Thanks a lot.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now