|
Like
a lot of attractive JavaScript-powered functionality, this uses
a few standard JavaScript techniques but combines them to create
something beyond the usual. (Like a lot of JavaScript, a version
is only as good as the browser for which it was developed - This
one works with IE.) It combines action on the onMouseOver event
of the web banner graphic with displaying a tooltip. In turn, the
style of the tooltip is set to be a marquee - scrolling text.
The
requirement for this kind of functionality came up in a web-based
training application where we needed to display some large chunks
of instructional text - Adding the marquee scroll is an embellishment
(An embellishment too far? Maybe . . . )
The
scripting is quite straightforward.
The
tooltip is defined
<div
id="ourToolTip"
style="position:absolute;
visibility:hidden;
clip:rect(0 150
50 0);
width:150px;
background-color:purple;
z-index:10">
</div>
Note
that where the tooltip colour is defined, background-color:purple;,
you can use background-color:none;
which makes the tooltip transparent. It can be sized to match the
volume of text to be displayed. The image is coded to react onMouseOver,
passing a message string to the function which displays the tooltip
<div
align="CENTER"
name="ourImage"
onMouseover="DisplayTip(this,event,
'www.chrispearson.org:
The web site created by Chris Pearson');"
onMouseout="HideTip();"
STYLE="cursor:
hand">
<IMG SRC="../../../Images/sitename.gif"
WIDTH="622"
HEIGHT="76" BORDER="0">
</div>
|
