 Using JavaScript to Highlight Special Web Site Links
Introduction
Besides HTML (HyperText Markup Language), which produces static web pages,
there is another Web-based language that is more interactive. The simplest
of this interactive languages is JavaScript. Just as in HTML, which needs
careful attention to every detail of code, JavaScript also requires a lot
of accuracy and attention to detail in its coding. This article will
introduce the Catholic web developer to JavaScript, and how it can be used to
highlight web site links with descriptive messages displayed in the status
line whenever the mouse passes over each link.
Embedded JavaScript
JavaScript usually needs an opening <script> tag and a closing
</script> tag. For creating our special web site links, we will
use event handlers in the JavaScript language. These event handlers use
embedded JavaScript. With an embedded Javascript, it does not require
anymore the opening <script> tag and the closing </script> tag.
The script is just placed inside the <a href> tags. When the mouse moves
over the <a href> link, a descriptive message is displayed in the
status line.
onMouseOver event handler
It is this event handler of JavaScript that will display a message
in the status bar of your browser. The code for this
event handler is given below:
onMouseOver="window.status='place your message here'; return true"
You can place your message between the ' ' marks. As the mouse passes over the
link, this message will appear in the status bar - at the bottom of your browser
where the link's URL is usually seen. This onMouseOver event handler is placed
just after the <a href=".....html" link.
onMouseOut event handler
After coding the onMouseOver event handler, the next step is to create
the onMouseOut event handler. This event handler creates a message when
the mouse is moved out of the link area. The code for this event handler
is given below:
onMouseOut="alert('place your message here')"
<a>place your anchor text here</a>
The use of HTML table tags
To finally complete the coding of our special web site links, we need
to place the links and our two event handlers in tabular form. How
we form our tables depends on the width we want the table cell <td>
to be. For the example created below, I have used a width of 88 for the
table cell, and the background color, #98fb98.
Note: In case you do not see the messages displayed when the mouse passes over
and out of the link area, then the accessibility issue may be attributed to the
mouse you are using. Both onMouseOver and onMouseOut are device dependent event
handlers, and thus dependent on the type of mouse we are using. The mouse must be
compatible to the system requirements of our PC.
If you want more information on how to make the JavaScript event handlers work,
then you can refer to the books and link resources given below.
Summary
After HTML, we can study JavaScript, which is the easiest of the Web-based
computer languages. It takes time to learn it, but like HTML, once we know
the basics, we can be at ease with the language. When I started to use JavaScripts
as a Catholic web developer, I just copied and pasted the scripts created by other
programmers for its application in my Catholic web site and blogs. Soon, as I began
to learn more and more of web site development, I eventually found the need to
study the other computer languages. Learning a computer language needs both books and
online resources. The books give us the basics, and the online resources give us
current information about the computer language and its versions. This is how we
can make our learning more comprehensive and up-to-date.
Related resources
Get other ideas and updates on basic and small Catholic web site
development
If you intend to follow the methods presented in this web site - both
the basic and the advanced, you can choose any one of the following:
Published Articles Directory
Page 1 |
2 |
3 |
4
Dennis Emmanuel Cabrera
Web Developer Methods for Catholics
www.c-web-developer.net
My Main Catholic Blog
www.c-internet-mission.net
|
More
Information