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

Code:

<!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>

Thread: Image entrance

Thread Tools

Search Thread

Image entrance

Bookmarks

Bookmarks

Posting Permissions