Saturday, November 06, 2004

How do I change my cursor?

Note: The techniques in the article should work in most modern browsers. To see examples in action hold your mouse over any word with text that is not in a regular font (such as emphasized or bold)

In CSS Positioning the acronym CSS has a faint line beneath it and placing the mouse pointer over it changes the cursor (in most browsers) to an arrow with a question mark. How was this done?

First I should comment that I am amazed to find that in nearly a decade of coding websites I still find basic HTML elements that for one bad habit or another I either do not use or have overlooked. I now make an effort to periodically review the basics. The W3C has invaluable reference material concerning Internet specifications and W3Schools is an absolutely wonderful place to review a skillset or develop a new one for free.

What is the difference between an abbreviation and an acronym? Dictionary.com gives the following definitions:

abbreviation
A shortened form of a word or phrase used chiefly in writing to represent the complete form, such as Mass. for Massachusetts or abbr. for abbreviation.
acronym
A word formed from the initial letters of a name, such as WAC for Women's Army Corps, or by combining initial letters or parts of a series of words, such as radar for radio detecting and ranging.

The W3C in section 9.2 Structured Text devotes a sub-section to Phrase elements. These include: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM. In this article alone I have made use of EM, STRONG, DFN, CODE, CITE, ABBR, and ACRONYM.

Now that we have learned or relearned some basic HTML, let's combine it with some CSS to create a working example. Let's use the acronym CSS (Cascading Style Sheets) as our example. Since this is an acronym and not an abbreviation we will use the HTML <acronym>:
<acronym>CSS</acronym>
That changed the appearance but didn't give us text. The text is added with the title atttribute.
<acronym title="Cascading Style Sheets">CSS</acronym>
Now if we hover our mouse over CSS for a second or two the words "Cascading Style Sheets" appear. What about the cursor? The cursor needs to be done with, ironically enough, CSS. We will use an inline style in our example and discuss alternatives in a different article.
<acronym title="Cascading Style Sheets" style="cursor:help;">CSS</acronym>
Abbreviations (definitions etc) can all be done the same way.
<abbr title="Street" style="cursor:help;">St.</abbr>

In upcoming articles, I will discuss:
The inspiration for this article came from frequent visits to Terreus who uses this technique and inspired me to ask "How does he do that?!" Terreus has to be one of the most exceptional well marked up sites I have visited in recent times. Kudos to the developer!

djuggler's personal blog is Reality Me.


Posted by: djuggler | 9:31 PM |