Question

i am using .net 2.0. I have 2 images both relate to one a nother. They work like how an accordin works. what is happening is that i have a list with one image on the list. When i click on the first list button the first list expnads and the second list hides and at the same time the button on the second list needs to change. but the button on the second list doesnt change. The button on the first list works fine its just the button on the secon list stays the same all the time when i click on any of the buttons.

The problem lies when i want to set the src of the button to change respective of which button is clicked. Here is the code 1 in vb.net and the javascript.

Dim divUserPageMediaUrlChooser As New Div
divInnerContainer.Controls.Add(divUserPageMediaUrlChooser)
divUserPageMediaUrlChooser.CSSClass = "divuserpagemediachooseurlyoutube"

Dim imageYoutubeUrlChooser As New Image
divUserPageMediaUrlChooser.Controls.Add(imageYoutubeUrlChooser)
imageYoutubeUrlChooser.CssClass = "imageupselectormedia"
imageYoutubeUrlChooser.ImageUrl = "images/userhomepage/upselector.png"

Dim divUserPageMediaUrlChooserText As New Div
divUserPageMediaUrlChooser.Controls.Add(divUserPageMediaUrlChooserText)
divUserPageMediaUrlChooserText.CSSClass = "divuserpagemediachooseurlyoutubetext"
divUserPageMediaUrlChooserText.InnerText = "Upload media via URL"

Dim divYoutbeMediaSelectorContainer1 As New Div
divInnerContainer.Controls.Add(divYoutbeMediaSelectorContainer1)
divYoutbeMediaSelectorContainer1.CSSClass = "divyoutubemediaselectorcontainer1"

Dim divUserPageMediaYoutubeChooserSeperator As New Div
divInnerContainer.Controls.Add(divUserPageMediaYoutubeChooserSeperator)
divUserPageMediaYoutubeChooserSeperator.CSSClass = "divuserpagemediachooseyoutubesperator"

Dim divUserPageMediaUrlChooser2 As New Div
divInnerContainer.Controls.Add(divUserPageMediaUrlChooser2)
divUserPageMediaUrlChooser2.CSSClass = "divuserpagemediachooseurlyoutube"

Dim imageYoutubeUrlChooser2 As New Image
divUserPageMediaUrlChooser2.Controls.Add(imageYoutubeUrlChooser2)
imageYoutubeUrlChooser2.CssClass = "imageupselectormedia"
imageYoutubeUrlChooser2.ImageUrl = "images/userhomepage/downselector.png"

Dim divUserPageMediaSearchChooserText As New Div
divUserPageMediaUrlChooser2.Controls.Add(divUserPageMediaSearchChooserText)
divUserPageMediaSearchChooserText.CSSClass = "divuserpagemediachooseurlyoutubetext"
divUserPageMediaSearchChooserText.InnerText = "Upload media via searching Youtube"

Dim divYoutbeMediaSelectorContainer2 As New Div
divInnerContainer.Controls.Add(divYoutbeMediaSelectorContainer2)
divYoutbeMediaSelectorContainer2.CSSClass = "divyoutubemediaselectorcontainer2"


imageYoutubeUrlChooser.Attributes.Add("onmousedown", String.Format("SelectYoutubeChoose('{0}','{1}','{2}','{3}','{4}')", imageYoutubeUrlChooser.ClientID, divYoutbeMediaSelectorContainer1.ClientID, divYoutbeMediaSelectorContainer2.ClientID, imageYoutubeUrlChooser.ClientID, imageYoutubeUrlChooser2.ClientID))
imageYoutubeUrlChooser2.Attributes.Add("onmousedown", String.Format("SelectYoutubeChoose('{0}','{1}','{2}','{3}','{4}')", imageYoutubeUrlChooser2.ClientID, divYoutbeMediaSelectorContainer1.ClientID, divYoutbeMediaSelectorContainer2.ClientID, imageYoutubeUrlChooser.ClientID, imageYoutubeUrlChooser2.ClientID))

Javascript

function SelectYoutubeChoose(theId, id1, id2, imageId1, imageId2) {

  var theImage = $("#" + theId);
  var container1 =  $("#" + id1);
  var container2 =  $("#" + id2);
  var image1 = $("#" + imageId1);
  var image2 = $("#" + imageId2);

  if (theImage.attr("id") == image2.attr("id"))
  {
    if ($(container2).css("display") == "block") {

      $(container1).show();
      $(container2).hide();
      $(image2).attr("src", "images/userhomepage/upselector.png");
      $(image1).attr("src", "images/userhomepage/downselector.png");
      //            document.getElementById(imageId2).src = "images/userhomepage/upselector.png";
      //            document.getElementById(imageId1).src = "images/userhomepage/downselector.png";

    }
    else {
      $(container1).hide();
      $(container2).show();
      $(image2).attr("src", "images/userhomepage/downselector.png");
      $(image1).attr("src", "images/userhomepage/upselector.png");
    }
  }

  if (theImage.attr("id") == image1.attr("id")) {
    if ($(container1).css("display") == "block") {

      $(container1).hide();
      $(container2).show();
      $(image2).attr("src", "images/userhomepage/downselector.png");
      $(image1).attr("src", "images/userhomepage/upselector.png");

    }
    else {
      $(container1).show();
      $(container2).hide();
      $(image2).attr("src", "images/userhomepage/upselector.png");
      $(image1).attr("src", "images/userhomepage/downselector.png");
    }
  }

}

Answer 1

You may wish to consider using CSS backgrounds and simply swapping class names. Much cleaner.