dHTML Drop Down Menu Tutorial - Part 4

The Bullet Points

This may seem like an odd place to start the tutorial, but it explains a little about object oriented programming (OOP) in JavaScript.

You can find out more about JavaScript OOP at javascriptkit.com.

The Code

The code below creates an object with 3 properties:

1. An image object for the "off" version of the bullet
2. An image object for the "on" version of the bullet
3. A string containing the URL of the "off" version of the bullet (used later in the tutorial)

function bulletPoint(offURL, onURL) {	
	this.offImage = new Image();
	this.offImage.src = offURL;
	this.onImage = new Image();
	this.offImage.src = onURL;
	this.menuBulletURL = String(offURL);
}

Usage

The code below creates three bulletPoint objects called menuItemBullet, labelBullet and subMenuBullet. We'll use these later in the tutorial.

menuItemBullet = new bulletPoint("menu_off.gif", "menu_on.gif");
labelBullet = new bulletPoint("header_off.gif", "header_on.gif");
subMenuBullet = new bulletPoint("sub_header_off.gif", "sub_header_on.gif");

The images in these objects can then be referenced by menuItemBullet.offImage, menuItemBullet.onImage etc. The URL of the "off" image would be menuItemBullet.menuBulletURL.