Using the code
The code is straightforward. You add the script to your page and create a new object. You will need a container to place your object in. I recommend that this be an empty
DIV. Adding other things inside the
DIV will cause failure. You will need to provide the maximum number of images you wish to display, and how many are selected by default. You will also need to provide labels for these choices.
You create a new vote object by calling its constructor
voteObject = new jVote(parentDiv, parameters);
parameters are required.
parentDiv is the
DIV you want to add the voting object to.
parameters will contain the settings for you object, including the number of images, their labels, what to do when an image is clicked, etc.
parameters can be the following:
max: The number of images to be displayed.
min: The number of images currently turned "on".
label: This is an array containing the values of the images. The size of the array should be the same as your
click: A callback specifying what to do when an image is clicked. Two values are passed to this object, the mouse event and the label value of the image clicked.
function doStuff(mouseEvent, labelValue)
alert('You clicked ' + labelValue);
Since this is a very simple and bare-bones implementation, we don't have a lot of available methods.
integer is optional. Sets the number of images currently 'on'. When called without the
parameters.min value is used.
object.lock(): Locks the vote object from being toggled. The
parameters.click function will no longer fire, and the images will no longer change.
object.unLock(): Unlocks the vote object.
The technique is really quite simple. First, we must create our constructor:
function jVote(parent, settings)
this.locked = false;
this.images = ;
this.settings = settings;
this.parent = parent;
Now that we have a constructor, we need to add methods to it, or it doesn't really do anything! Since we have called
init() already, it would probably be a good idea to add it to the object. We do this via
jVote.prototype.init = function()
var that = this;
for(var i = 0, e = this.settings.max; i < e; i++)
var image = document.createElement('img');
this.images[i] = image;
image.value = this.settings.labels[i];
image.alt = this.settings.labels[i];
image.style.cursor = 'pointer';
image.onmouseover = function()
image.onclick = function(evnt)
var eEvent = evnt || window.event;
All we are doing is looping through the number of images specified in our
parameters.max setting, creating an image using
document.createElement('img'), and appending that image to the
object.parent. We also set our
onclick events for our images as well as add them to our
OK, our images are added....now what? For each image, we set the
onmouseover event to call
object.set(image). Let's take a look at the
jVote.prototype.set = function(domImage)
domImage.src = 'star.png';
var next = domImage.nextSibling;
next.off = true;
next.src = 'dark_star.png';
next = next.nextSibling;
var prev = domImage.previousSibling;
prev.off = false;
prev.src = 'star.png';
prev = prev.previousSibling;
This function/method is the real 'meat and potatoes' of the entire script. It takes an image as an argument. That image is set to the 'on' position, and all the images before that image are set to 'on', while all the images after it are set to 'off'. We use
image.nextSibling to get the images before and after our target image. When we have no more older/younger brothers and sisters, the
previous/nextSibling functions evaluate to
null, breaking us out of our
Points of interest
When using the
this keyword inside a closure, the scope of the variable changes. To avoid this, you want to set your
this keyword to another variable to use exclusively in closures.
var that = this;
var newImage = document.createElement('img');
newImage.click = function()
- <img style="VERTICAL-ALIGN: middle" hspace="0" src="/KB/scripting/JVote/firefox_s.png" align=removed" border="0" />Firefox
- <img style="VERTICAL-ALIGN: middle" hspace="0" src="/KB/scripting/JVote/ie7_s.png" align=removed" border="0" />Internet Explorer 7
- <img style="VERTICAL-ALIGN: middle" hspace="0" src="/KB/scripting/JVote/ie6_s.png" align=removed" border="0" />Internet Explorer 6
- <img style="VERTICAL-ALIGN: middle" hspace="0" src="/KB/scripting/JVote/opera_s.png" align=removed" border="0" />Opera
- <img style="VERTICAL-ALIGN: middle" hspace="0" src="/KB/scripting/JVote/safari_s.png" align=removed" border="0" />Safari
- <img style="VERTICAL-ALIGN: middle" hspace="0" src="/KB/scripting/JVote/kde_s.png" align=removed" border="0" />Konqueror
- Thursday, June 12, 2008 -- Uploaded article.