Test Index · CSB4 Rollover Links · Link Styles 1 · Link Styles 2 · Link Styles 3 · iFrame Tutorial - IFrames described in detail! · Form sample in iFrame · Arrowhead · Excel · Color Blind · Websafe Fonts and tests · Make an Alert Box · Webgem Placeholder Images · LINK HOVER TOOLTIP · OverLIB tooltip · Disguise Email · Quote of the Month · Map to your location! · Link Border Test · FORUM
LINK HOVER TOOLTIP
A floating TOOLTIP (description) can appear over your text links or your images with a simple tweak! This tool-tip is seen when you move your mouse over a link or image. It can give your visitor just a bit more information. There are two basic kinds of floating tool tips demonstrated and discussed below (Title tag and Alt tag) and more advanced versions too.
LINK TEXT TOOLTIP: TITLE TAG
The TITLE tag a title="link description" is used for text links with a description that hovers on rollover:
<A HREF="http://www.samisite.com" title="CuteSite Builder & Trellix assistance" TARGET="_top">Sami Site CSB Support & Trellix Tutorials</A>
sample link: (mouse over to see tooltip) Sami Site CSB Support & Trellix Tutorials
Define the webpage, description, where you want to open the link and what words to use for your link
CSB/Trellix places a TOOLTIP (floating description) in a white popup box over every link!
If you do nothing to it, your tooltip description (title) will show the url address used in the link
sample link (to this page)
If you define it, the tooltip can have a small description of the page, product, reason for the link.
You can remove them.
IMAGE TOOLTIP: ALT TAG AND TITLE TAG
INTERNET EXPLORER uses the ALT tag for a TOOLTIP. FIREFOX uses the TITLE tag for a TOOLTIP, even on photos! SO USE THEM BOTH for best effect! You can use them with or without a link. Define the name of the image and your photo description.
Optional: whether or not you want a border around it, size of image and spacing
Photo without a link:
<IMG SRC="nameofyourgraphic.jpg" border=0 width="142" height="80" ALT="your description is here!!!" TITLE="your description is here!!!" ALIGN="BOTTOM" HSPACE="0" VSPACE="0">
Photo with a Link:
<A HREF="http://www.samisite.com" TARGET="_top"><img src="nameofyourgraphic.jpg" alt="Sami Site CSB Support & Trellix Tutorials" title="Sami Site CSB Support & Trellix Tutorials"></A>
For images: insert the image and then right click choose properties > image
Type in the name of the image or a description.
EXPANDED POPUP TEXT - The rest of this page is based on KW's popup sample #4.
(NOTE: I personally PREFER OVERLIB to this popup script! Nicer features, more flexible.)
I expanded KW's code explanation and added a couple other features:
hover color on links and adjusted underline feature,
removed the dotted line from the image when clicked,
removed the CSB/Trellix automatic tooltip.
Sample links on this page will open to my home page.
All tooltips on this page will use the same settings (placement, width) but can have different colors!
Limitations: Can not have more than one style on a page. Placement is limited. Use of <DIV> codes to activate the floating text limits use if not placed in t tables as shown in examples above! Need more flexibility the try overLIB script instead since each tooltip can have a separate placement, color, style, etc. definition.
TEXT: Roll your mouse over these text links to see tooltips. Note how the text becomes underlined when mouse hovers over.
IMAGE: Roll your mouse over this image to see the tooltip description.
There are four codes. You must place the first and second into your page, and you can adjust the width of the popup box in them. Make sure the width in code one and two match! Then use the third style if you use text links and the fourth style if you use image links.
Note: To capture the code, click Select All, Ctrl C to copy code. Ctrl V to paste the code into an insert > HTML (webgem in Trellix).
#1: style code. Define the link style (hover color and only underline on hover) and add the #pup description. Put at top of the page. (Note: the a: lines that define the link style can be removed, but the #pup line must remain! This code is normally placed into the HEAD section of the page)
#2: popup function. Put at top of page near the first code. (This code is normally placed into the BODY section of the page- - Can adjust the x offset to move text right/left, y offset to move text up/down)- 20
#3: text. Repeated for each of rollover popup text link, changing the id and the content for each.
You can make the text align left, center, or right.
You can have the hover text with or without a link
The popup language contains 2 parts: a description and a color: popup('description','color').
If you do not like the color, use a color from this chart. Yes, you can use NAMED colors instead of codes.
The div id = "d3" must be unique each time you use it on a page!
My samples: I inserted 3 versions of this code. I used id1, id2, and id3 for the text links:
(For visual review only - DO NOT COPY THESE! Use the code in Select All, above, instead!)
<div id="d3" style="width:100%; text-align:left">
<a href="http://www.samisite.com" onmouseover="popup('This support site is designed around<br>pc-based Trellix and CSB web site<br>building software. These instructions<br>may or may not work with<BR>the online version of Trellix!','#7FFFD4')" onmouseout="kill()">GOOD LINK</a></div>
<div id="d2" style="width:100%; text-align:left">
<a href="http://www.samisite.com " onmouseover="popup('All options are included in this sample.<br>The code is available further down the page, #3 ','#BFBF00')" onmouseout="kill()" title="" onfocus="this.blur()" target="_blank">BETTER LINK</a></div>
<div id="d1" style="width:100%; text-align:left">
#4: image. Place your image into your page in the usual fashion. (Insert > Picture)
Right click the image and choose "Create Link to URL or File" option. Paste the link/tooltip code into the link area as shown in image on the right below instead of insert > html! Leave off the last " as shown because the program will add it for you! Sample link in image will open in a new window.