PDA

View Full Version : Image entrance



kwest
01-09-2006, 01:26 AM
I am trying to locate a script to have an image start out very small and gradually increase on the page until it is of full size where it will remain until they click on it to enter into the site. Does anyone know one. Thank you so much.

jscheuer1
01-09-2006, 11:14 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Expanding Image - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
margin-top: expression(document.documentElement.clientHeight/2-th/2-15+'px');
}
#loading {
display:none;
}
a {
text-decoration:none;
}
</style>
<script type="text/javascript">

/*Expanding Image Script John Davenport Scheuer
username jscheuer1 http://www.dynamicdrive.com/forums
this notice must remain for legal use
visit www.dynamicdrive.com for 100's of DHTML scripts
*/

var picNum=1 //Set to picture number (use 1 for the first picture in your markup)

//////////////////Stop Editing//////////////

var tw, th, hAdj=0, flag=factor=1;
document.write('<style type="text/css">\
#pic {\
visibility:hidden;\
}\
#loading {\
display:inline;\
}\
<\/style>')
function expandPic(){
flag=0
factor++
var obj=document.images[picNum-1]
obj.width=factor/100*tw
obj.height=factor/100*th
obj.style.marginTop=(100-factor+1)/200*th+hAdj+'px'
obj.style.marginleft=(100-factor+1)/200*tw*-1+'px'
if (factor<100)
setTimeout("expandPic();", 40)
else
flag=1
}
onload=function(){
if (!document.documentElement.filters)
onresize=adjustHeight;
var obj=document.images[picNum-1]
tw=obj.width
th=obj.height
obj.height=obj.width=0
document.getElementById('loading').style.display='none'
obj.style.visibility='visible'
if (!document.documentElement.filters)
adjustHeight();
expandPic();
}
function adjustHeight(){
hAdj=window.innerHeight? window.innerHeight/2-th/2-10 : document.documentElement.clientHeight/2-th/2
if(flag&&document.images[picNum-1].style.marginTop!=='')
document.images[picNum-1].style.marginTop=hAdj+'px'
}
</script>
</head>
<body>
<!-- Adjust noscript's division's margin to suit (for non-javascript browsers) -->
<noscript><div style="margin-top:5%;"></div></noscript>
<div id="container" align="center">
<a href="main.htm"><span id="loading">Please Wait while image loads or <u>click here</u> to skip Intro . . .</span>
<img galleryimg="no" id="pic" src="../1st.jpg" width="750" height="500" border="0"></a>
</div>
</body>
</html>