0

I have a set of image buttons that are used for navigation. I wrote a javascript function to display a description of the image button and also highlight the button by setting it border style and color with onmouseover. A second function clears the description and border with onmouseout.

The description code is working on all image buttons except 1 (ibSupportData). I cant seem to figure out why this particular image button doesn't work. I also have not been able to get the border to change by setting the BorderColor attribute.

Does anyone know why the ibSupportData button isn't firing the onmouseover event?

And is my syntax for setting the BorderColor attribute correct?

Thanks for any help - My code is below 

<script language="javascript" type="text/javascript">
        function IBMenuHover(txt) 
        {
            var x = ""
            if (x == 'Data') 
            {
                x = "Support Data Management";
                document.getElementById("ibSupportData").setAttribute("BorderColor", "Black");
            }
            if (txt == "Tools") 
            {
                x = "Build Printer Scripts";
                document.getElementById("ibTools").setAttribute("BorderColor", "Black");
            }
            if (txt == "UserAdmin") 
            {
                x = "User Administration"
                document.getElementById("ibUsers").setAttribute("BorderColor", "Black");
            }
            if (txt == "PrintManager") 
            {
                x = "Printer Management"
                document.getElementById("ibPrinters").setAttribute("BorderColor", "Black");
            }
            document.getElementById("lblDescr").innerHTML = x;

        }
        function IBMenuHoverClear() 
        {
            var text = "";
            document.getElementById("lblDescr").innerHTML = text;
            document.getElementById("ibTools").setAttribute("BorderColor", "White")
            document.getElementById("ibPrinters").setAttribute("BorderColor", "White")
            document.getElementById("ibUsers").setAttribute("BorderColor", "White")
            document.getElementById("ibSupportData").setAttribute("BorderColor", "White")
        }

    </script>


...


                <asp:ImageButton ID="ibPrinters" runat="server" Height="100px" 
                    ImageUrl="~/Images/PrinterSearch.jpg" Width="100px" Enabled="True" 
                    onmouseover="IBMenuHover('PrintManager')" onmouseout="IBMenuHoverClear()" 
                    BorderColor="White" BorderStyle="Solid" 
                    BorderWidth="2px" onclick="ibPrinters_Click"  />
                <asp:ImageButton ID="ibTools" runat="server" Height="100px" 
                    ImageUrl="~/Images/hammerwrenchbuild.jpg" Width="100px" Enabled="True" 
                    onclick="ibTools_Click" onmouseover="IBMenuHover('Tools')" 
                    onmouseout="IBMenuHoverClear()" BorderColor="White" BorderStyle="Solid" 
                    BorderWidth="2px" />
                <asp:ImageButton ID="ibSupportData" runat="server" Height="100px" 
                    ImageUrl="~/Images/SupportData.jpg" Width="100px" Enabled="True" 
                    onclick="ibSupportData_Click" onmouseover="IBMenuHover('Data')" 
                    onmouseout="IBMenuHoverClear()" BorderColor="White" BorderStyle="Solid" 
                    BorderWidth="2px" />
                <asp:ImageButton ID="ibUsers" runat="server" Height="100px" 
                    ImageUrl="~/Images/UserAdmin2p.jpg" Width="100px" Enabled="True" 
                    onclick="ibUsers_Click" onmouseover="IBMenuHover('UserAdmin')" 
                    onmouseout="IBMenuHoverClear()" BorderColor="White" BorderStyle="Solid" 
                    BorderWidth="2px"  />
                    <asp:Panel ID="pnlInfo" runat="server">
                        <asp:Label ID="lblDescr" runat="server" Text="" 
                            style="font-family: Calibri; font-size: medium">
                        </asp:Label>
                    </asp:Panel>
4

4 に答える 4

2

You are testing the wrong variable. The correct comparison is:

if(txt == 'Data')

Also, instead of all the ifs, use might consider using a switch statement (they process much quicker).

switch(txt){
    case 'Data':
        x = "Support Data Management";
        document.getElementById("ibSupportData").setAttribute("BorderColor", "Black");
        break;
    case 'Tools':
        x = "Build Printer Scripts";
        document.getElementById("ibTools").setAttribute("BorderColor", "Black");
        break;
    case 'UserAdmin':
        x = "User Administration";
        document.getElementById("ibUsers").setAttribute("BorderColor", "Black");
        break;
    case 'PrintManager': 
        x = "Printer Management";
        document.getElementById("ibPrinters").setAttribute("BorderColor", "Black");
        break;
}
document.getElementById("lblDescr").innerHTML = x;
于 2013-01-30T18:02:57.797 に答える
2 
var x = ""
if (x == 'Data')

Erm... that's never going to work ;)

于 2013-01-30T18:03:20.100 に答える
1

The border color is a property of the style object, not the element itself.

document.getElementById("ibSupportData").style.borderColor = 'black';
于 2013-01-30T18:02:02.680 に答える
1

There's a little mistake in the function. You should check the value of 'txt', not 'x'

        var x = ""
        if (txt == 'Data') 
        {
            x = "Support Data Management";
            document.getElementById("ibSupportData").setAttribute("BorderColor", "Black");
        }
于 2013-01-30T18:03:44.970 に答える