Question

我有一组用于导航的图像按钮。我写了一个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>

Answer 1

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

if(txt == 'Data')

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

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;

Answer 2

var x = ""
if (x == 'Data')

呃......那永远不会起作用;）

Answer 3

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

document.getElementById("ibSupportData").style.borderColor = 'black';

Answer 4

这个功能有点误。你应该检查'txt'的值，而不是'x'

        var x = ""
        if (txt == 'Data') 
        {
            x = "Support Data Management";
            document.getElementById("ibSupportData").setAttribute("BorderColor", "Black");
        }

javascript onmouseover和onmouseout（更改标签的内容并设置更改图像按钮的边框颜色

4 个答案: