Entry
How can I expand acronyms or abbreviations when they are clicked?
How can I expand acronyms or abbreviations when they are clicked?
How can I expand acronyms or abbreviations when they are clicked?
Nov 3rd, 2004 10:18
Martin Honnen,
In HTML 4 (and XHTML 1.0 and 1.1) you have the elements <abbr> and
<acronym> to properly mark up abbreviations and acronyms where the
expansion of the abbreviation or acronym should go into the title
attribute which the browser should then show as a tooltip. In addition
you can use W3C DOM scripting to insert the expansion directly into the
document when the element is clicked.
The following example shows how to do that, it allows to insert the
expansion in browsers like IE 5 and later, Netscape 6/7, Mozilla,
Firefox, Opera 7 which support the W3C DOM. Note that IE on Windows
(even IE 6) does not know the HTML element <abbr> thus with IE the
expansion works only for <acronym> elements.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Expanding acronyms and abbreviations</title>
<script type="text/javascript">
function expandAbbreviation (evt) {
var srcElement;
if (evt && evt.target) {
srcElement = evt.target;
if (srcElement.nodeType != 1) {
srcElement = srcElement.parentNode;
}
}
else if (window.event) {
srcElement = window.event.srcElement;
}
if (srcElement && srcElement.firstChild) {
var tagName = srcElement.tagName.toLowerCase();
if (tagName == 'abbr' || tagName == 'acronym') {
var nextSibling = srcElement.nextSibling;
if (nextSibling && nextSibling.className ==
'expandedAbbreviation') {
// explanation is already inserted, remove it
nextSibling.parentNode.removeChild(nextSibling);
return;
}
var explanation = ' (' + srcElement.title + ')';
var span;
if (document.createElement && (span =
document.createElement('span'))) {
span.className = 'expandedAbbreviation';
span.appendChild(document.createTextNode(explanation));
srcElement.parentNode.insertBefore(span, srcElement.nextSibling);
}
}
}
}
function initExpandAbbreviation () {
if (document.addEventListener) {
document.addEventListener(
'click',
expandAbbreviation,
false
);
}
else if (document.attachEvent) {
document.attachEvent(
'onclick',
expandAbbreviation
);
}
else {
document.onclick = expandAbbreviation;
}
}
initExpandAbbreviation();
</script>
<style type="text/css">
abbr, acronym {
cursor: pointer;
}
</style>
</head>
<body>
<p>This is an example where the browser user can click abbreviations and
acronyms,
for instance, <abbr title="HyperText Markup Language">HTML</abbr>, and
<acronym title="Federal Bureau of Investigation">FBI</acronym>, to
expand them to see
an explanation.
</p>
</body>
</html>
