Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 177
  • Last Modified:

Alt tag on something other than an image

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
CMcLennan
Asked:
CMcLennan
1 Solution
 
dorwardCommented:
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
 
COBOLdinosaurCommented:
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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now