Question

I have anchor tag with one image tag inside, I am dynamically changing the image inside the anchor tag based on button click. button1 to set Red.png image, button2 to set Green.png image . I want to validate which image inside the anchor tag and if it is Green.png i need to show the thickbox if it is Red.png no action should not take place. how i can do this?

//my aspx code-Anchor tag with image tag

<a onclick="validate();" href="PopUpPage.aspx?KeepThis=true&TB_iframe=true&height=150&width=400"
      class="thickbox" id="AnchorImage" >
<img id="ColorImageButton" src="SiteImages/Red.png" runat="server" />
</a>

//two button- button1 to set red image, button2 to set green image

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Button" />

    protected void Button1_Click(object sender, EventArgs e)
    {
        ColorImageButton.Src = "~/SiteImages/Red.png";
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        ColorImageButton.Src = "~/SiteImages/Green.png";
    }

Update: Based on answers I added a JavaScript to remove link but still i have black screen background of thickbox

function validate() {

    if (document.getElementById('<%=ColorImageButton.ClientID%>').src.indexOf('Red.png') >= 0) {
                         document.getElementById('AnchorImage').removeAttribute('href');
    }
Was it helpful?

Solution

With Javascript you could do something like this:

  1. Attach an onclick handler to the anchor as so:

    <a onclick="validate();" href="PopUpPage.aspx?KeepThis=true&TB_iframe=true&height=150&width=400"
      class="thickbox" id="AnchorImage"  >
    <img id="ColorImageButton" src="SiteImages/Red.png" runat="server" />
    </a>
    
  2. Define the validate function:

    ​function validate()
    {
       //If image is red; change the href value to a hash sign
       //so it doesn't do anything
       if(document.getElementById('<%=ColorImageButton.ClientID%>').src.indexOf('Red.png')>=0)
       {
          document.getElementById('AnchorImage').href='#';
       }
    }​
    
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top