Re: Text below image on hover

David Segall wrote: 
I have the usual flags to denote various languages in my page heading
and I would like to provide the name of the language underneath them
when the user has selected one or is hovering above one.

The desired effect is illustrated here
<http://www.oswd.org/design/preview/id/2083> except that the menu
items, in my case, are images. That site achieves the effect by
changing the display of the sub-text from "none" to "block" in the CSS
for a and a:hover. How can I do the same thing for my images? My
attempts, so far, have resulted in disappearing images and text in
almost every place except where I want it.


<style type="text/css">
	.icon { float: left; background-color: #000; }
	.icon A { text-decoration: none; }	
	.icon IMG { border: 0; padding: 2px; }
	.icon SPAN { color: #fc0; padding: .2em; }	
	.icon A:link SPAN,
	.icon A:visited SPAN { display: none; }	
	.icon A:hover SPAN,
	.icon A:active SPAN { display: block; }
	.icon A:link,
	.icon A:visited { display: inline;  }	
	.icon A:hover,
	.icon A:active { display: block;  }
</style>

<div class="icon">
	<a href="english.html">
	<img src="english.jpg" alt="icon">
	<span class="caption">English</span>
	</a>
</div>
<div class="icon">
	<a href="spanish.html">
	<img src="spanish.jpg" alt="icon">
	<span class="caption">Spanish</span>
	</a>
</div>
<div class="icon">
	<a href="french.html">
	<img src="french.jpg" alt="icon">
	<span class="caption">French</span>
	</a>
</div>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
.

Relevant Pages

  • Re: Need ability to have data dependent icons on continuous forms...
    ... display a picture on the button to visually inform users of a specific ... this that display images that are 32 x 32 pixels where the total ... AnimalID int ... Elephant <elephant icon> ...
    (comp.databases.ms-access)
  • Re: Display pictures on a continues sub form
    ... relatively small and the total number of records you wish to display ... this that display images that are 32 x 32 pixels where the total ... AnimalID int ... Elephant <elephant icon> ...
    (comp.databases.ms-access)
  • Re: Name change
    ... windows - you just don't have the room for anything else if you ask me. ... You can do a lot with an 80x25 character display. ... icon for each window (either globally or on just the current virtual ... I'd say it's the CPU itself (or one ...
    (uk.people.support.depression)
  • Re: Capture the Computer Desktop
    ... it should capture the entire display and save it if it is called correctly ... icon you are using. ... Private Const BITSPIXEL = 12 ... Obviously that address is really a dummy, but basically I'll drink almost ...
    (microsoft.public.vb.general.discussion)
  • Re: Name change
    ... You can do a lot with an 80x25 character display. ... icon for each window (either globally or on just the current virtual ... Umm, ish, okay, so I do have a temperature displayed. ... I'd say it's the CPU itself (or one ...
    (uk.people.support.depression)