Solved

Displaying Images in Jsp

Posted on 2011-09-13
9
317 Views
Last Modified: 2012-06-21
Hi Experts...
I have three images that i need to display in a jsp page.
I want the images to be overlying on each other as shown in the sample image below.
And when a user clicks any of the section of the image the image pops up full size and when the user removes the mouse the image goes back to its original place.
Please help...
sample.bmp
0
Comment
Question by:gaugeta
  • 5
  • 4
9 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36528032
Its more of a css/html problem.
All you need is use position absolute to overlay the images on top of each other
check this
http://stackoverflow.com/questions/1183633/can-you-overlay-a-transparent-div-on-an-image
0
 

Author Comment

by:gaugeta
ID: 36528071
@gurvinder372:But i want the initail appearence to be a shrinked image and only when the user clicks i want the image to be displayed in its actual size.
How do i achieve this.
Please help...
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36528108
check this code (change the image names :))
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
		
	</script>
	<style>
		#image1
		{
			width:100px;
			height:100px;
			left:10px;
			top:10px;
			position:absolute;
			z-index:1;
			opacity:0.4;
			filter:alpha(opacity=40); 
		}
		#image2
		{
			width:100px;
			height:100px;
			left:60px;
			top:60px;
			position:absolute;
			z-index:1;
			opacity:0.4;
			filter:alpha(opacity=40); 
		}
		#image3
		{
			width:100px;
			height:100px;
			left:120px;
			top:120px;
			position:absolute;
			z-index:1;
			opacity:0.4;
			filter:alpha(opacity=40); 
		}
	</style>
</HEAD>

<BODY>
	<img src="lastscan.jpg" id="image1" onclick="window.open('lastscan.jpg')"/>
	<img src="lastscan.jpg" id="image2" onclick="window.open('lastscan.jpg')"/>
	<img src="lastscan.jpg" id="image3" onclick="window.open('lastscan.jpg')"/>
</BODY>
</HTML>

Open in new window

0
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 

Author Comment

by:gaugeta
ID: 36528163
@gurvinder372:The images cannot be seen stacked on top of each other.There is just an outline with a into mark at the top right of the three images.
When i click them i can see the real image.
But not on the first page.
Please help...
0
 

Author Comment

by:gaugeta
ID: 36528200
@gurvinder372:Sorry the images are displaying.
How do i enlarge the image to its original size on onmouseover and return the image back to its shrinked size onmouseout events.
Please help...
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 36528235
check this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
		
	</script>
	<style>
		#image1
		{
			width:100px;
			height:100px;
			left:10px;
			top:10px;
			position:absolute;
			z-index:1;
			opacity:0.4;
			filter:alpha(opacity=40); 
		}
		#image1:hover, #image2:hover, #image3:hover
		{
			width:200px;
			height:200px;
			z-index:1;
			opacity:1;
			filter:alpha(opacity=100); 
		}
		#image2
		{
			width:100px;
			height:100px;
			left:60px;
			top:60px;
			position:absolute;
			z-index:1;
			opacity:0.4;
			filter:alpha(opacity=40); 
		}
		#image3
		{
			width:100px;
			height:100px;
			left:120px;
			top:120px;
			position:absolute;
			z-index:1;
			opacity:0.4;
			filter:alpha(opacity=40); 
		}
	</style>
</HEAD>

<BODY>
	<img src="lastscan.jpg" id="image1" onclick="window.open('lastscan.jpg')"/>
	<img src="lastscan.jpg" id="image2" onclick="window.open('lastscan.jpg')"/>
	<img src="lastscan.jpg" id="image3" onclick="window.open('lastscan.jpg')"/>
</BODY>
</HTML>

Open in new window

0
 

Author Comment

by:gaugeta
ID: 36528359
@gurvinder372:How do i enlarge the image to its original size on onmouseover and return the image back to its shrinked size onmouseout events.
Please help...
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36528386
Is above code given by me not showing the enlarged image?
Or else you need to have the dedicated hover selector for each image with hard coded original width and height
0
 

Author Comment

by:gaugeta
ID: 36528419
@gurvinder372:Thanks for the response.I've added the same.
0

Featured Post

Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
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 tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

777 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