Entry
How can attach events to arbritrary HTML elements with NN4
How can attach events to arbritrary HTML elements with NN4
Feb 12th, 2000 16:55
Martin Honnen,
IE4/5 and NN6 allow to attach event handlers for onmouseover/out to
arbritrary HTML elements like IMGs, Ps, INPUTs. NN4 however allows
those events only for links (A HREF) elements and absolutely positioned
elements. So to have a mouseover event for an IMG you stuff it into a
link or a layer.
The layer approach is necessary to avoid the hand cursor and if you
want to apply changes to your element (as bg or even fg color change).
As absolutely positioning places a heavy burden on page layout the
following code trys to save you that burden by allowing to include
content inline creating a JavaScript object with
new ScriptableElement('html', eventHandlerObject)
Please don't regard that as a well constructed pluggable object but
rather as prototype solution (you can adapt) of how to use inline
content with NN4 and attach events to it.
<HTML>
<HEAD>
<SCRIPT>
if (document.layers)
document.write('<STYLE>.scriptable { position: relative; }
<\/STYLE>');
</SCRIPT>
<SCRIPT>
function ScriptableElement (html, handlers, id) {
this.html = html;
this.handlers = handlers;
ScriptableElement.elements[ScriptableElement.cnt++] = this;
this.id = id ? id : 'se' + (ScriptableElement.cnt - 1);
ScriptableElement.elements[id] = this;
this.writeElement();
}
function SEinit () {
var l = document[this.id];
var ol = l.ol = this.ol = new Layer (l.clip.width);
ol.clip.width = l.clip.width;
ol.clip.height = l.clip.height;
ol.left = l.pageX; ol.top = l.pageY;
ol.document.open();
ol.document.write(this.html);
ol.document.close();
ol.visibility = 'show';
l.visibility = 'hide';
for (var evt in this.handlers) {
ol[evt] = this.handlers[evt];
if (evt == 'onclick')
ol.captureEvents(Event.CLICK);
}
}
ScriptableElement.prototype.init = SEinit;
function SEwriteElement() {
var html = '';
if (document.layers) {
html += '<SPAN ';
html += ' ID="' + this.id + '"';
html += ' CLASS="scriptable"';
html += '>';
}
html += this.html;
if (document.layers)
html += '<\/SPAN>';
document.write(html);
}
ScriptableElement.prototype.writeElement = SEwriteElement;
ScriptableElement.cnt = 0;
ScriptableElement.elements = new Array();
ScriptableElement.initElements =
function () {
if (document.layers)
for (var e = 0; e < ScriptableElement.elements.length; e++)
ScriptableElement.elements[e].init();
};
</SCRIPT>
<SCRIPT>
function init() {
ScriptableElement.initElements();
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init()">
Kibology for all.
<SCRIPT>
function clearStatus () {
window.status = '';
return true;
}
function textMouseOver (evt) {
window.status = 'Kibology';
return true;
}
var html = '';
html += '<SPAN ONMOUSEOVER="window.status = \'Kibology\';"';
html += ' ONMOUSEOUT="window.status = \'\';"';
html += '>';
html += 'All for Kibology.<\/SPAN>';
new ScriptableElement(html, {onmouseover: textMouseOver, onmouseout:
clearStatus});
</SCRIPT>
Scriptology for all.
<BR>
<SCRIPT>
function textBoxMouseOver (evt) {
window.status = 'Please enter name:';
return true;
}
var html = '';
html += '<FORM NAME="aForm">';
html += '<INPUT TYPE="text" NAME="userName"';
html += ' ONMOUSEOVER="window.status = \'Please enter name:\';"';
html += ' ONMOUSEOUT="window.status = \'\';"';
html += '>';
html += '<\/FORM>';
new ScriptableElement(html, {onmouseover: textBoxMouseOver, onmouseout:
clearStatus});
</SCRIPT>
<BR>
Kibology for all.
<SCRIPT>
function highColor (evt) {
this.bgColor = 'lime';
}
function lowColor (evt) {
this.bgColor = document.bgColor;
}
var html = '';
html += '<SPAN ONMOUSEOVER="this.style.backgroundColor = \'lime\';"';
html += ' ONMOUSEOUT="this.style.backgroundColor = document.bgColor;"';
html += '>';
html += 'All for Kibology.<\/SPAN>';
new ScriptableElement(html, {onmouseover: highColor, onmouseout:
lowColor});
</SCRIPT>
Scriptology for all.
<BR>
</BODY>
</HTML>
I know the form/input element is slightly misplaced and the area for
the mouseover/out is too big but as said it is just the prototype of
some concept to improve/adapt for individual solutions.
