JavaScript onmouseover 和 onmouseout (更改标签的内容并设置更改图像 botton 的

javascript onmouseover and onmouseout (change a label's contents and set change an image botton's border color

本文关键字：botton 图像 设置 标签 onmouseover onmouseout JavaScript      更新时间：2023-09-26

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

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

有谁知道为什么 ibSupportData 按钮没有触发鼠标悬停事件？

我设置 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>

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

if(txt == 'Data')

此外，而不是所有的ifs，use可以考虑使用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;

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

呃......这永远行不通;)

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

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

> 函数中有一点错误。您应该检查"txt"的值，而不是"x"

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