Click here to Skip to main content
14,982,215 members
Articles / Web Development / HTML
Posted 13 Nov 2011


4 bookmarked

Revised Green Links

Rate me:
Please Sign up or sign in to vote.
4.90/5 (3 votes)
13 Nov 2011CPOL5 min read
This article presents an improved method to display a definition for an abbreviation or initialism whenever the user hovers over the abbreviation or initialism.


This article presents an improved method to display a definition for an abbreviation or initialism whenever the user hovers over the abbreviation or initialism.


In an earlier CodeProject paper, Green Links - Acronyms and Initialisms exposed, one of the authors (gggustafson) presented a method whereby a <span> tag with the class of "green_link" could be expanded into a new class that displays a definition whenever the user hovered over the abbreviation.

There were a number of difficulties with the method:

  • The syntax of the <span> text was complicated, requiring a separator character be specified. If the separator was not specified, an unexpected and probably undesired result would occur.
  • If the web page reader did not have JavaScript enabled, the ugly contents of the <span> tag were displayed.
  • Both CSS and Javascript files were needed to be included in the HTML document.
  • The <body> tag required an onload attribute.

This revision addresses these issues and is backward compatible with the original method. It also supports two additional HTML tags.

Comparing the Original and the Revised Green Links

The original "Green Links" supported only a <span> tag of the form:

<span class="green_link">;Abbreviation;Definition</span>

This revision accepts <abbr> and <acromym> tags as well, using the forms:

<abbr class="green_link" title="Definition">Abbreviation</abbr>
<acronym class="green_link" title="Definition">Abbreviation</acronym>

In the <span> form of the green link, if a separator was missing, the resulting web page could take on an unwanted appearance. By using the <abbr> and <acronym> tags, there is no separator. Thus, the tags are simplified. In addition, there is major change in accessibility. If JavaScript is not enabled, the <abbr> and <acronym> tags display their contents "normally", as if the class="green_link" attribute was not present on the tag.

Only one file (the JavaScript file) needs to be included in the revised Green Links. The JavaScript file dynamically creates the necessary stylesheet so there is no need to include an external stylesheet file (CSS). If the GreenLinks.css file is included, it will be ignored by this revised method.

The JavaScript function that processes revise_green_links needs to be invoked through the onload attribute of the <body> tag, as in:

<body onload="initialize_green_links();">

This is no longer required. The JavaScript now contains a self-invoked function that parses the HTML page contents when the page is loaded.

The Workings of the Revised Green Links

The earlier Green Links was executed by invoking the initialize_green_links function through the <body> tag's onload attribute. In the new version, this function may still be invoked in that manner; however, it is unnecessary. When the JavaScript file GreenLinks.js is included in the HTML page, the following anonymous function is self-invoked upon page load.

( function ( ) 
   initialize_green_links ( );
} ) ( );

This anonymous function was added so that the onload attribute of the <body> tag need not be supplied but may be supplied as in earlier versions of Green Links. Thus the revised Green Links are fully backward compatible. Although the execution order is not insured across all browsers, the anonymous function usually executes before the target of any <body> tag onload attribute. The anonymous function invokes initialize_green_links.

function initialize_green_links ( ) 
    var found = false;
    // test the guard Boolean
    if ( initialize_green_links_invoked )
      // the anonymous function has 
      // probably been invoked, so 
      // this invocation is probably 
      // from an onload attribute 
      // that is attached to the 
      // <body> tag so return true 
      // so that the page will load
      found = true;
      // set the guard Boolean
      initialize_green_links_invoked = true;
      // create and fill the 
      // "green_links" array with 
      // nodes that are ACRONYM, 
      // ABBR and SPAN tags with a 
      // class of "green_link"
      green_links = new Array ( );
      green_links = elements_by_class_name ( 'green_link', 
                                             'abbr' ).concat ( 
                    elements_by_class_name ( 'green_link', 
                                             'acronym' ).concat ( 
                    elements_by_class_name ( 'green_link', 
                                             'span' ) ) );

      if ( green_links.length <= 0 )
          // nothing to do - there are 
          // no Green Links in the 
          // document
          create_green_links_stylesheet ( );
        abbreviation_alone_rule = 
            green_links_rule_retrieved ( 
                '.green_link_abbreviation_alone' );
        if ( abbreviation_alone_rule == undefined )
          abbreviation_definition_rule = 
              green_links_rule_retrieved ( 
                  '.green_link_abbreviation_definition' );
          if ( abbreviation_definition_rule == undefined )
          else if ( !initialize_green_link_action ( ) )
          else if ( !revise_green_links ( ) )
   = 'none';
   = 'inline';
            found = true;
    return ( found );

Immediately upon its invocation, initialize_green_links tests the value of a global Boolean guard. If the guard is true, initialize_green_links returns true (required if initialize_green_links was invoked through the onload attribute of the <body> tag). If the guard value is not true, initialize_green_links sets the global Boolean guard to true and:

  • Collects all document tree nodes with a class of green_link whose tag is <abbr>, <acronym>, or <span>, in that order.
  • If any such nodes exist, creates the stylesheet that supports Green Links. The creation of the stylesheet can be inhibited by setting the global variable DYNAMICALLY_CREATE_STYLESHEET to false. In that case, the HTML page must the include the GreenLinks.css file. (GreenLinks.css is included in the CSS directory of the download files.)
  • Finds the .green_link_abbreviation_alone and .green_link_abbreviation_definition rules and saves them in global variables. These two rules determine if Green Links are to be displayed.
  • If the two rules are found:
    • initialize_green_link_action is invoked to create and position the control that specifies whether or not Green Links are displayed. It also establishes the event handlers to process the onscroll events for the window and the document.
    • revise_green_links is invoked to process all of the earlier discovered Green Links in the document (i.e., <abbr>, <acronym>, and <span>).
    • Assigns default values to the .green_link_abbreviation_alone and .green_link_abbreviation_definition rules.

During the processing of Green Links, a new feature is added. Abbreviations and definitions are collected into a dictionary. This action occurs for any of the following Green Links forms:

1  <abbr class="green_link" 
           title="Tactical Receive Equipment">TRE</abbr>
2  <abbr class="green_link">TRE</abbr>

3  <acronym class="green_link">TRE</acronym>
4  <acronym class="green_link" 
          title="Tactical Receive Equipment">TRE</acronym>

5  <span class="green_link">;TRE;Tactical Receive Equipment</span>
6  <span class="green_link">TRE;Tactical Receive Equipment</span>
7  <span class="green_link">;TRE</span>
8  <span class="green_link">TRE</span>

Note that once an abbreviation is defined, the definition is available to all other Green Link tags on the page. So, for example, line 1, above, defines "TRE" for all following instances of Green Links appearing on the page (so too do lines 4, 5, and 6). This allows for shortened Green Links in the page (e.g., lines 2, 3, 7, and 8). When a complete Green Link is encountered, all earlier Green Links with the same abbreviation or initialism are accessed. If any of these Green Links are found to be incomplete, the incomplete Green Link will be replaced by the completely defined Green Link.

Using the Code

Unlike the original Green Links that had fours steps to obtain the Green Links effects, the revised Green Links requires only two.

  1. Include the JavaScript file in the HTML page. As mentioned in the earlier article, place the JavaScript include just before the </body> tag:
  2. HTML
    <script type="text/javascript" src="./Scripts/GreenLinks.js"></script>
  3. Determine any abbreviation or initialisms that might benefit from the use of Green Links and wrap them in one of the Green Links forms:
  4. HTML
    <abbr class="green_link" title="Definition">Abbreviation or Initialism</abbr>
    <acronym class="green_link" title="Definition">Abbreviation or Initialism</acronym>
    <span class="green_link">;Abbreviation or Initialism;Definition</span>

Note that class="green_link" may cause the error "The class or CssClass value is not defined." This message is caused by the fact that the class "green_link" will be defined in the dynamically created stylesheet. If you are uncomfortable with this message, a solution may be to add the following to the <head> of the page.

<style type="text/css">


This paper has presented a revised way in which to expand acronyms and initialisms to their definitions.

Browsers Tested

Google Chrome Firefox Internet Explorer Opera Safari

All of the browsers produced the expected results.


  • 11/13/2011 - Original article.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Authors

Software Developer (Senior)
United States United States
In 1964, I was in the US Coast Guard when I wrote my first program. It was written in RPG (note no suffixing numbers). Programs and data were entered using punched cards. Turnaround was about 3 hours. So much for the "good old days!"

In 1970, when assigned to Washington DC, I started my MS in Mechanical Engineering. I specialized in Transportation. Untold hours in statistical theory and practice were required, forcing me to use the university computer and learn the FORTRAN language, still using punched cards!

In 1973, I was employed by the Norfolk VA Police Department as a crime analyst for the High Intensity Target program. There, I was still using punched cards!

In 1973, I joined Computer Sciences Corporation (CSC). There, for the first time, I was introduced to a terminal with the ability to edit, compile, link, and test my programs on-line. CSC also gave me the opportunity to discuss technical issues with some of the brightest minds I've encountered during my career.

In 1975, I moved to San Diego to head up an IR&D project, BIODAB. I returned to school (UCSD) and took up Software Engineering at the graduate level. After BIODAB, I headed up a team that fixed a stalled project. I then headed up one of the two most satisfying projects of my career, the Automated Flight Operations Center at Ft. Irwin, CA.

I left Anteon Corporation (the successor to CSC on a major contract) and moved to Pensacola, FL. For a small company I built their firewall, given free to the company's customers. An opportunity to build an air traffic controller trainer arose. This was the other most satisfying project of my career.

Today, I consider myself capable.

Software Developer DDC OS
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

QuestionThis looks interesting... Pin
Thomas Giles15-Nov-11 12:15
MemberThomas Giles15-Nov-11 12:15 
AnswerRe: This looks interesting... Pin
gggustafson15-Nov-11 14:24
professionalgggustafson15-Nov-11 14:24 
GeneralRe: This looks interesting... Pin
Thomas Giles16-Nov-11 2:38
MemberThomas Giles16-Nov-11 2:38 
AnswerRe: This looks interesting... Pin
gggustafson16-Nov-11 2:47
professionalgggustafson16-Nov-11 2:47 
GeneralRe: This looks interesting... Pin
Thomas Giles16-Nov-11 3:00
MemberThomas Giles16-Nov-11 3:00 
AnswerRe: This looks interesting... Pin
jsc4216-Nov-11 0:00
professionaljsc4216-Nov-11 0:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.