?
Solved

Alt tag on something other than an image

Posted on 2002-04-03
2
Medium Priority
?
172 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 17

Accepted Solution

by:
dorward earned 200 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

800 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