by Rishi on Monday, 27 July 2009
Building Dynamic Shadows for an Image Gallery with JavaScript and CSS - Source code of the image sha
This is the one of the best way to make Dynamic shadows for an image gallery . Here is the required code:
<!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: 4px;
left: 4px;
width: 265px;
height: 152px;
background: #b4b4b4;
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.parentNode.className=='container'){
//images.parentNode.style.zIndex=10-i;
// create shadow
var shadow=document.createElement('div');
shadow.className='shadow';
// append shadow to image
images.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="/Examples/EVON-LOGO_150.jpg" width="263" height="150" class="absimage" /></div>
<div class="container"><img src="/wallpaper/MICKEY_MOUSE_CHRISTMAS_LEFT.BMP" width="263" height="150" class="absimage" /></div>
<div class="container"><img src="/wallpaper/MICKEY_MOUSE_CHRISTMAS_LOGO.GIF" width="263" height="150" class="absimage" /></div>
</body>
</html>
|
My Blog Title
|