checkbox hover effect

mkarthik415
mkarthik415 used Ask the Experts™
on
how to create hover effect on html checkbox using javascript events. when checkbox is selected and hover should display "clear" and when checkbox is not selected hover should display, "select"? Below is my attached code?



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="Checkbox1" type="checkbox" />
    </div>
    </form>
</body>
</html>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
I modified the above question a bit. i want one javascript function to handle multiple html elements hover. In the below code, i have a check box and a button.  when checkbox is selected and hover should display "clear" and when checkbox is not selected hover should display, "select"? and when hovered on button hover should display "click here" using one javascript function rather than having each function handling seperately.


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="Checkbox1" type="checkbox" />
        <input id="Button1" type="button" value="button" />
    </div>
    </form>
</body>
</html>
This should do what you want:
<HTML>
<HEAD>
<script language="javascript">
  function hide_tooltip() {
    document.getElementById("tooltipbox").style.display = "none";
    document.getElementById("tooltipbox").innerHTML = "";
  }
  function show_checkbox_tooltip(checkbox, event) {
    if (checkbox.checked)
      show_tooltip(event, "Clear");
    else
      show_tooltip(event, "Select");
  }
  function show_tooltip(event, msg) {
    document.getElementById("tooltipbox").style.display = "inline";
    document.getElementById("tooltipbox").style.left = event.clientX + 20;
    document.getElementById("tooltipbox").style.top = event.clientY + 30;
    document.getElementById("tooltipbox").style.width = 50;
    document.getElementById("tooltipbox").style.height = 20;
    document.getElementById("tooltipbox").innerHTML = msg;
  }
</script>
</HEAD>

<BODY>
<div id='tooltipbox' align="center" style='display:none;position:absolute;left:0;top:0;width:1;height:1;border:1px solid black;background-color:#FFFFCC'></div>
<INPUT TYPE="checkbox" NAME="Checkbox1" onmouseover="javascript:show_checkbox_tooltip(this, event);" onmouseout="javascript:hide_tooltip();">Check here!<BR>
</BODY>
</HTML>

Open in new window

Sorry, didn't see your second post, this code is a little more generic:
<HTML>
<HEAD>
<script language="javascript">
  function hide_tooltip() {
    document.getElementById("tooltipbox").style.display = "none";
    document.getElementById("tooltipbox").innerHTML = "";
  }
  function show_object_tooltip(object, event) {
    if (object.type == "checkbox") {
      if (object.checked)
        show_tooltip(event, "Clear", 20, 50);
      else
        show_tooltip(event, "Select", 20, 50);
      }
    else if (object.type == "button") {
      show_tooltip(event, "Click here", 20, 75);
    }
  }
  function show_tooltip(event, msg, height, width) {
    document.getElementById("tooltipbox").style.display = "inline";
    document.getElementById("tooltipbox").style.left = event.clientX + 20;
    document.getElementById("tooltipbox").style.top = event.clientY + 30;
    document.getElementById("tooltipbox").style.height = height;
    document.getElementById("tooltipbox").style.width = width;
    document.getElementById("tooltipbox").innerHTML = msg;
  }
</script>
</HEAD>

<BODY>
<div id='tooltipbox' align="center" style='display:none;position:absolute;left:0;top:0;width:1;height:1;border:1px solid black;background-color:#FFFFCC'></div>
<INPUT TYPE="checkbox" NAME="Checkbox1" onmouseover="javascript:show_object_tooltip(this, event);" onmouseout="javascript:hide_tooltip();">Check here!
<BR><BR>
<INPUT NAME="Button1" TYPE="button" VALUE="button" onmouseover="javascript:show_object_tooltip(this, event);" onmouseout="javascript:hide_tooltip();"/>
</BODY>
</HTML>

Open in new window

Did this work?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial