ALTTXT V1.6
V 1.2: Added fading effect for ie4+ and ns6+ only. Optimized the code a bit.
V 1.3: Added "mousefollow" mode. See details below.
V 1.4: Removed "center" option. Added "xoffset" & "yoffset" variables instead for finer customization.
V 1.5: Made it so the "yoffset" variable actually did what it was supposed to. Also added functions for toggling a few settings.
V 1.6: Added a "locking" feature so if you have links inside the box, the script lets you click them (only when
mousefollow
is set to
false
). And, you can set the padding attribute (visible in ie4+ and ns6 only).
Description
Features
In which browser
will this run?
Another effect...
Click
here
to toggle "mousefollow" mode. Uses the
toggle_mousefollow()
function.
Click
here
to toggle "dofade" mode. Uses the
toggle_dofade()
function.
Click
here
to toggle "centertext" mode. Uses the
toggle_centertext()
function.
INSTRUCTIONS
1: Copy and paste the following style declaration in the HEAD section of your page, then edit the style attributes to suit:
Select all...
<style type="text/css"> .navtext { width:235px; font-size:8pt; font-family:verdana; border-width:2px; border-style:outset; border-color:#006BAE; layer-background-color:#FFF6D9; background-color:#FFF6D9; color:black; } </style>
2: Copy and paste the following script in the HEAD section of your page:
Select all...
<script language="javascript" src="alttxt.js"></script>
3: Copy and paste the following HTML at the end of the BODY section of your page. Note: you can
only
adjust the padding attribute in here. Setting it in the style sheet in step 1 will cause strange results in NS4.
Select all...
<div id="navtxt" class="navtext" style="visibility:hidden; position:absolute; top:0px; left:-400px; z-index:10000; padding:10px"></div>
4: Lastly add the mouseover/mouseout event handlers to each link that you want this effect for. Example:
<a href="http://scriptasylum.com"
onmouseover="writetxt('Visit my website')" onmouseout="writetxt(0)"
>Link text</a>
You can also put these event handlers in IMG tags, SPAN tags, DIV tags, etc, but NS4 will not respond to those events. It won't produce errors though.
There are 6 settings in the js file you can set to control the way the script behaves. Just edit the js file to change them:
dofade
- Set to true to enable the fade in effect, set to false to disable it. This feature only works in ie4+ and ns6+.
centertext
- Set to true to center the text in the box, set to false to left-justify the text. This normally could simply be changed with the style definition but Netscape4.x has problems with this, so this is a reluctant workaround.
xoffset
- Sets the horizontal pixel offset from the mouse. Fine-tune this value to get the best result.
yoffset
- Same as above, but sets the vertical offset from the mouse.
mousefollow
- Enables mouse follow mode where the box continues to follow the mouse. Setting to false will cause the box to appear near the mouse but will not continue to follow the mouse.
hideDelay
- Functional only when
mousefollow
is set to false, sets the delay (in milliseconds) from when the user hovers away from the link, to when the box disappears. This is so you can include clickable links in the alttxt box.
You can cause a box
not
to disappear once the mouse leaves the link by simply omitting the
onmouseout="writetxt(0)"
part. This will cause the current box to remain visible. This is best used when "mousefollow" mode is disabled (set to false). Otherwise, the
onmouseout="writetxt(0)"
is required to cancel the box when it leaves the link.
A note about the content of these boxes. If you need to use quotes for HTML tags or whatever, they must be
escaped
with a backslash ( \ ). This prevents the script from thinking the quotes you use is the end of the content and producing errors.
You can also use the character entity in place of double quotes. Instead of using
"
, try using
"
So, lets say you want to include a link inside an alttxt box, you could write something like:
<a href="http://www.your_link.com" onmouseover="writetxt('<a href=
"
http://www.anotherpage.com
"
>LINK TEXT</a>')" onmouseout="writetxt(0)" > Alttxt link... </a>