Results 1 to 2 of 2

Thread: Image entrance

  1. #1
    Join Date
    Jul 2005
    Location
    Texas
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image entrance

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •