On mouse events

Within javascript it is able to reference an HTML object so that if any “on” events happen, for example if an mouse hovers over the HTML object it is called onmouseover event and these events are capable of changing the webpage as well.

To create an process attached to an event, you can either add the code inline to the HTML object like

       <a href="/" title="testing" onmouseover="javascript:this.style.background = 'blue'" onmouseout="javascript:this.style.background = 'white'">First Test </a>

This will change the link object <a> events for when the mouse hovers over the <a> HTML object (onmouseover) and also when the mouse leaves the <a> HTML object (onmouseout).

Also with using the body HTML onload event, it is able to attach an javascript process to any object without doing inline code.

       <body onload="javascript:objload('aid');">

which is attached to any function, in this case I have attached to objload(objectID) function.

Here is the full HTML code

<html>
       <head>
              <script language="javascript">
                     /// can do a window.onload function instead of the body onload
                     window.onload = function()
                     {
                            //objload("aid");
                     }
 
                     // function to alter the object with mouse over events
                     function objload(objID)
                     {
                            // obtain the object of the passed in element ID
                            <span style='color:blue'>var</span> obj = document.getElementById(objID);
                            // <span style='color:blue'>for</span> the object mouse over function (e = event)
                            obj.onmouseover = function(e)
                            {
                                   obj.style.background = 'blue';
                                   obj.style.color = 'white'
                                   return true;
                            }
                            // <span style='color:blue'>for</span> the object mouse out function 
                            obj.onmouseout = function(e)
                            {
                                   obj.style.background = 'white';
                                   obj.style.color = 'blue';
                            }
                     }
              </script>
       </head>
       <!-- can do onload event with the standard html -->
       <body onload="javascript:objload('aid');">
              <a href="/" title="testing" onmouseover="javascript:this.style.background = 'blue'" onmouseout="javascript:this.style.background = 'white'">First Test </a>
              <p>
              <a href="/" title="test" id="aid">Second test</a>
</html>

2 thoughts on “On mouse events”

  1. image manipulations ? what sort of image manipulations ? I shall do some posts on that next :).. on image moving, replacements etc.

Leave a Reply

Your email address will not be published.