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.....
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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.
