0

Hi guys,

Please help me out. I have a webpage in which there are multiple images. All i want is that when a user clicks on any image it gets displayed on the bottom left corner of the page and when second image is clicked it is displayed adjacent to the previous image and so on.

I can fetch the url's but dont know how to display images in javascript as an array which also implements css. Please help.....

2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by AleMonteiro
0

It would be something like this?

<html>
<head>
<script language="javascript">
	
	window.onload = function()
	{
		var divImages = getById('images');
		for(var i=0; i < divImages.children.length; i++)
		{
			divImages.children[i].onclick = function()
			{
				getById('images-list').innerHTML += '<img src="' + this.src + '" width="100" height="100" />';
			}
		}
	}
	
	function getById(id)
	{
		return document.getElementById(id);
	}
	
</script>
  
</head>
 
<body>
  
	<div id="images">
		<img src="http://cjsmedium.web.officelive.com/images/pink-floyd-backs-5000178.jpg" width="200" height="200" />
		<img src="http://i871.photobucket.com/albums/ab278/CrimsonBlade7/Dark_Side_of_the_Moon_by_megamanexe.png" width="200" height="200" />
		<img src="http://www.wallpaperbase.com/wallpapers/music/pinkfloyd/pink_floyd_8.jpg" width="200" height="200" />
		<img src="http://www.progarchives.com/progressive_rock_discography_covers/364/cover_20612192009.jpg" width="200" height="200" />
	</div>
	
	<hr />
	
	<div id="images-list">
	
	</div>
	
</body>
</html>

An observation: it'll only work after all images are loaded.

Hope it helps.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.