question about the alt tag

@TransformAug 28.2007

I have the following code and I was wondering if there is a way in html to view an image in the alt tag instead of plain text? I’m sure I have seen it done somewhere before or was that in JavaScript?

[code=html]My text[/code]

to post a comment

HTML

20 Comments(s) _↴

@CentauriAug 28.2007 — #It can be done with css : http://www.cssplay.co.uk/menu/pop_ups

@TransformauthorAug 28.2007 — #i had another look around the net and found the css example while waiting for a reply. thanks for your post though ?

@TransformauthorAug 28.2007 — #I have just got it working in Firefox and IE7. Any idea why it wouldn't work in IE6? Is it because it doesn't like part of the CSS?

@CentauriAug 28.2007 — #Depends on what element you attached the hover to - IE6 only recognises hover on a link.

@TransformauthorAug 28.2007 — #ahh that would be why. my span class is done using .

if i use <a> though, it puts a black border round the hover image treating it like a link. is there a way around this if i use <a>?

@CentauriAug 28.2007 — #Style the image :[CODE]a img {border: 0;}[/CODE]

@WebJoelAug 28.2007 — #I had a little play at this once, -I used text in the "" but you could replace that with "<img src="#">" and, give it border:0;

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <html><head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <title></title>
 <style type="text/css">
 a:link	{color:#212121;}
 a:visited {color:#008080;}
 a:hover {color:#F00;}
 a:active {color:#000;}
 /* above: controls colors of links */
 
 .buttons a {color:#000; background-color:white; display:block;
 font:13px arial, sans-serif; font-weight: bold; text-decoration:none;
 margin-top:3px}
 /* Above: controls how 'buttons' anchors behave */
 
 .buttons a:hover {background-color:#fff;	font:13px verdana;
 font-weight: bold; text-decoration:none;}
 /* Above: controls how 'buttons anchor on-hover' behave */
 
 #menu {position:relative; width:160px; height:auto;
 text-align: center; padding:10px 0 10px 0; border:1px double silver;}
 /* Above: the actual "menu", a list of links */
 
 #menu a span {display:none;}
 /* Above: how the "<span>text la-la-la text</span>" is handled */
 
 #menu a:hover span {
 display:block; position:absolute;
 top:145px; left:10px;
 width: 125px; 
 z-index: 100;color:black;
 background-color:#fff99d; padding:10px; font:1em Verdana, sans-serif;
 border:1px solid black;
 /* Above: how the <span>text la-la-la text</span> is handled when 
 hovering over the visible link-text (the 'pop-up') */
 }
 </style>
 
 
 <link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
 </head>
 <body>
 
 <div id="menu" class="buttons">
 <div id="menu">
 <a href="http://www.w3cschools.com">w3cschools<span>World Wide Web Consortium ("W3C") Schools Web Site</span></a>
 <a href="http://www.webdeveloper.com">webdeveloper.com<span>WebDeveloper.com Forums, offering free help with your web pages.</span></a>
 <a href="http://www.msn.com">MSN<span>The MSN Start page: A useful "HOME PAGE" as place to start your daily search.</span></a>
 <a href="http://joelburdick.awardspace.com">My Site<span>Joel's online site of published web sites.</span></a>
 <a href="http://joelburdick.awardspace.com/carved_wood">Ontario Carved Driftwood<span>A Wood-carved Elephant Head that 
 I made this past summer from driftwood that I found here in Toronto by Lake Ontario.</span></a>
 </div>
 </div>
 
 </body>
 </html>[/CODE]

@TransformauthorAug 29.2007 — #I have changed the span and css to <a> but IE6 still does nothing when I hover over the text.

Here is the code I am using:

CSS:

[code=html]
 
 a.info
 {
 position:relative;           /* this is the key */
 z-index:24; 
 color:#000000;               /* colour of display text */
 text-decoration:none;
 }
 
 a.info:hover
 {
 z-index:25; 
 }
 
 a.info span
 {
 display: none;  /* hide the span text using this css */
 }
 
 a.info:hover span
 { 				/* the span will display just on :hover state */
 display:block;
 position:absolute;
 top: 2em;       	/* offset of the tooltip from the top */
 left: 2em;      	/* offset of the tooltip from the left */
 width: 15em;
 text-align: center;
 text-indent: 0px;
 }
 
 [/code]

HTML:

[code=html]
 
 <a class="info">TEST<span><img src="/logofolder/mylogo.gif"/></span></a>
 
 
 [/code]

@CentauriAug 29.2007 — #The <a> tag needs to be a [B]link[/B]:
[CODE]<a [COLOR="Red"]href="#"[/COLOR] class="info">TEST<img src="/logofolder/mylogo.gif"/></a> [/CODE]

Also, IE6 needs a valid change of a parameter on hover before it will apply any changes to an embedded element (the span) on hover - changing a colour from its hex code to its named value works.

[CODE]a.info
 {
 position:relative;
 color:#000000;               /* colour of display text */
 text-decoration:none;
 margin: 100px 0 0 0;
 [COLOR="Red"]background-color: #FFFFFF[/COLOR];
 }
 
 a.info:hover
 {
 [COLOR="Red"]background-color: white[/COLOR];
 }
 [/CODE]

@TransformauthorAug 29.2007 — #Ok I have changed the code like you said to be the following:

[CODE]a.info
 {
 position:relative;           /* this is the key */
 z-index:24; 
 color:#000000;               /* colour of display text */
 text-decoration:none;
 
  [COLOR="Red"]background-color: #FFFFFF;[/COLOR]
 }
 
 a.info:hover
 {
 z-index:25; 
 
  [COLOR="Red"]background-color: #white;[/COLOR]
 }
 
 a.info span
 {
 display: none;  /* hide the span text using this css */
 }
 
 a.info:hover span
 { 				/* the span will display just on :hover state */
 display:block;
 position:absolute;
 top: 2em;       	/* offset of the tooltip from the top */
 left: 2em;      	/* offset of the tooltip from the left */
 width: 15em;
 text-align: center;
 text-indent: 0px;
 }[/CODE]

And the span to be this:

[CODE]<a href="www.google.com" class="info">TEST<img src="/logofolder/mylogo.gif"/></a>[/CODE]

However, in IE6 there is still nothing happening when I hover over the text ?

@CentauriAug 29.2007 — #Hmm, that code works for me locally in IE6. Maybe you could put a sample page online demonstrating this?

@TransformauthorAug 29.2007 — #I set up the file here.

Works in Firefox, IE7 but not IE6!

@WebJoelAug 29.2007 — #a.info:hover

{z-index:25; background-color: [B][SIZE="4"]#[/SIZE][/B]white;}[/QUOTE] No "#" required for 'word descriptor' of color being used.

@CentauriAug 29.2007 — #There is a typo in your css :[CODE]background-color: #white;[/CODE]should be [CODE]background-color: white;[/CODE] - the "#" indicates hex code.

Edit: pipped at the post ..... again. ?

@WebJoelAug 29.2007 — #...and the rabid happy-dancing weasel-ferret beats super-coder Centauri to the "submit" button again! ?

Removing the "#" seems to have solved this. ?

@TransformauthorAug 29.2007 — #oops. stupid typo by me!

one more thing. in firefox it displays with a black border and I have tried a few things but can't shift it. any ideas?

@CentauriAug 29.2007 — #As I suggested in my first post, style the image :

[CODE]a.info img {
 border: 0;
 }
 [/CODE]

@TransformauthorAug 29.2007 — #Everything seems to be working great. Another thing (sorry to keep going on).

Im using these hover images in a table. The table has alternate colour rows. eg. black, white, black etc...

Is background-color: #FFFFFF;

and background-color: white;

needed because it makes the table look a bit ugly. Is there another way around it?

@CentauriAug 29.2007 — #For IE6 there needs to be some visual change in hover states on the <a> tags to get the hover to work on the embedded span. As you don't actually have a background image on the <a> tag, maybe trying [COLOR="Blue"]background-position: left;[/COLOR] on the <a> and [COLOR="Blue"]background-position: right;[/COLOR] on the hover - might do the trick for IE6.

@TransformauthorAug 29.2007 — #That worked a treat! Thankyou so much for all your help :o

Also in #HTML _↴

Table Help I'm trying to make a Sign up form insert line breaks in body of autogenerated email?

Success!

Help @Transform spread the word by sharing this article on Twitter...

Tweet This

question about the alt tag

20 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

question about the alt tag

20 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

20 Comments(s) _↴

Also in #HTML _↴