Databases
StackOverflow2013
Postsdbo
POjavascript onmouseover and onmouseout (change a label's contents and set change an image botton's border color
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjavascript onmouseover and onmouseout (change a label's contents and set change an image botton's border color
    text
    copied!<p>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.</p> <p>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.</p> <p>Does anyone know why the ibSupportData button isn't firing the onmouseover event?</p> <p>And is my syntax for setting the BorderColor attribute correct?</p> <p>Thanks for any help - My code is below </p> <pre><code>&lt;script language="javascript" type="text/javascript"&gt; 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") } &lt;/script&gt; ... &lt;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" /&gt; &lt;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" /&gt; &lt;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" /&gt; &lt;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" /&gt; &lt;asp:Panel ID="pnlInfo" runat="server"&gt; &lt;asp:Label ID="lblDescr" runat="server" Text="" style="font-family: Calibri; font-size: medium"&gt; &lt;/asp:Label&gt; &lt;/asp:Panel&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload