View Full Version : Not understanding the example in this book

08-19-2008, 06:35 AM
I'm going through Javascript: The Definitive Guide and within it is this example for image rollovers however I am not getting many concepts.

<script language="JavaScript1.1">

// This is the constructor function for our new ToggleButton class.

// Calling it creates a ToggleButton object and outputs the required

// <a> and <img> tags into the specified document at the current location.

// Therefore, don't call it for the current document from an event handler.

// Arguments:

// document: The Document object in which the buttons are to be created.

// checked: A boolean that says whether the button is initially checked.

// label: An optional string that specifies text to appear after the button.

// onclick: An optional function to be called when the toggle button is

// clicked. It is passed a boolean indicating the new state of

// the button. You can also pass a string, which is converted

// to a function that is passed a boolean argument named "state".

function ToggleButton(document, checked, label, onclick)


This is just making sure that the constructor's protype's "over" property isn't set yet correct? And after it is setting other prototype properties to different methods within the code. I get this.

if (!ToggleButton.prototype.over) {

// Initialize the prototype object to create our methods

ToggleButton.prototype.over = _ToggleButton_over;

ToggleButton.prototype.out = _ToggleButton_out;

ToggleButton.prototype.click = _ToggleButton_click;

This is just setting four new image objects with an array and referrencing the picture addresses through the .src property. So ToggleButton.images[i].src = /images/button0.gif. Right? If so, then I get this.

ToggleButton.images = new Array(4);

for(var i = 0; i < 4; i++) {

ToggleButton.images[i] = new Image(ToggleButton.width,


ToggleButton.images[i].src = ToggleButton.imagenames[i];



// Save some of the arguments we were passed

Here's where I'm slightly confused. Does each togglebutton object have their own .checked,.document,.highlighted and .onclock global variable? There were four paramters passed to the constructor. Down below, each button object passed 3-4 of these but none the less, why does the global variable of this.document = document need to be set if it's going to be referring to the same window every time? For this.checked, this is just setting the global .checked variable of one toggle objected to the value of the parameter?

this.document = document;

this.checked = checked;

this.highlighted = false;

Ok, here is a MAJOR confusion. For the third toggle variable, it sent the onclick paramter as a string. I get that and I also get that it's checking to see if it's a string. However, I don't get how it is converting it to a function from a string. this.onclick = onclick just set it to the original string passed and then the this.onclick = new Function("state", this.onclick) confuses me. The second argument sent is this.onclick, why is it referring to itself and how does this do anything? Where is it sending the "state" argument to and how is this even converting a string to a function?

this.onclick = onclick;

if (typeof this.onclick == "string")

this.onclick = new Function("state", this.onclick);

I don't get why this should be the index. Isn't the value always going to be the array length of 3 (for the 3 images put into the array)? How does this indicate the current image position?

var index = document.images.length;

Again, going back to the previous issue, how is placing the index going to indicate which image is present is the array length is always going to be the same? And what does the return true vs return false in these contexts do?

document.write('&nbsp;<a href="about:blank" ' +

'onmouseover="document.images[' + index + ']._tb.over( );return true;" '+

'onmouseout="document.images[' + index + ']._tb.out( )" '+

'onclick="document.images[' + index + ']._tb.click( ); return false;">');

For this, how is this.checked +0 indicating anything? Isn't an address of a image supposed to go here?

document.write('<img src="' + ToggleButton.imagenames[this.checked+0] +'"'+

' width=' + ToggleButton.width +

' height=' + ToggleButton.height +

' border="0" hspace="0" vspace="0" align="absmiddle">');

if (label) document.write(label);


No clue how this works into play.

this.image = document.images[index];

Also don't understand how this comes into play. What is this referring to and how does this property come into play?

this.image._tb = this;


function _ToggleButton_over( )


is the "this" referring to the document window or the particular object? And why +2?

this.image.src = ToggleButton.imagenames[this.checked + 2];

this.highlighted = true;


function _ToggleButton_out( )


same as above

this.image.src = ToggleButton.imagenames[this.checked + 0];

this.highlighted = false;


function _ToggleButton_click( )


So this is just turning the .checked to false everytime? If so, then how does this.checked ever return to true? Also, at the very bottom makes no sense to me. if (this.onclick), how is it detecting this? Then it states this.onclick(this.checked), again, where is this.checked going back to?

this.checked = !this.checked;

this.image.src = ToggleButton.imagenames[this.checked+this.highlighted*2];

if (this.onclick) this.onclick(this.checked);


ToggleButton.imagenames = new Array(4); // Create an array

ToggleButton.imagenames[0] = "images/button0.gif"; // The unchecked box

ToggleButton.imagenames[1] = "images/button1.gif"; // The box with a checkmark

ToggleButton.imagenames[2] = "images/button2.gif"; // Unchecked but highlighted

ToggleButton.imagenames[3] = "images/button3.gif"; // Checked and highlighted

ToggleButton.width = ToggleButton.height = 25; // Size of all images


Optional extras:<br>

<script language="JavaScript1.1">

var tb1 = new ToggleButton(document, true, "56K Modem");

var tb2 = new ToggleButton(document, false, "Laser Printer",

function(clicked) {alert("printer: " + clicked);});

var tb3 = new ToggleButton(document, false, "Tape Backup Unit",

"alert('Tape backup: ' + state)");



<input type="button" value="Report Button States"

onclick="alert(tb1.checked + '\n' + tb2.checked + '\n' + tb3.checked)">

<input type="button" value="Reset Buttons"

onclick="if (tb1.checked) tb1.click( );

if (tb2.checked) tb2.click( );

if (tb3.checked) tb3.click( );">