Capture Mouse Event.

[The Little Guy]

I would like to capture the mouse event, when the user does something to a link, when the user mouse overs it, and change it when the user mouse's out of it.

 

Why doesn't this work?

function highlight(e,id){
e.onMouseover=function(){
	document.getElementById(id).style.textDecoration = 'underline';
}
e.onMouseout=function(){
	document.getElementById(id).style.textDecoration = 'none';
}
}

[JasonLewis]

Why can't you just use CSS?

 

<style type="text/css">
a.underline_links {
text-decoration:none;
}

a.underline_links:hover {
text-decoration:underline;
}
</style>

<a href="page2.php" class="underline_links">A Link</a>

[The Little Guy]

a few reasons:

 

1. Its not on the entire link.

2. I want to add other JavaScript stuff to it too.

[JasonLewis]

How are you calling the highlight function, I'm curious about this now.

[The Little Guy]

I call the event like this:

 

<a onmouseover="highlight(event,this.id)" onmouseout="highlight(event,this.id)" id="'.$row['id'].'" .... >Text</a>

[obsidian]

Passing in the event and id are really not necessary for simply triggering a function like that. By the time you set your highlight function, your onmouseover has already been triggered. Try something like this: assign a recognizable class to all the anchor tags which you want this method applied. Then, when your page loads, dynamically apply the event handler to all the different pieces:

 

Javascript:

window.onload = function()
{
  var eles = document.getElementsByTagName('a');
  for (var i = 0; i < eles.length; i++)
  {
    if (eles[i].className == 'hover-me')
    {
      eles[i].onmouseover = function()
      {
        this.style.textDecoration = 'underline';
      }

      eles[i].onmouseout = function()
      {
        this.style.textDecoration = 'none';
      }
    }
  }
}

 

The above code will execute when the page loads to set all links with the class of "hover-me" to react in the way defined by the functions. So, all you have to do is set up your links:

<a href="#" class="hover-me">I will change</a>
<a href="#">I will not</a>

 

Good luck!

[The Little Guy]

obsidian, that messes up my page's layout some how...

[obsidian]

obsidian, that messes up my page's layout some how...

 

Hmm... that's odd. My function doesn't do anything with layout at all... Do you have other JavaScript that needs to run on page load as well? My onload assignment may overwrite something you have in place...

[The Little Guy]

yeah, I use some js to set the bottom footer.

[emehrkay]

You are going about this the wrong way and obsidian's answer to attach the event to the object is the way to do it. The only issue is that it may overwrite other onload events.

 

You may be able to use

 

window.attachEvent('onload', function); //where function is the name of your function

[obsidian]

You may be able to use

 

window.attachEvent('onload', function); //where function is the name of your function

 

Good call, emehrkay.

 

If you can indeed use the attachEvent for the handler, that would be great, since it will pile up all the handlers that you attach. So, whatever you run for your footer would need to be attached as well as the code that I sent you. If you have issues with attaching more than one action to the event, you can use my previous window.onload code, but you'll need to place everything that needs to happen at page load within that one function declaration.

[The Little Guy]

not my favorite way, but It might just have to do...

 

function highlight(evnt,id){
if(evnt == 'over'){
	document.getElementById('message_'+id).style.textDecoration = 'underline';
}else if(evnt == 'out'){
	document.getElementById('message_'+id).style.textDecoration = 'none';
}
}

 

onmouseover="highlight(\'over\',this.id)" onmouseout="highlight(\'out\',this.id)"

[obsidian]

If you are determined to do it inline like that, at least clean it up a bit:

function highlight(ele, action)
{
  if (action == 'over')
  {
    ele.style.textDecoration = 'underline';
  }
  else
  {
    ele.style.textDecoration = 'none';
  }
}

 

<a href="#" onmouseover="highlight(this, 'over');" onmouseout="highlight(this, 'out');">Try me</a>

[The Little Guy]

That won't work, because it isn't being applied to its self, the style is being applied to another link.

[obsidian]

That won't work, because it isn't being applied to its self, the style is being applied to another link.

 

Ah, ok...