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
var obj = document.getElementById(objID);
// for the object mouse over function (e = event)
obj.onmouseover = function(e)
{
obj.style.background = 'blue';
obj.style.color = 'white'
return true;
}
// for 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></p>
<a href="/" title="test" id="aid">Second test</a>
</html>
|
- Tutorials