?
Solved

Displaying Images in Jsp

Posted on 2011-09-13
9
Medium Priority
?
321 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

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:
Gurvinder Pal Singh earned 2000 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:Gurvinder Pal Singh
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

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

752 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