Posted by Jonathan N. Little on 11/18/59 11:37

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

• Next in forum: Re: Form Require Hidden Input Not Working
• Prev in forum: Re: Text below image on hover
• Thread view: Re: Text below image on hover

[Reply to this message]