PDA

View Full Version : Help!



Gitten
03-21-2008, 09:04 PM
I want to use a script so when you enter the site a picture will be zoomed in.
From no picture to full picture.
Thank you for helping!
Gitten:)

coothead
03-22-2008, 12:01 PM
Hi there Gitten,

you can see an example here...

http://mysite.orange.co.uk/azygous/sm_to_lrg.html
...and the code here...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>image grow to fill page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
background-color:#000;
}
#container {
position:absolute;
left:50%;
top:50%;
width:0;
height:0;
overflow:hidden;
}
#container img {
width:100%;
height:100%;
}
</style>

<script type="text/javascript">

/**** these values may be edited ****/

var incr=2;
var speed=10;

/************************************/

var c=0;
var ratio;
var obj;
var db;

window.onload=function() {
db=document.body;
obj=document.getElementById('container').style;
ratio=db.offsetHeight/db.offsetWidth;
imageGrow();
}
function imageGrow() {
obj.width=c+'px'
obj.height=c*ratio+'px';
obj.marginLeft=-c/2+'px';
obj.marginTop=-c*ratio/2+'px';
c+=incr;
if(c>db.offsetWidth) {
clearTimeout(exp);
return;
}
exp=setTimeout('imageGrow()',speed);
}
</script>

</head>
<body>

<div id="container">
<img src="images/col.jpg" alt="">
</div>

</body>
</html>

coothead