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

Code:


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

Thread: Help!

Thread Tools

Search Thread

Help!

Bookmarks

Bookmarks

Posting Permissions