|
display(r, g, b)
// updates the R, G, and B text fields (invoked as a method) function display() { frames[0].document.forms[0].red.value = this.r frames[0].document.forms[0].green.value = this.g frames[0].document.forms[0].blue.value = this.b }
All attributes are defined as instances supporting the display() method. You can call this function, for example, to display the color of bgcolor:
bgcolor.display()
The display() method sets the values of the R, G, and B fields in the upper frame to the corresponding RGB values of the calling instance. Those values, named r, g, and b, are stored as properties of the calling instance. The upper frame is the first frame to be defined, so we reference it as frames[0]. You can alternatively use self.frames[0], window.frames[0], parent.frames[0], or top.frames[0]. makeAttribute(r, g, b)
// constructs an attribute function makeAttribute(r, g, b) { this.r = r + "" this.g = g + "" this.b = b + "" this.display = display }
makeAttribute() is a constructor function. All attributes are created as instances of this object, so each attribute has three properties (r, g, and b) and one method (display()). The function accepts three arguments representing the red, green, and blue descriptors. Just to be on the safe side, the arguments are converted to strings. Global Statements
// create instances for all attributes var link = new makeAttribute("00", "00", "00") // black var alink = new makeAttribute("00", "00", "00") // black var vlink = new makeAttribute("00", "00", "00") // black var text = new makeAttribute("00", "00", "00") // black var bgcolor = new makeAttribute("FF", "FF", "FF") // white
We define five global variables in this script segment. All variables are defined as instances of the makeAttribute object. The arguments handed to the makeAttribute() function reflect the default colors for each attribute. select(r, g, b)
// invoked when user selects a color from swatches function select(r, g, b) { // assign string reflecting selected attribute ("text", "bgcolor", etc.) var attribute = curAttribute() // assign new descriptors eval(attribute).r = r eval(attribute).g = g eval(attribute).b = b // display new descriptors in R, G, and B text fields eval(attribute).display() // update main frame update() }
The select() function is invoked when the user selects a color from the swatches in the left frame, and it accepts the red, green, and blue descriptors of the selected color. The function first assigns the currently selected attribute to the local variable attribute. For example, if the current attribute (chosen from the menu in the upper frame) is “Visited link,” the value of attribute is "vlink". Therefore, eval(attribute) is an instance of the makeAttribute object, holding the red, green, and blue descriptors of the attribute. curAttribute()
// return string reflecting selected attribute // ("text", "bgcolor", etc.) function curAttribute() { var list = frames[0].document.forms[0].attribute return list.options[list.selectedIndex].value }
This function returns the currently selected attribute in the form of a string. First, the object representing the select element of the form in the upper frame is assigned to the local variable list. The text value of the selected option is then returned. As shown above, it is often convenient to assign an object reference to a local variable, especially when that reference is extremely lengthy. In this case, we specify the variable list twice, instead of specifying twice the entire object reference, frames[0].document.forms[0].attribute.
|
|||||||||||||||||||||||
With any suggestions or questions please feel free to contact us |