Highlight Link

[Johnathan]

Don't really know what to google for. But I want to know how to do that think when you hover over a link the whole thing highlights... Like this http://boagworld.com/ .

[dflynn]

Something like this:

onrollover yadayadayada style="background-color: #FFFF66"

[rangana]

Have you tried something along the lines of:

Code: Select all

<a href="#" onmouseover="this.style.background='#0f0';">Link</a>


[Johnathan]

Something like this:

onrollover yadayadayada style="background-color: #FFFF66"

Thank You dflynn.

Code: Select all

<a href="#" onmouseover="this.style.background='#0f0';">Link</a>

Would I not need to insert that for every link?

[rangana]

Yes, it should be, but this can also be done with a for loop, to access every link.

This should work:

Code: Select all

<script type="text/javascript">
window.onload=function()
{
   var rangAs=document.getElementsByTagName('a');
   for(var rangLoop=0;rangLoop<rangAs.length;rangLoop++)
   {
   rangAs[rangLoop].onmouseover=function()
      {
      this.style.background='#0f0'; //background when hovered
      }
   rangAs[rangLoop].onmouseout=function()
      {
      this.style.background='#fff'; //Background when not on hover
      }
   }
}
</script>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>


See if it helps

[Johnathan]

But will that not make the links always highlighted and only a different colour on rollover?

[rangana]

What do you mean?

The codes i've given highlights the background when you hovered over it, and returns to its original background.

See coments from the code,..or i'm missing something.

[Johnathan]

It's ok I think I understand it now , I was in a rush this morning.

[rangana]

No worries, glad to help