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 4 of 4

Thread: hand help

  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hand help

    I have a <div> menu that drops down when the onmouseover hits a hotspot. I can't figure out how to get the menu to disappear when the mouse leaves it(so people don't have to mouseclick to make it disappear).

    I thought maybe if I had a function that went:
    function removeMenu()
    {
    if(document.body.style.cursor=!'hand')
    mouse.event=bnclicked; //or something like that
    }

    but I can't get it to work, because when the mouse transitions from the hotspot to the menu. It isn't a solid hand at all times.

    I have also tried other hairbrain schemes. Any ideas?

    maybe if I could set a timer for the amount of time after the hand has not been around?

    I'm sure there is an easier way.

  • #2
    Regular Coder
    Join Date
    Nov 2004
    Location
    The land of chocolate
    Posts
    226
    Thanks
    1
    Thanked 16 Times in 16 Posts
    I might be missing something here, but uhm... How about onMouseOut?

    In case you don't know, it is an event just like onMouseOver, with the only difference that it is triggered everytime the mouse leaves the div.

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by snowieken
    I might be missing something here, but uhm... How about onMouseOut?

    In case you don't know, it is an event just like onMouseOver, with the only difference that it is triggered everytime the mouse leaves the div.
    Code:
    <html>
    <head>
    <title>MY popup menu</title>
    
    <script>
    var oPopup = window.createPopup();
    function richDropDown()
    {   
    		oPopup.document.body.innerHTML = GPC_MENU.innerHTML; 
    		oPopup.show(108,58, 220, 150, GPC_MAP);
    		
    }
    
    function removeDropDown()
    {
    	//if(document.body.style.cursor!='hand')
    		alert();
    }	
    </script>
    </head>
    <body>
    
    <p><img src="Picture1.gif" width="800" height="600" border="0" usemap="#Map">
    
      <map name="Map">  	
        <area id=GPC_MAP shape="rect" coords="228,142,362,200" alt="click" onmousedown="richDropDown()"
    	onmouseover="document.body.style.cursor='hand'; " 
    	onmouseout="document.body.style.cursor=''; ">
    </p>
    <DIV ID="GPC_MENU" STYLE="display:none"  >
    
    <DIV STYLE="font-family:verdana; font-size:80%; height:30px; background:#0066FF; border:1px solid black; padding:0px; text-align:center; border:2px solid black; cursor:hand;">
       	&nbsp <img src="tridown.gif" align="left">  GPC Menu&nbsp <img src="tridown.gif" align="right">
        </DIV>
    
    <div style="position:absolute; top:30; left:0; overflow:scroll; overflow-x:hidden; width:220; height:120; scrollbar-base-color:#3366CC; border-bottom:2px solid black; SCROLLBAR-HIGHLIGHT-COLOR: #99CCFF; SCROLLBAR-ARROW-COLOR:white;">
    
        <DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)'; this.style.color='red' ;
    		this.style.fontSize='14'; " 
             onmouseout="this.style.filter=''; this.style.color='black'; this.style.fontSize='12';"
             STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand;">
        <SPAN ONCLICK="">
        OV-103</SPAN>
        </DIV>
        <DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=yellowgreen,	EndColorStr=#FFFFFF)'; this.style.color='red'; this.style.fontSize='14';" 
             onmouseout="this.style.filter=''; this.style.filter=''; this.style.color='black'; this.style.fontSize='12'"  
             STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
        <SPAN ONCLICK="">
        OV-104</SPAN> 
        </DIV>
    
    </div>
    </DIV>
    
    
    </body>
    The onmouseout doesn't work, because I can't seem to figure out the menu as a whole. They seem to work as different items. Thanks for your help. Let me know if you can think of anything.

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    does no one feel my pain?


  •  

    Posting Permissions

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