title: javascript onmouseover and onmouseout (change a label's contents and set change an image botton's border color
body: <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>