Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    May 2008
    Location
    Michigan
    Posts
    216
    Thanks
    10
    Thanked 1 Time in 1 Post

    Exclamation Invalid "onMouseover"... Problem in JS

    I added this "show hint" script to my website. I submitted the URL in W3C's HTML validator. It says that XHTML doesn't support onMouseover, so I changed it to all lowercase: onmouseover.

    When I refreshed the page, the little error warning showed up in my lower left corner. The JavaScript seemed to not be working because I changed it from onMouseover to onmouseover. Help?

    Code:
    <script type="text/javascript">
    		
    var horizontal_offset="9px" //horizontal offset of hint box from anchor link
    
    /////No further editting needed
    
    var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
    var ie=document.all
    var ns6=document.getElementById&amp;&amp;!document.all
    
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    function iecompattest(){
    return (document.compatMode &amp;&amp; document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function clearbrowseredge(obj, whichedge){
    var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
    if (whichedge=="rightedge"){
    var windowedge=ie &amp;&amp; !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x &lt; dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
    }
    else{
    var windowedge=ie &amp;&amp; !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y &lt; dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
    }
    return edgeoffset
    }
    
    function showhint(menucontents, obj, e, tipwidth){
    if ((ie||ns6) &amp;&amp; document.getElementById("hintbox")){
    dropmenuobj=document.getElementById("hintbox")
    dropmenuobj.innerHTML=menucontents
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    if (tipwidth!=""){
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=tipwidth
    }
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
    dropmenuobj.style.visibility="visible"
    obj.onmouseout=hidetip
    }
    }
    
    function hidetip(e){
    dropmenuobj.style.visibility="hidden"
    dropmenuobj.style.left="-500px"
    }
    
    function createhintbox(){
    var divblock=document.createElement("div")
    divblock.setAttribute("id", "hintbox")
    document.body.appendChild(divblock)
    }
    
    if (window.addEventListener)
    window.addEventListener("load", createhintbox, false)
    else if (window.attachEvent)
    window.attachEvent("onload", createhintbox)
    else if (document.getElementById)
    window.onload=createhintbox
    
    </script>
    Code:
    <a href="#" class="hintanchor" onmouseover="showhint('Display hint here.', this, event, '150px')"><img src="/images/help.gif" alt=""/></a>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    In several places you have invalid syntax:-
    &amp;&amp; which should be &&
    Likewise &lt; instead of <

    Even after correcting these I was unable to generate a tooltip. But if all you want to do is display a hint when the user mouses over an image then this script is absurdly over-engineered. Consider this:-

    Code:
    <img src = "one.jpg" onmouseover = "showHint(1)" onmouseout = "noShow(1)"><br>
    <span id = "hint1" class = "hints" style="visibility:hidden"> The text of the hint 1........ </span>
    <br><br>
    <img src = "two.jpg" onmouseover = "showHint(2)" onmouseout = "noShow(2)"><br>
    <span id = "hint2" class = "hints" style="visibility:hidden"> The text of the hint 2........ </span>
    
    <style type="text/css">
    .hints {
    width:250px;
    text-align:left;
    font-size:9pt;
    padding:6px;
    border:1px solid #000000;
    margin-left: 20px; 
    margin-top:8px;
    background-color:#fff000;
    }
    </style>
    
    <script type = "text/javascript">
    function showHint(which) {
    document.getElementById("hint" + which).style.visibility="visible";
    }
    function noShow(which) {
    document.getElementById("hint" + which).style.visibility="hidden";
    }
    </script>
    Naturally you can adjust the appearance/position of the hint box by changing the CSS.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 09-17-2009 at 08:10 PM. Reason: Improved


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •