• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 328
  • Last Modified:

Displaying Images in Jsp

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
gaugeta
Asked:
gaugeta
  • 5
  • 4
1 Solution
 
Gurvinder Pal SinghCommented:
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
 
gaugetaAuthor Commented:
@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
 
Gurvinder Pal SinghCommented:
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
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
gaugetaAuthor Commented:
@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
 
gaugetaAuthor Commented:
@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
 
Gurvinder Pal SinghCommented:
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
 
gaugetaAuthor Commented:
@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
 
Gurvinder Pal SinghCommented:
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
 
gaugetaAuthor Commented:
@gurvinder372:Thanks for the response.I've added the same.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now