Solved

Alt tag on something other than an image

Posted on 2002-04-03
2
169 Views
Last Modified: 2012-05-04
I would like duplicate the functionality of an alt tag on a label.  So far I have been unsuccessfull trying to include the alt tag on either a label or table cell tag.  I realize that alt is supposed to be image specific but is there any other property or tag that I could use?

Thanks
0
Comment
Question by:CMcLennan
2 Comments
 
LVL 17

Accepted Solution

by:
dorward earned 50 total points
ID: 6915656
Alt is there to provide alternative textual content in the event that the image can not be displayed, you should never use it as a tooltip attribute.

For just about any tag (img included) you can use the title attribute, which is usually rendered as a tooltop.

----

From http://www.htmlhelp.com/reference/html40/attrs.html:

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

    * <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
    * <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
    * <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
    * <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
      <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
      Yahtzee is my <EM>favorite</EM> game!
      </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

    * He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
    * <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
    * <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6915757
Try this page:


<html>
<head>
<title>Cell ToolTip</title>
<style>
   #tooltip {background-color:lightyellow;color:black;width:150;
             border:1px solid black;visibility:hidden;width:175;
             z-index:10;position:absolute}
</style>
<script language="JavaScript">
<!--
var tips = new Array(5);
tips[0]="this is the default text";
tips[1]="this is text for the first cell";
tips[2]="tip for the second cell";
tips[3]="all your bases are belong to us";
tips[4]="final tip";

var TRAP=false;
var CURREL=false;
var thepos=0;
function trap()
{
if (TRAP)
{
dragEvnt()
}
else
{
TRAP=window.event;
trapx=TRAP.x+15;
trapy=TRAP.y+15;
dragEvnt();
}
}
function dragEvnt()
{
if (TRAP)
{
CURREL.style.top=trapy;
CURREL.style.left=trapx;
CURREL.style.visibility="visible";
}
}
function hideit()
{
TRAP=false;
CURREL.style.visibility="hidden";
}
//-->
</script>

</head>
<body onLoad="CURREL=document.getElementById('tooltip');CURREL.innerHTML=tips[0]">
<table cellpadding="5" cellspacing="2" border="2">
   <tr>
      <td onMouseover="CURREL.innerHTML=tips[1];trap()"
                onMouseout="hideit()">
         text goes here
      </td>
      <td onMouseover="CURREL.innerHTML=tips[2];trap()"
                onMouseout="hideit()">
         text goes here
      </td>
      <td onMouseover="CURREL.innerHTML=tips[3];trap()"
                onMouseout="hideit()">
         text goes here
      </td>
   </tr>
   <tr>
      <td onMouseover="CURREL.innerHTML=tips[4];trap()"
                onMouseout="hideit()">
         text goes here
      </td>
      <td onMouseover="CURREL.innerHTML=tips[3];trap()"
                onMouseout="hideit()">
        text goes here
      </td>
      <td onMouseover="CURREL.innerHTML=tips[2];trap()"
                onMouseout="hideit()">
         text goes here
      </td>
   </tr>
</table>
<div id="tooltip">
&nbsp;
</div>
</body>
</html>


Works for IE 5+ and probably Netscrap 6+

If you want it for NS4.x Lots of luck

Cd&
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Create tabs to show divs 9 35
Multiflying 2 Input Text On a Table 7 31
SSRS 2016 Rendering HTML tables 3 31
output of netstat -r in Powersshell HTML 3 28
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question