Solved

Alt tag on something other than an image

Posted on 2002-04-03
2
168 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

803 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