Question

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.

Answer 1

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();
}