faqts : Computers : Programming : Languages : JavaScript : DHTML

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

141 of 171 people (82%) answered Yes
Recently 7 of 10 people (70%) answered Yes

Entry

How do I script a text mouseover effect?
How do I script a text or link mouseover effect for NN4?
How do I script a link mouseover effect for NN4?

Mar 14th, 2002 14:56
David Blackledge, Martin Honnen,


IE4/5 and NN6 allow that easily as they allow
  - onmouseout/over for abritrary HTML elements (e.g. SPAN, DIV, TD)
  - dynamic style changes for abritrary elements
So with them you can script
  <SPAN STYLE="color: white; background-color: orange;"
        ONMOUSEOVER="this.style.color = 'orange';
                    this.style.backgroundColor = 'white'"
        ONMOUSEOUT="this.style.color = 'white';
                    this.style.backgroundcolor = 'orange';"
  >
  JavaScript.FAQTS.com
  </SPAN>
or if there are many attributes to change define STYLE classes e.g.
  <STYLE>
  .white { color: white; background-color: orange; font-size: 20pt;
           text-decoration: none; }
  .orange { color: orange; background-color: white; font-size: 24pt;
            text-decoration: underline;
  }
  </STYLE>
and then swap the style class e.g.
  <SPAN CLASS="white"
        ONMOUSEOVER="this.className = 'orange'"
        ONMOUSEOUT="this.className = 'white'"
  >
  JavaScript.FAQTS.com
  </SPAN>
Of course this is possible for links too
  <A HREF="http://javascript.faqts.com";
     CLASS="white"
        ONMOUSEOVER="this.className = 'orange'"
        ONMOUSEOUT="this.className = 'white'"
  >
  JavaScript.FAQTS.com
  </A>
although for links there is a so called pseudo style class
  hover
which elegantly allows to define a mouseover (hover) style for all 
links in the document:
  <STYLE>
  A:hover { color: orange; background-color: white; }
  </STYLE>
NN4 is quite different: neither supports it the hover pseudo class nor 
does it allows onmouseover/out on arbritrary elements nor does it allow 
dynamic style changes (besides changing the background color of 
positioned elements). What NN4 does allow is
  - scripting onmouseover/out for absolutely positioned elements
  - rewriting the content of absolutely positioned elements
So with NN4 you need to set up an absolutely positioned element to 
attach onmouseout/over handlers and in them rewrite the content of the 
positioned element. 
As normal page design is much easier with relatively positioned content 
the following defines custom JavaScript objects for place text 
mouseover elements or links in a document. If you just want text 
mouseover elements you can leave the second SCRIPT block out which 
defines the HoverLink object. Important is the init call in the third 
SCRIPT block hooked up to <BODY ONLOAD. Example text elements and links 
are included.
<HTML>
<HEAD>
<STYLE>
.orange { color: orange; background-color: white; }
.white { color: white; background-color: orange; }
.lime { color: lime; background-color: black; }
.black { color: black; background-color: lime; }
.yellow { text-decoration: none; font-size: 18pt; color: yellow; 
background-color: blue; }
.blue { text-decoration: none; font-size: 24pt; color: blue; 
background-color: yellow; }
</STYLE>
<SCRIPT LANGUAGE="JavaScript1.2">
if (document.layers) {
  var html = '';
  html += '<STYLE>';
  html += '.rewritable { position: absolute; }';
  html += '.placeHolder { position: relative; visibility: hidden; }';
  html += '<\/STYLE>\n';
  document.write(html);
}
function HoverElement (content, highClass, lowClass) {
  if (content) { 
// otherwise the prototype initialization creates unwanted page content
    this.id = HoverElement.cnt;
    HoverElement.elements[this.id] = this;
    this.layerId = 'HoverElement' + HoverElement.cnt++; 
    this.content = content;
    this.highClass = highClass;
    this.lowClass = lowClass || '';
    this.writeElement();
  }
  else  // not sure why NN4 needs that to get the prototype object    
        // initialized
    this.dummy = 'dummy';
}
function HoverElement_writeElement () {
  var html = '';
  if (document.layers) {
    html += '<SPAN ID="' + this.layerId + '" CLASS="rewritable">';
    html += this.getLowContent();
    html += '<\/SPAN>';
    html += '<SPAN ID="' + this.layerId + 'Rel" CLASS="placeHolder">';
    html += this.getLowContent();
    html += '<\/SPAN>';
  }
  else {
    html += this.getContent();
  }
  document.write(html);
}
HoverElement.prototype.writeElement = HoverElement_writeElement;
function HoverElement_mouseover () {
  var html = this.getHighContent();
  var l = this.layer;
  l.document.open();
  l.document.write(html);
  l.document.close();
}
HoverElement.prototype.mouseover = HoverElement_mouseover;
function HoverElement_mouseout () {
  var html = this.getLowContent();
  var l = this.layer;
  l.document.open();
  l.document.write(html);
  l.document.close();
}
HoverElement.prototype.mouseout = HoverElement_mouseout;
function HoverElement_init () {
  var l = this.layer = document[this.layerId];
  l.HoverElement = this;
  l.onmouseover = function (evt) {
    this.HoverElement.mouseover();
  };
  l.onmouseout = function (evt) {
    this.HoverElement.mouseout();
  }
}
HoverElement.prototype.init = HoverElement_init;
function HoverElement_getContent () {
  var html = '';
  html += '<SPAN';
  html += this.lowClass ? ' CLASS="' + this.lowClass + '"' : '';
  html += '   ONMOUSEOVER="this.className = \'' + this.highClass 
+ '\';"';
  html += '   ONMOUSEOUT="this.className = \'' + this.lowClass + '\';"';
  html += '>';
  html += this.content;
  html += '<\/SPAN>';
  return html;
}
HoverElement.prototype.getContent = HoverElement_getContent;
function HoverElement_getLowContent () {
  var html = '';
  html += '<SPAN';
  html += this.lowClass ? ' CLASS="' + this.lowClass + '"' : '';
  html += '>';
  html += this.content;
  html += '<\/SPAN>';
  return html;
}
HoverElement.prototype.getLowContent = HoverElement_getLowContent;
function HoverElement_getHighContent () {
  var html = '';
  html += '<SPAN';
  html += ' CLASS="' + this.highClass + '"';
  html += '>';
  html += this.content;
  html += '<\/SPAN>';
  return html;
}
HoverElement.prototype.getHighContent = HoverElement_getHighContent;
HoverElement.cnt = 0;
HoverElement.elements = new Array();
HoverElement.init = function () {
  if (document.layers)
    for (var l = 0; l < HoverElement.elements.length; l++)
      HoverElement.elements[l].init();
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
function HoverLink (url, content, highClass, lowClass) {
  this.url = url;
  this.base = HoverElement
  this.base(content, highClass, lowClass);
}
HoverLink.prototype = new HoverElement();
function HoverLink_getLink () {
  var html = '';
  html += '<A HREF="' + this.url + '"';
  html += this.lowClass ? ' CLASS="' + this.lowClass + '"' : '';
  html += '   ONMOUSEOVER="this.className = \'' + this.highClass 
+ '\';"';
  html += '   ONMOUSEOUT="this.className = \'' + this.lowClass + '\';"';
  html += '>';
  html += this.content;
  html += '<\/A>';
  return html;
}
HoverLink.prototype.getContent = HoverLink_getLink;
function HoverLink_getLowLink () {
  var html = '';
  html += '<A HREF="' + this.url + '"';
  html += this.lowClass ? ' CLASS="' + this.lowClass + '"' : '';
  html += '>';
  html += this.content;
  html += '<\/A>';
  return html;
}
HoverLink.prototype.getLowContent = HoverLink_getLowLink;
function HoverLink_getHighLink () {
  var html = '';
  html += '<A HREF="' + this.url + '"';
  html += ' CLASS="' + this.highClass + '"';
  html += '>';
  html += this.content;
  html += '<\/A>';
  return html;
}
HoverLink.prototype.getHighContent = HoverLink_getHighLink;
</SCRIPT>
<SCRIPT>
function init() {
  HoverElement.init();
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init();">
Kibology for all.
<SCRIPT>
new HoverElement('Scriptology for all.', 'orange', 'white');
</SCRIPT>
All for Kibology.
<BR>
Kibology for all.
<SCRIPT>
new HoverLink('http://www.kibo.com', 'Visit God.', 'lime', 'black');
</SCRIPT>
All for Kibology.
<BR>
<SCRIPT>
new HoverElement('All for Kibology.', 'blue', 'yellow');
</SCRIPT>
<BR>
<BR>
<SCRIPT>
new HoverLink('http://www.kibo.com', 'Visit God.', 'blue', 'yellow');
</SCRIPT>
<BR>
<BR>
<SCRIPT>
new HoverLink ('http://javascript.faqts.com',
                          'JavaScript.FAQTS.com', 'orange', 'white');
</SCRIPT>
</BODY>
</HTML>
--------------------------------------------------------------------
A MUCH simpler version for Netscape (though less capable) follows.  It 
duplicates the link with the class "hover" (not the pseudo-class) and 
places it over the original link.  Note that it cannot take into account 
any outside style affecting the link such as Boldface tags immediately 
outside of the Anchor tags.  Consequently, you might want to include a 
background-color in your hover class definition to help cover up the old 
link.
Note that you don't have to modify your document at all.  It 
automatically fires for every single link in the document.
<style type="text/css">
A {text-decoration:none;}
A.hover {text-decoration:underline;}
</style>
<SCRIPT type="text/javascript">
//Originally by David Blackledge
// http://David.Blackledge.com
function Ahover(e) {
if(e.target.constructor === document.links[0].constructor) {
 var lnk = e.target;
 var lay = lnk.hoverlayer;
 if(typeof(lay)=="undefined") {
  lay = new Layer(0);//val is width, but writing document resets width
  lay.document.open();
  lay.document.writeln("<A href=\""+lnk.href+"\" class=\"hover\" 
>"+lnk.text+"</A>");
  lay.document.close();
  lay.pageX = lnk.x;
  lay.pageY = lnk.y;
  lnk.hoverlayer = lay;
 }
 if(e.type == "mouseover") {
  lay.document.links[0].onmouseout = lnk.onmouseout;
  lay.document.links[0].onclick = lnk.onclick;
  lay.document.links[0].hoverlayer = lay;
  lay.visibility = "visible";
 } else if(e.type == "mouseout") {
  lay.visibility = "hidden";
 }
}
}
if(window.captureEvents) {
 window.onmouseover = Ahover;
 window.onmouseout = Ahover;
 window.captureEvents(Event.MOUSEOVER|Event.MOUSEOUT);
}
</SCRIPT>