The Complete Source of the Toolbar : ToolBar « GUI Components « JavaScript DHTML






The Complete Source of the Toolbar


/*
JavaScript Unleashed, Third Edition
by Richard Wagner and R. Allen Wyke 

ISBN: 067231763X
Publisher Sams CopyRight 2000

*/
<html>
<head>
  <title>JavaScript Unleashed</title>
  <script type="text/javascript" language="JavaScript1.2">
  <!--
   
    // Create arrays to hold images
    var overImg = new Array();
    overImg[0] = new Image(24,24);
    overImg[1] = new Image(24,24);
    overImg[2] = new Image(24,24);
    overImg[3] = new Image(24,24);
    overImg[4] = new Image(24,24);
    overImg[5] = new Image(24,24);
   
    var downImg = new Array();
    downImg[0] = new Image(24,24);
    downImg[1] = new Image(24,24);
    downImg[2] = new Image(24,24);
    downImg[3] = new Image(24,24);
    downImg[4] = new Image(24,24);
    downImg[5] = new Image(24,24);
   
    var defaultImg = new Array();
    defaultImg[0] = new Image(24,24);
    defaultImg[1] = new Image(24,24);
    defaultImg[2] = new Image(24,24);
    defaultImg[3] = new Image(24,24);
    defaultImg[4] = new Image(24,24);
    defaultImg[5] = new Image(24,24);   


    // Preload images in the array
    overImg[0].src = "back-over.gif";
    overImg[1].src = "forward-over.gif";
    overImg[2].src = "home-over.gif";
    overImg[3].src = "reload-over.gif";
    overImg[4].src = "search-over.gif";
    overImg[5].src = "print-over.gif";
   
    downImg[0].src = "back-down.gif";
    downImg[1].src = "forward-down.gif";
    downImg[2].src = "home-down.gif";
    downImg[3].src = "reload-down.gif";
    downImg[4].src = "search-down.gif";
    downImg[5].src = "print-down.gif";
   
    defaultImg[0].src = "back.gif";
    defaultImg[1].src = "forward.gif";
    defaultImg[2].src = "home.gif";
    defaultImg[3].src = "reload.gif";
    defaultImg[4].src = "search.gif";
    defaultImg[5].src = "print.gif";
   
    // Change the state of image depending on the event that fired.
    function rollImage(img,type){
      switch(type){
        case "over":
          document.images[img].src = overImg[img].src;
          break;
        case "out":
          document.images[img].src = defaultImg[img].src;
          break;
        case "up":
          document.images[img].src = defaultImg[img].src;
          break;
        case "down":
          document.images[img].src = downImg[img].src;
          break;
      }
    }
   
    // Process the URL that was entered in the text box
    function takeBrowser(ref){

      var form = ref;
      location.href = form.where.value;
    }
   
    // Process the buttons as they are pressed
    function process(item){
      var isIE = new Boolean(navigator.userAgent.indexOf("MSIE") != -1);
   
      switch(item){
        case "find":
          if(isIE){
            alert("Internet Explorer does not support this method");
          }else{
            window.find();
          }
          break;
        case "print":
          window.print();
          break;
        case "home":
          if(isIE){
            alert("Internet Explorer does not support this method");
          }else{
            window.home();
          }
          break;
        case "reload":
          document.location.reload();
          break;
        case "forward":
          if(isIE){
            history.forward();
          }else{
            window.forward();
          }
          break;
        case "back":
          if(isIE){
            history.back();
          }else{
            window.back();
          }

          break;
      }
    }
  //-->
  </script>
</head>
<body bgcolor="#ffffff">
  <table border="1" cellpadding="5" cellspacing="0" align="center"
         bgcolor="#c0c0c0">
    <tr>
      <td align="center">
        <a href="javascript:process('back')"
             onmouseup="rollImage('0','up')"
             onmousedown="rollImage('0','down')"
             onmouseout="rollImage('0','out')"
             onmouseover="rollImage('0','over')">
          <img border="0" src="back.gif" width="24" height="24" alt="Back">
          </a>
      </td>
      <td align="center">
        <a href="javascript:process('forward')"
             onmouseup="rollImage('1','up')"
             onmousedown="rollImage('1','down')"
             onmouseout="rollImage('1','out')"
             onmouseover="rollImage('1','over')">
          <img border="0" src="forward.gif" width="24" height="24"
               alt="Forward"></a>
      </td>
      <td align="center">
        <a href="javascript:process('home')"
             onmouseup="rollImage('2','up')"
             onmousedown="rollImage('2','down')"
             onmouseout="rollImage('2','out')"
             onmouseover="rollImage('2','over')">
          <img border="0" src="home.gif" width="24" height="24"
               alt="Home"></a>
      </td>
      <td align="center">
        <a href="javascript:process('reload')"
             onmouseup="rollImage('3','up')"
             onmousedown="rollImage('3','down')"
             onmouseout="rollImage('3','out')"

             onmouseover="rollImage('3','over')">
          <img border="0" src="reload.gif" width="24" height="24"
               alt="Reload"></a>
      </td>
      <td align="center">
        <a href="javascript:process('find')"
             onmouseup="rollImage('4','up')"
             onmousedown="rollImage('4','down')"
             onmouseout="rollImage('4','out')"
             onmouseover="rollImage('4','over')">
          <img border="0" src="search.gif" width="24" height="24"
               alt="Search"></a>
      </td>
      <td align="center">
        <a href="javascript:process('print')"
             onmouseup="rollImage('5','up')"
             onmousedown="rollImage('5','down')"
             onmouseout="rollImage('5','out')"
             onmouseover="rollImage('5','over')">
          <img border="0" src="print.gif" width="24" height="24"
               alt="Print"></a>
      </td>
    </tr>
    <tr>
      <td colspan="6">
        <form name="netsite">
          <b>
            Location:
          </b>
            <input type="text" size="40" value="Enter a URL here" name="where">
            <input type="button" value="Go" onclick="takeBrowser(this.form)">
        </form>
      </td>
    </tr>
    <tr>
      <td colspan="6">
        Result of Date.getTime() (reload verification):
        <script type="text/javascript" language="JavaScript1.2">
        <!--
          document.write((new Date()).getTime());
        //-->
        </script>

      </td>
    </tr>
  </table>
</body>
</html>

           
       








Related examples in the same category

1.Toolbar with menu
2.Dragable and sortable toolbar