use mouseover to highlight selected words only

[Albert1955]

Hi
I have a big paragraph of text with a few selected words that I want to change color with "on mouse over", similar to a hyperlink.
But I want ALL the selected words to change when the mouse goes over any of them, not just the one.
can any one help thanks
A

[rangana]

Use the onmouseover event.

Alternatively, if you're stumped, show us where you're stumbled upon.

[Albert1955]

Sorry even more confused now
i know i have to do:
onmouseover="style.color='#ffffff';"
onmouseout="style.color='#123456';"
to change one word wrapped in a <span>, but where do I put this and how does it change all the other words wrapped in seperate <span></span> tags?
can you give me more help?
thanks
A

[rangana]

The inline event should be added on every element you want it to work.

Alternatively, we can add a script that would identify the span element of your desire.

I suggest give those span element a class name like:

Code: Select all

<span class="special">
This will have the onmouseover and onmouseout event
</span>


The above code has a class name of special.

We can take advantage of that. First, have this stylesheet:

Code: Select all

<style type="text/css">
.special{
color:#123456;}
.special:hover{
color:#fff;
}
</style>


..but that won't work well with IE.

You need Javascript:

Code: Select all

<script type="text/javascript">
window.addEventListener?window.addEventListener('load',function()
   {
      ray.setSpecial('special'); // Pass the class name of the element
   },false):
window.attachEvent('onload',function()
   {
      ray.setSpecial('special'); // Pass the class name of the element
   }); // FF : IE
var ray=
{
setSpecial:function(clsNme)
   {
   var classEl = this.getClass(clsNme);
   for(var i=0;i<classEl.length;i++)
      {
      classEl[i].onmouseover=function()
         {
         this.style.color='#fff'; // Turn the color to white
         }
      classEl[i].onmouseout=function()
         {
         this.style.color='#123456'; // Turn the color to hexadecimal equivalent.
         }
      }
   },
getClass:function(classEl)
   {
      var els=document.getElementsByTagName('*'); // Get all elements
      var classArr = [] ; // Declare empty array
      var regExp = new RegExp('\\b'+classEl+'\\b'); // Class Element RegExp
      for(var i=0;i<els.length;i++)
         {
         if (regExp.test(els[i].className)) // If match on regExp
            classArr.push(els[i]); // Add into classArr array
         } // End of for loop
      return classArr; // Return the array;
   }
}
</script>


Hope that helps.