SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    el.onmouseover = Show

    I use this:
    Code:
      
    <style type="text/css">
      .transparent {
        filter:alpha(opacity=90);
        -moz-opacity: 0.90;
        opacity: 0.90;
        -khtml-opacity: 0.90;
        background-color:green;
        display:none;
        width:170;
        height:100;
        position:absolute;
        color: white;
        border: 1 green solid;
    }
    </style>
    
    <script type="text/javascript">
    
    function Show(e)
    {
      var e=(!e)?window.event:e;//IE:Moz
      var tmpX = 0;
      var tmpY = 0;
    
      if(e.pageX)
      {
        tmpX = e.pageX + window.pageXOffset;
        tmpY = e.pageY + window.pageYOffset;
      } else if(e.clientX) {
    			if(document.documentElement){//IE 6+ strict mode
        	tmpX = e.clientX + document.documentElement.scrollLeft;
        	tmpY = e.clientY + document.documentElement.scrollTop;
    			}
    			else if(document.body){//Other IE
        	tmpX = e.clientX + document.body.scrollLeft;
        	tmpY = e.clientY + document.body.scrollTop;
    			}
      } else {
        return false
      }
    
     var el = document.getElementById('Popup');
         el.style.left = tmpX +'px';
         el.style.top = (tmpY + 35)+'px';
         el.style.display = "block";
    }
        
    function Hide()
    {
       var el = document.getElementById('Popup');
           el.style.display = "none";
    }
    </script>
    
    <body bgcolor="black" text="white">
    <a href="" onMouseOut="Hide()" onMouseOver="Show(event)" 
      onMouseMove="Show(event)" id="aid">Move the mouse over here</a><br>
    <br>
    Move your move over the link above<br>
    and the pop-up appears. And the pop-up<br>
    follows your mouse as long as your mouse<br>
    is still over the link. 
    
    <div id="Popup" class="transparent">
        <div style="background-color: #003366">
          <b>Title goes here</b></div>
        <div></b>Description goes here</div>
    </div>
    </body>
    or this:
    Code:
      
    <style type="text/css">
      .transparent {
        filter:alpha(opacity=90);
        -moz-opacity:0.90;
        opacity:0.90;
        -khtml-opacity:0.90;
        background-color:green;
        display:none;
        width:170;
        height:100;
        position:absolute;
        color: white;
        border: 1 green solid;
    }
    </style>
    
    <script type="text/javascript">
        /* this function shows the pop-up when
         user moves the mouse over the link */
        function Show(e)
        {
        var Popup = document.getElementById('Popup');
       var e=(!e)?window.event:e;//IE:Moz
            /* get the mouse left position */
            x = e.clientX + document.body.scrollLeft | e.pageX + window.pageXOffset | e.clientX + document.documentElement.scrollLeft;
            /* get the mouse top position  */
            y = e.clientY + document.body.scrollTop  | e.pageY + window.pageYOffset  | e.clientY + document.documentElement.scrollTop ;
            /* display the pop-up */
            Popup.style.display="block";
            /* set the pop-up's left */
            Popup.style.left = x +'px';
            /* set the pop-up's top */
            Popup.style.top = (y+35) +'px';
        }
        /* this function hides the pop-up when
         user moves the mouse out of the link */
        function Hide()
        {
            var Popup = document.getElementById('Popup');
            /* hide the pop-up */
            Popup.style.display="none";
        }
    </script>
    
    <body bgcolor="black" text="white">
    <a href="" onMouseOut="Hide()" onMouseOver="Show(event)" 
      onMouseMove="Show(event)" id="aid">Move the mouse over here</a><br>
    <br>
    Move your move over the link above<br>
    and the pop-up appears. And the pop-up<br>
    follows your mouse as long as your mouse<br>
    is still over the link. 
    
    <div id="Popup" class="transparent">
        <div style="background-color: #003366">
          <b>Title goes here</b></div>
        <div></b>Description goes here</div>
    </div>
    </body>
    They are working on Opera 9.10, Firefox 2.0.0.3 and İnternet Explorer 6.0.
    I change this:
    Code:
    <a href="" onMouseOut="Hide()" onMouseOver="Show(event)" 
      onMouseMove="Show(event)" id="aid">Move the mouse over here</a>
    to this:
    Code:
      <a href=""  id="aid">Move the mouse over here</a>
    and add this to scripte:
    Code:
      document.getElementById('aid').onmouseout=Show
      document.getElementById('aid').onmouseover=Hide
      document.getElementById('aid').onmousemove=Show
    I tried the following code, but it did not work.
    Code:
      
      <style type="text/css">
      .transparent {
        filter:alpha(opacity=90);
        -moz-opacity:0.90;
        opacity:0.90;
        -khtml-opacity:0.90;
        background-color:green;
        display:none;
        width:170;
        height:100;
        position:absolute;
        color: white;
        border: 1 green solid;
    }
    </style>
    
    <script type="text/javascript">
        /* Kullanıca fareyi link &#252;zerine getirince popup g&#246;r&#252;nmesini sağlar, bu fonksiyon. */
        function Show(e)
        {
       var Popup = document.getElementById('Popup');
       var e=(!e)?window.event:e;//IE:Moz
            x = e.clientX + document.body.scrollLeft | e.pageX + window.pageXOffset | e.clientX + document.documentElement.scrollLeft;
    
            y = e.clientY + document.body.scrollTop  | e.pageY + window.pageYOffset  | e.clientY + document.documentElement.scrollTop ;
          
            Popup.style.display="block";
           
            Popup.style.left = x +'px';
            
            Popup.style.top = (y+35) +'px';
        }
       
           function Hide()
        {
            var Popup = document.getElementById('Popup');
           
            Popup.style.display="none";
        }
        
    var el = document.getElementById('aid');
    el.onmousemove = Show
    el.onmouseover = Show
    el.onmouseout = Hide
    
    </script>
    
    <body bgcolor="black" text="white">
    <a href="" id="aid">Move the mouse over here</a><br>
    <br>
    Move your move over the link above<br>
    and the pop-up appears. And the pop-up<br>
    follows your mouse as long as your mouse<br>
    is still over the link. 
    
    <div id="Popup" class="transparent">
        <div style="background-color: #003366">
          <b>Title goes here</b></div>
        <div></b>Description goes here</div>
    </div>
    </body>
    What can I do? Thanks...
    Last edited by muazzez; Mar 31, 2007 at 12:59.

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are trying to access the "aid" element before it has been loaded. You need to use window.onload.

  3. #3
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes. Elements can't be in a global scope. They have to be within functions (or equivalent) called within the body.
    Mike - Side project: Live Journal (blogging site).

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mburt View Post
    Yes. Elements can't be in a global scope. They have to be within functions (or equivalent) called within the body.
    What? What do you mean. You can have global variables referring to nodes.

  5. #5
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks... It is working, now.
    Code:
      window.onload=function(){  
    var el = document.getElementById('aid');
    el.onmousemove = Show
    el.onmouseover = Show
    el.onmouseout = Hide
    }
    or
    Code:
    function loadfunction(){  
    var el = document.getElementById('aid');
    el.onmousemove = Show
    el.onmouseover = Show
    el.onmouseout = Hide
    }
    </script>
    
    <body bgcolor="black" text="white" onload="loadfunction()">

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First version is preferable, since you separate the functionality from the content.

    One tip, same goes with the CSS, instead of using deprecated attributes, set the style in a external CSS file.
    Code:
    body {
        color:white;
        background-color:black;
    }


Bookmarks

Posting Permissions

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