Click here to Skip to main content
15,029,010 members
Articles / Web Development / HTML
Posted 22 Jun 2011


13 bookmarked

Green Links - Acronyms and Initialisms exposed

Rate me:
Please Sign up or sign in to vote.
4.83/5 (13 votes)
23 Jun 2011CPOL5 min read
Describes a method whereby the definition of Acronyms and Initialisms can be shown when the user hovers over a specially displayed Abbreviation or Initialism


A method is presented to provide a definition for an abbreviation or initialism whenever the user hovers over the abbreviation or initialism.


In much of my writing, I find that I am using quite a few acronyms and initialisms. I normally write out the phrase followed by the abbreviation or initialism in parentheses. For example, I would write:

Many years ago, the US Naval Undersea Center (NUC) in San Diego, CA, was in need of a better way to access data. The University of Hawaii had assembled a very large collection of marine biological data in the Hawaiian archipelago. The collection, known as the Hawaiian Coastal Zone Data Bank (HCZDB), contained 65 million individual observations of marine life found in the waters surrounding Hawaii....

Then, somewhere further down in the document, I would use "NUC" or "HCZDB". But a large number of paragraphs could appear between a definition and its next use. So, unless the reader was familiar with the subject matter, he would have to search for the meaning of, say, HCZDB.


We are probably all familiar with the use of "green links" that appear on the web. The link is usually green with a double underline. When hovered over, a pop-up would appear, usually some form of advertising. For example,

Image 1

So this was my solution. Replace the abbreviation or initialism with a "Green Link" that would provide a definition when the abbreviation was hovered over. For example,

Image 2


Implementing Green Links requires, in addition to the HTML file, CSS and JavaScript files.

In the page HTML, wherever a Green Link is desired, a <span> of the form...

<span class="green_link">;Abbreviation;Definition</span> inserted. In this case, the leading semicolon specifies the separator that will be used between the abbreviation and its definition. Any printing character that does not appear in either the abbreviation or the definition may be used. The reader is cautioned that a semicolon is not useful as a separator if an HTML special character is in either the abbreviation or definition (e.g., &amp;, &quot;, &lt;, &gt;, etc.). Use a different separator, say, "!".

For Green Links to appear in the document, preprocessing is required. The preprocessing is initiated after the page has been loaded, triggered by a <body> onload event handler:

<body onload="initialize_green_links();">

JavaScript functions replace the original "green_link" <span> by:

<span class="revised_green_link">
  <span class='abbreviation_alone'>
  <span class='abbreviation_definition'>
    <a id='greenlink_1'></a>
    <a href='#greenlink_1' 
      <span class='abbreviation'>
      <span class='definition'>

In addition, the script creates a Remove/Restore Green Links link that allows a reader to disable (or enable) the Green Links on a page.


In the GreenLinks.js file, three JavaScript global variables are required to maintain state.

var abbreviation_alone_rule = null;
var abbreviation_definition_rule = null;
var green_links_displayed = false;

The first two point to the CSS rules that determine how the Green Link will be displayed. The Boolean records the display state of the Green Links.

The Javascript function initialize_green_links() controls the process:

function initialize_green_links ( ) 
  var found = false;
  if ( !green_links_found ( ) )
    abbreviation_alone_rule = green_links_rule_retrieved ( 
                                '.abbreviation_alone' );
    if ( abbreviation_alone_rule == undefined )
      abbreviation_definition_rule = green_links_rule_retrieved ( 
                                       '.abbreviation_definition' );
      if ( abbreviation_definition_rule == undefined )
      else if ( !initialize_green_link_action ( ) )
      else if ( !revise_green_links ( ) )
        { = 'none'; = 'inline';
  return ( found );

The function determines if there are any Green Links on the page. If there are none, it exits, returning that fact.

I wanted to create the Green Links style sheet dynamically using JavaScript thus simplifying the use of Green Links (no need to include a GreenLinks.css file and a GreenLinks.js file, only the GreenLinks.js file). Unfortunately, Google Chrome prohibited this solution. So the style sheet must be included as a separate CSS file.

The two rules that govern how the Green Links are displayed are retrieved from the style sheet. These rules are stored in global variables to allow them to be rapidly accessed and their styles modified (see Dynamic Font Size Using HTML and JavaScript). Once retrieved, the styles for the two rules are set to the default values.

The Remove/Restore link (green_link_action) is created and positioned on the web page. The link is positioned absolutely. As the page scrolls, the position is recalculated so that the link's position is maintained at the top left of the web page.

Finally, all "green_link" <span>s are replaced by the "revised_green_link" <span>s.

Using the Code

The first step to using Green Links is to include the CSS and JavaScript files in the HTML page. Following standard practice, place the CSS file in the document's <head>.

<link type="text/css"
      href="./CSS/GreenLinks.css" />

Then alter the <body> tag to include the onload handler:

<body onload="initialize_green_links();">

The onload handler can be placed on each page of a web site, whether or not the page contains Green Links. The test to determine if Green Links are present is very fast, hardly affecting the page rendering time.

Following the online discussions by Google employees, I place the JavaScript include just before the </body> tag:

    <script type="text/javascript" 


Now the more difficult task. Determine if a web page contains any acronyms or initialisms that could benefit from the use of Green Links. For each identified item, create the "green_link" <span> in place of the item. Say, for example, the following text appeared on your web page:

  ICF devices use "drivers" to rapidly heat the outer layers
  of a "target" in order to compress it. The target is a 
  small spherical pellet containing a few milligrams of fusion 
  fuel, typically a mix of D and T. The energy of the laser 
  heats the surface of the pellet into a plasma.

If the initialism "ICF" and the chemical symbols "D", "T" were to be replaced with Green Links, the text would become:

<span class="green_link" >;ICF;Inertial Confinement Fusion</span>
  devices use "drivers" to rapidly heat the outer layers 
  of a "target" in order to compress it. The target is a 
  small spherical pellet containing a few milligrams of 
  fusion fuel, typically a mix of 
<span class="green_link" >;D;deuterium</span>
<span class="green_link" >;T;tritium;</span>. 
  The energy of the laser heats the surface of the pellet 
  into a plasma. 

and would be displayed as:

ICF devices use "drivers" to rapidly heat the outer layers of a "target" in order to compress it. The target is a small spherical pellet containing a few milligrams of fusion fuel, typically a mix of D and T. The energy of the laser heats the surface of the pellet into a plasma.

When a reader hovers over one of the Green Links, the definition would be displayed (e.g., "Inertial Confinement Fusion" for "ICF", "deuterium" for "D", and "tritium" for "T") .

In order to see the results of this technique, visit Summary of Real-Time Projects. On that page, I have used Green Links (maybe overused to make the point).


This paper has presented a simple 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.


  • 06/22/2011 - Original article
  • 06/23/2011 - Added a link to a Green Links example


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


About the Author

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.

Comments and Discussions

Questionvery nice Pin
BillW3315-Jul-11 7:47
professionalBillW3315-Jul-11 7:47 
GeneralMy vote of 5 Pin
ashishkumar00823-Jun-11 21:12
Memberashishkumar00823-Jun-11 21:12 
GeneralMy vote of 5 Pin
Pablo Aliskevicius22-Jun-11 22:17
MemberPablo Aliskevicius22-Jun-11 22:17 
GeneralMy vote of 3 Pin
Firo Atrum Ventus22-Jun-11 15:09
MemberFiro Atrum Ventus22-Jun-11 15:09 
GeneralRe: My vote of 3 Pin
Pablo Aliskevicius22-Jun-11 22:16
MemberPablo Aliskevicius22-Jun-11 22:16 
GeneralRe: My vote of 3 Pin
gggustafson23-Jun-11 3:32
professionalgggustafson23-Jun-11 3:32 
GeneralRe: My vote of 3 Pin
Snorri Kristjansson22-Jun-11 23:10
professionalSnorri Kristjansson22-Jun-11 23:10 
GeneralRe: My vote of 3 Pin
gggustafson23-Jun-11 1:46
professionalgggustafson23-Jun-11 1:46 
GeneralRe: My vote of 3 Pin
Firo Atrum Ventus26-Jun-11 15:36
MemberFiro Atrum Ventus26-Jun-11 15:36 
GeneralRe: My vote of 3 Pin
gggustafson27-Jun-11 5:17
professionalgggustafson27-Jun-11 5:17 
GeneralRe: My vote of 3 Pin
jsc4227-Jun-11 22:35
professionaljsc4227-Jun-11 22:35 
GeneralRe: My vote of 3 Pin
gggustafson28-Jun-11 5:17
professionalgggustafson28-Jun-11 5:17 

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.