topical media & game development

talk show tell print

basic-javascript-12-Question-1.htm / htm



  <html>
  <head>
      <title>Chapter 12, Question 1</title>
      <style type="text/css">
          #boxOne {
              position: absolute;
              top: 125px;
              left: 231px;
              width: 100px;
              height: 100px;
              background-color: navy;
              visibility: hidden;
          }
          
          #boxTwo {
              position: absolute;
              top: 100px;
              left: 400px;
              width: 200px;
              height: 200px;
              background-color: red;
              visibility: hidden;
          }
      </style>
      <script type="text/javascript">
          function showBoxOne() {
              var boxOne = document.getElementById("boxOne");
              var boxTwo = document.getElementById("boxTwo");
              
              boxOne.style.visibility = "visible";
              boxTwo.style.visibility = "hidden";
          }
          
          function showBoxTwo() {
              var boxOne = document.getElementById("boxOne");
              var boxTwo = document.getElementById("boxTwo");
              
              boxOne.style.visibility = "hidden";
              boxTwo.style.visibility = "visible";
          }
      </script>
  </head>
  <body>
      <a href="#" onclick="showBoxOne(); return false;">Show First Box</a>
      <a href="#" onclick="showBoxTwo(); return false;">Show Second Box</a>
          
      <div id="boxOne"></div>
      <div id="boxTwo"></div>
  </body>
  </html>
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.