Solved

Displaying Images in Jsp

Posted on 2011-09-13
9
320 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
MS Dynamics Made Instantly Simpler

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

 

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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

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. …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

717 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