Solved

Displaying Images in Jsp

Posted on 2011-09-13
9
319 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: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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 

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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Embedd an image or live dashboard into Slack 1 50
JSON help 8 42
Save data in two Database, Asp 2 67
Form submit takes only for one form 23 48
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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 …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

739 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