javascript image toggling

I have a tree view which has a folder icon by default and once clicked it has to be changed to a checkbox icon. And further on clicking the checkbox icon should display a folder icon.

Sample Code:

Server side code: C#

htmlSb.AppendFormat("<li><span class=\"folder\"
   onclick=\"javascript:return Test.Controls.TreeView.SelectNode('"
   + this.Id
   + "',this);\">{0}</span></li>", emptyContent);

JavaScript code:

var Test= new Object();
Test.Controls=new Object();
Test.Controls.TreeView = new Object();

Test.Controls.TreeView.SelectNode = function (TreeId, nodeLabel) {
    $("#" + TreeId + " li span, ul li span").css("background-color", "transparent");
    nodeLabel.style.backgroundColor = "whit开发者_如何转开发e";
    nodeLabel.style.background = "url(../images/selected.gif) 0 0 no-repeat";
}

The other Image :

if (nodeLabel.style.background = "url(../images/folderclosed.gif)  0 0 no-repeat")

I need to toggle between "selected.gif" and "folderclosed.gif" images. If one is clicked the other should display. and vice versa.

Please help.

Looks like you have jQuery available to you. This should do the trick:

// get a jquery object for the node label
var $nodeLabel = $(nodeLabel);

if ($nodeLabel.data('background') == '' || $nodeLabel.data('background') == 'folderclosed') {
  // if the node label has no background data set or is set to folderclosed, set to selected
  $nodeLabel.data('background', 'selected').css('background', 'url(../images/selected.gif) 0 0 no-repeat');
} else {
  // if the node label is set to selected, set to folderclosed
  $nodeLabel.data('background', 'folderclosed').css('background', 'url(../images/folderclosed.gif)  0 0 no-repeat');
}

sounds like the jQuery toggle function would be easiest since it's designed for just this.

http://api.jquery.com/toggle/