Solved

Alt tag on something other than an image

Posted on 2002-04-03
2
165 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
Comment Utility
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
Comment Utility
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

763 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now