0

我有一组用于导航的图像按钮。我编写了一个 javascript 函数来显示图像按钮的描述，并通过使用 onmouseover 设置它的边框样式和颜色来突出显示该按钮。第二个函数使用 onmouseout 清除描述和边界。

描述代码适用于除 1 (ibSupportData) 之外的所有图像按钮。我似乎无法弄清楚为什么这个特定的图像按钮不起作用。我也无法通过设置 BorderColor 属性来更改边框。

有谁知道为什么 ibSupportData 按钮没有触发 onmouseover 事件？

我设置 BorderColor 属性的语法是否正确？

感谢您的帮助-我的代码如下

<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

您正在测试错误的变量。正确的比较是：

if(txt == 'Data')

此外，代替所有的 ifs，使用可能会考虑使用 switch 语句（它们处理得更快）。

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')

呃……那永远行不通；）

于 2013-01-30T18:03:20.100 回答
1

边框颜色是style对象的属性，而不是元素本身。

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

函数有点小错误。你应该检查'txt'的值，而不是'x'

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