Asp:LinkButton href value applied to table onclick

I am attempting to internationalise buttons within our web application and so far i have been able to build our buttons up using a sprite image and applying the relevant css classes to build the button.

I have this laid out in the following structure:

<开发者_运维问答table cellpadding="0" cellspacing="0" class="pwbtn" onmouseout="this.className='pwbtn';"
    onmouseover="this.className='pwbtnh';">
    <tr>
        <td class="a1">
        </td>
        <td class="a2" onclick="CallShowBlocker()">
            <asp:linkbutton id="ButtonNext" onclientclick="PreNavigationScript();" runat="server"
                cssclass="RemoveLinkStyle"></asp:linkbutton>
        </td>
        <td class="a3">
        </td>
        <td class="spacer">
        </td>
    </tr>
</table>

At the moment the buttons are displayed as expected however the user has to click exactly on the text for the button to fire its event.

I want to apply the href value of the linkbutton to the tables onlcick so when the user clicks anywhere inside the image it will fire the event.

Also, my href value is built up via an event handler in C# and results in the following href value:

"javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('ContWizard2$Wizard1$cFooter$ButtonNext', '', true, '', '', false, true));"

If I haven't been clear enough here or missed any parts of code you would need to see, please let me know and thank you in advance.

Until I get more rep, I'll have to answer you here as opposed to a comment. A nice suggestion would be to maintain your code behind, but instead of using a linkbutton (which may cause limitations on where you must click), you could use a image button and assign the imageurl property to your picture/icon.

Since there is minimal difference between the two types of buttons, you shouldn't have to change much at all.

Let me know if that helps.

-JJ

In case anyone finds this and is wondering how to fix it.

I removed the LinkButton outside of the table. Using the tables onclick attribute, I created a new Javascript function which passed the LinkButton clientID.

When the button is clicked, the ID is passed to the Javascript function, and we fire link.click() to execute the links action. See below:

<asp:linkbutton id="LinkButton1" runat="server" causesvalidation="False" cssclass="RemoveLinkStyle"></asp:linkbutton>
<table cellpadding="0" cellspacing="0" class="pwbtn" onclick="CallShowBlocker(); ExecuteLink('<%=ButtonYes.ClientID %>');"
    onmouseout="this.className='pwbtn';" onmouseover="this.className='pwbtnh';">
    <tr id="trButtonYes" runat="server" visible="false">
        <td class="a1">
        </td>
        <td class="a2" onclick="CallShowBlocker()">
            <%= this.resourceManager.GetString("yes") %>
        </td>
        <td class="a3">
        </td>
        <td class="spacer">
        </td>
    </tr>
</table>

function ExecuteLink(linkID)
{ 
    var link = document.getElementById(linkID); 
    link.click();
}