Home arrow JavaScript arrow Page 4 - Building Dynamic Shadows for an Image Gallery with JavaScript and CSS
JAVASCRIPT

Building Dynamic Shadows for an Image Gallery with JavaScript and CSS


If you're looking for a way to get realistic shading effects on your web site with some JavaScript and CSS, you've come to the right place. This third part of a three-part series applies what you learned in the first two parts to adding dynamic shadows to a simple image gallery.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
July 13, 2009
TABLE OF CONTENTS:
  1. · Building Dynamic Shadows for an Image Gallery with JavaScript and CSS
  2. · Review: key concepts for creating dynamic shadows
  3. · Working with an image gallery
  4. · Source code of the image shading application

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Building Dynamic Shadows for an Image Gallery with JavaScript and CSS - Source code of the image shading application
(Page 4 of 4 )

As I stated in the section that you just read, here is the complete source code corresponding to this JavaScript dynamic shading application:  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Adding dynamic shadows to images with JavaScript</title>

<style type="text/css">

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: bold 14pt Arial, Helvetica, sans-serif;

color: #000;

text-align: center;

}

.container{

position: relative;

width: 263px;

height: 150px;

margin-bottom: 20px;

margin-left: auto;

margin-right: auto;

z-index: 2;

}

.absimage{

position: absolute;

top: 0px;

left: 0px;

border: 1px solid #999;

z-index: 1;

}

.shadow{

position: absolute;

top: 6px;

left: 6px;

width: 265px;

height: 152px;

background: #A7A7A7;

z-index: 0;

}

</style>

<script type="text/javascript">

// add shadows to images

function addImageShadows(){

var images=document.getElementsByTagName('img');

if(!images){return};

for(var i=0;i<images.length;i++){

if(images[i].parentNode.className=='container'){

//images[i].parentNode.style.zIndex=10-i;

// create shadow

var shadow=document.createElement('div');

shadow.className='shadow';

// append shadow to image

images[i].parentNode.appendChild(shadow);

}

}

}

// add dynamic shadows to images after web page has been loaded

window.onload=function(){

if(document.createElement&&document.getElementById&&document. getElementsByTagName){

addImageShadows();

}

}

</script>

</head>

<body>

<h1>Adding dynamic shadows to images with JavaScript</h1>

<div class="container"><img src="img1.jpg" width="263" height="150" class="absimage" /></div>

<div class="container"><img src="img2.jpg" width="263" height="150" class="absimage" /></div>

<div class="container"><img src="img3.jpg" width="263" height="150" class="absimage" /></div>

</body>

</html>

 

As usual, you're invited to modify all of the code samples developed in this article, so you can extend their functionality and eventually create more efficient scripts for producing dynamic shadows. Happy coding!

Final thoughts

Although it's hard to believe, we've come to the end of this series. However, I hope that all the material published here will provide you the right pointers to start building dynamic shadows with the DOM and some basic CSS styles. Indeed, all of the approaches demonstrated in this series are very easy to learn and implement.

See you in the next web development tutorial!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 4 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials