Javascript DOM Image Element Style set

Description

Javascript DOM Image Element Style set

View in separate window 

<!-- Dynamic styles used for animation. -->
<html>
   <head>
      <title>Deitel Book Cover Viewer</title>
      <style type = "text/css">
         .thumbs   { width: 192px;
                     height: 370px;
                     padding: 5px;
                     float: left }
         .mainimg  { width: 289px;
                     padding: 5px;
                     float: left }
         .imgCover { height: 373px }
         img       { border: 1px solid black }
      </style>
      <script type = "text/javascript">
         <!--//from   w w  w  .j  a v a 2 s .co  m
         let interval = null; // keeps track of the interval
         let speed = 6; // determines the speed of the animation
         let count = 0; // size of the image during the animation

         // called repeatedly to animate the book cover
         function run()
         {
            count += speed;

            // stop the animation when the image is large enough
            if ( count >= 375 ) 
            {
               window.clearInterval( interval );
               interval = null;
            } // end if

            let bigImage = document.getElementById( "imgCover" );
            bigImage.style.width = .7656 * count + "px";
            bigImage.style.height = count + "px";
         } // end function run

         // inserts the proper image into the main image area and
         // begins the animation
         function display( imgfile )
         {
            if ( interval )
               return;
      
            let bigImage = document.getElementById( "imgCover" );
            let newNode = document.createElement( "img" );
            newNode.id = "imgCover";
            newNode.src = imgfile;
            newNode.alt = "Large image";
         newNode.className = "imgCover";
            newNode.style.width = "0px";
            newNode.style.height = "0px";
            bigImage.parentNode.replaceChild( newNode, bigImage );
            count = 0; // start the image at size 0
            interval = window.setInterval( "run()", 10 ); // animate
         } // end function display
         // -->
      </script>
   </head>
   <body>
      <div id = "mainimg" class = "mainimg">
         <img id = "imgCover" src = "image8.png" 
        alt = "Full cover image" class = "imgCover"/>
      </div>
      <div id = "thumbs" class = "thumbs">
         <img src = "image1.png" alt = "image1"
            onclick = "display( 'image1.png' )" />
         <img src = "image2.png" alt = "image2"
            onclick = "display( 'image2.png' )" />
         <img src = "image3.png" alt = "image3"
            onclick = "display( 'image3.png' )" />
         <img src = "image4.png" alt = "image4"
            onclick = "display( 'image4.png' )" />
         <img src = "image5.png" alt = "image5"
            onclick = "display( 'image5.png' )" />
         <img src = "image6.png" alt = "image6"
            onclick = "display( 'image6.png' )" />
      </div>
   </body>
</html>



PreviousNext

Related