Application Techniques

Manipulating Page Controls with JavaScript

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

About this technique



HTML Client Techniques> JavaScript


You'll learn about:

You can run this technique code from:

Related reading

See the chapter on advanced page topics in the Programmer's Guide

Coding it in plain HTML and JavaScript   Top of page

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   Top of page

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

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

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) 
     // 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() 
  method handle_img2_onMouseOut() 
  method handle_img2_onMouseOver() 
     Page.changeArea(this.img2,'Tools Icon'); 

Copyright © 2000, SilverStream Software, Inc. All rights reserved.