Manipulating Page Controls with JavaScript

How to dynamically change the properties of page controls (HTML form elements) by using JavaScript.

About this technique	Details
Category	HTML Client Techniques> JavaScript
Description	You'll learn about: Coding it in plain HTML and JavaScript Coding it in SilverStream
	You can run this technique code from: File: ManipulateControls.html
Related reading	See the chapter on advanced page topics in the Programmer's Guide

Coding it in plain HTML and JavaScript   

The live example for this technique is a plain HTML file that shows how you can manipulate HTML form elements with some basic JavaScript. To do the same thing in SilverStream, you just need a slight variation, as described in the next section.

Coding it in SilverStream   

In the Page Designer, you code the following in the Raw HTML window:

  <SCRIPT> 
   
     // Standard Browser Check 
   
     browserCheck = ((navigator.appName == "Microsoft Internet Explorer")  
                    || (navigator.appName == "Netscape"))  
                    && (parseInt(navigator.appVersion) >= 4); 
  </SCRIPT> 

Then, you code the following in the JavaScript window:

  // The changeArea method takes two parameters, a  
  // reference to the actual image object that you want  
  // to work with and a description of that image. 
   
  method changeArea(whichImg,desc) { 
   
     // If they don't have a compatible browser, do not 
     // try to do a hover. 
   
     if (!browserCheck) 
        return; 
   
     // Set the image's source to a variable in the function 
     // so you can deal with it separately. 
   
     imgSrc = whichImg.src; 
   
     // Since you are naming images in the format: 
     //    image1.gif 
     //    image2.gif 
     // all you need to do is find out if the current image 
     // is a 1 or a 2 and switch it accordingly. 
   
     // ** Note: Your naming convention does not have 
     // to be the same 1 or 2 scheme and it does not 
     // only work with GIF type images.   
   
     // So here, you check to see if there is a '1' in 
     // the image source. 
   
     if (imgSrc.indexOf("1.gif") == -1) { 
   
        // There is no '1' so replace the '2' in  
        // the source with a '1' 
   
        imgSrc = imgSrc.replace(2 + ".gif",1 + ".gif"); 
     } 
     else { 
     
        // There is a '1' in the source so replace 
        // it with a '2' 
   
        imgSrc = imgSrc.replace(1 + ".gif",2 + ".gif"); 
   
        // Only want to change the value of the text area when  
        // you are dealing with a onMouseOver event which is 
        // why this line is in the else block.   
   
        this.desc.value = desc; 
     } 
   
     // Set the source of the image to the new source 
   
     whichImg.src = imgSrc; 
  } 
   
  method handle_img1_onMouseOver() 
  { 
     Page.changeArea(this.img1,'SilverStream Icon'); 
  } 
   
  method handle_img1_onMouseOut() 
  { 
     Page.changeArea(this.img1,''); 
  } 
   
  method handle_img2_onMouseOut() 
  { 
     Page.changeArea(this.img2,''); 
  } 
   
  method handle_img2_onMouseOver() 
  { 
     Page.changeArea(this.img2,'Tools Icon'); 
  }