el.onmouseover = Show

**muazzez** · Mar 31, 2007 07:48

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...

**Pepejeria** · Mar 31, 2007 08:27

You are trying to access the "aid" element before it has been loaded. You need to use window.onload.

**mburt** · Mar 31, 2007 08:42

Yes. Elements can't be in a global scope. They have to be within functions (or equivalent) called within the body.

**Pepejeria** · Mar 31, 2007 08:45

Originally Posted by mburt

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.

**muazzez** · Mar 31, 2007 08:54

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()">

**Pepejeria** · Mar 31, 2007 09:16

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;
}

User Tag List

Thread: el.onmouseover = Show

Thread Tools

Display

Hybrid View

el.onmouseover = Show

Bookmarks

Bookmarks

Posting Permissions