Displaying info on the status bar when the user moves the mouse pointer over a link
Suppose you are linking to a page. You use a form like this:
<![CDATA[<a href="next_page.html">Next page</a>]]>
This will result in displaying
in the browser. When the user reads this he doesn't get any idea
what this "Next page" is about.
Suppose this next page is about the nerve system of mammals. Wouldn't it then be much nicer and more informative to display:
This is accomplished by adding the attribute onMouseOver to the <a href> tag with the value
"window.status='The text to be displayed on the status bar'; return true"
Actually, to be precise, onMouseOver is an event handler but we call it an attribute because it is used here just like an HTML tag attribute.
Here is the example:
<![CDATA[
<a href="next_page.html" onMouseOver="window.status='Nerve system of mammals'; return true">Next page</a>
]]>
But don't you hate the message left on the status bar even after you have moved the mouse pointer off the link?
There are two ways to avoid that:
- by using another attribute onMouseOut with the value assigned
"window.status=''" so that it looks like:
<![CDATA[
<a href="next_page.html" onMouseOver="window.status='Nerve system of mammals'; return true" onMouseOut="window.status=''">Next page</a>
]]>
-
by clearing the status bar after a certain amount of time has elapsed since displaying the message:
<![CDATA[
<script language=JavaScript>
<!--
function clear(){
window.status=''
}
// -->
</script>
<a href="next_page.html" onMouseOver="window.status='Nerve system of mammals'; setTimeout('clear()',1000)" return true;>Next page</a>
]]>
This works with every browser that supports JavaScript, but as you can see, the message does not disappear when you move the mouse pointer off the link, but when a certain amount of time (in the example above: 1000 milliseconds = 1 second) has expired since displaying the message.
A bit of theory
If you are actually interested in learning JavaScript, and would like to know more than the surface of the above ready-to-use examples, keep on reading.
If not, then:
That's all for this week, goodbye and come again next week.
In the first example I mentioned something about event handlers.
In JavaScript there are a certain number of event handlers such as
onMouseOver and onMouseOut which are embedded in documents as attributes of HTML
tags to which you assign JavaScript code to execute when a corresponding event occurs.
Events are actions that occur, usually as a result of something the
user does. In our examples events are moving the mouse pointer over the link
(this event handles the event handler onMouseOver) and off the link
(this event handles the event handler onMouseOut that has been implemented
only in Netscape Navigator 3.0 up to now - that's why other browsers don't
recognize it, and why our first example of erasing the status bar message will work only
on NN 3.0).
Now that we know what event handlers are, let's concentrate on the code that
we assign to the onMouseOver event handler:
onMouseOver='window.status="Nerve system of mammals"; return true'
I have deliberately written it differently than in the examples above: it doesn't matter
when we use single(') or double(") quotes, it only matters that we use them alternatively, so
that the browser knows which quotes belong together, ie. that the second string is embedded within the first one.
window is a predefined object in JavaScript where information about the
browser window is stored. A JavaScript object has properties associated with it.
You access the properties of an object with a simple notation:
objectName.propertyName
Both the object name and property name are case sensitive. (Actually, the whole
JavaScript language is case sensitive, so make sure you don't write uppercase
when lowercase is needed. Actually, JScript, Microsoft's version of JavaScript,
is not case sensitive, but unless you are writing scripts only for MSIE 3.0
users, make sure you write according to the original Netscape's JavaScript.)
The property of an object behaves like a variable that can be assigned a value
(unless a read-only property) or whose predefined value can be read and
then used in expressions or assigned to another variable.
So, to the property status of the object window we assign a string that
is displayed on the status bar. After that, we must add return true;.
Now you can also understand erasing message with the onMouseOut event handler,
so the only thing left to explain is:
<![CDATA[
<script language=JavaScript>
<!--
function clear(){
window.status=''
}
// -->
</script>
<a href="next_page.html" onMouseOver="window.status='Nerve system of mammals'; setTimeout('clear()',1000)" return true;>Next page</a>
]]>
Let's start from what's being executed when the event is generated:
We display the message on the status bar, and then call the
setTimeOut method. This is the method of the window object,
which means that objects not only have properties that behave like variables,
but also have methods.
This also means that we can write timerID=window.setTimeOut(expression,msec).
But, the object's name can be omitted here, just like we don't have to
assign the value that this method (function in some other languages) returns.
expression above represents a string expression or a property of an existing
object that will be executed after msec milliseconds. In our example,
after 1000 ms, function clear() will be executed. This function we define
within <script> </script> tag. This is where we actually embed all the
JavaScript code - functions and variables within an HTML document.
It takes language attribute that specifies which scripting language
is being used. It is good practice to put this tag within <head> tag, so
that all the JavaScript source gets read (functions and variables defined) before the body of the
document is loaded; that way we are sure that they won't be called before
they are defined. Also, as older browsers don't recognize <script> tag,
the whole source is enclosed as a comment so older browsers won't display it.
Now that you know all this, you can even combine the first and second way
of removing the message from the status bar, so that on NN 3.0 you use the first
way and on other browsers the second one. To do this, you also need to know how to
recognize which browser is being used. And we'll talk about this in the following weeks.
So bookmark this page and visit it again!
This page hosted by
.
Get your own Free Home Page