Text below image on hover

[David Segall]

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.

 

[Dylan Parry]

Pondering the eternal question of "Hobnobs or Rich Tea?", David Segall
finally proclaimed:

I have the usual flags to denote various languages

....

Stop right there. http://www.cs.tut.fi/~jkorpela/flags.html

 

[David Segall]

Pondering the eternal question of "Hobnobs or Rich Tea?", David Segall
finally proclaimed:

...

Stop right there. http://www.cs.tut.fi/~jkorpela/flags.html

Your argument (I assume you agree) is basically "Don't use icons
because they may be misunderstood and/or offend someone". It
contradicts a thirty year history in the development of user
interfaces but, of course, that does not mean that you are wrong.

 

[Jonathan N. Little]

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>

 

[Dylan Parry]

Pondering the eternal question of "Hobnobs or Rich Tea?", David Segall
finally proclaimed:

It contradicts a thirty year history in the development of user
interfaces but, of course, that does not mean that you are wrong.

Just because a billion flies eat poo doesn't mean that it tastes good!

 

[Alan J. Flavell]

Your argument (I assume you agree) is basically "Don't use icons
because they may be misunderstood and/or offend someone".

Then you haven't read the article properly.

It contradicts a thirty year history in the development of user
interfaces but, of course, that does not mean that you are wrong.

Take a look at http://www.google.co.uk/language_tools, for example.

I won't say that everything that Google does is right, but this seems
OK to me. The flags denote *countries*. The languages are denoted by
their *names*.

Any other interpretation of national flags is doomed, except in a
limited number of special cases. But special cases are a poor
starting point for anything that's meant to work in a WWW situation.

 

[Neredbojias]

With neither quill nor qualm, Dylan Parry quothed:

Pondering the eternal question of "Hobnobs or Rich Tea?", David Segall
finally proclaimed:


Just because a billion flies eat poo doesn't mean that it tastes good!

Have you ever tried it?

 

[Dylan Parry]

Pondering the eternal question of "Hobnobs or Rich Tea?", Neredbojias
finally proclaimed:

Have you ever tried it?

No. Have you tried my cooking? It doesn't taste good the first time
round, so what makes you think it would the second?

 

[David Segall]

Then you haven't read the article properly.

Can you suggest a way of reading the article "properly" without
agreeing with it?

Take a look at http://www.google.co.uk/language_tools, for example.

I won't say that everything that Google does is right, but this seems
OK to me. The flags denote *countries*. The languages are denoted by
their *names*.

I don't need to make that distinction on my site. In any case, nobody
would recommend using any form of icons for such a large number of
choices unless they were beside the names in a drop down list. It is
not even consistent since it uses a drop down list to represent
countries in one part and a page of icons in another.

Any other interpretation of national flags is doomed, except in a
limited number of special cases. But special cases are a poor
starting point for anything that's meant to work in a WWW situation.

Icons are necessarily special cases. Jukka Korpela's article
acknowledges the universal use of the Union Jack as an icon meaning
English. It is used, not only on web pages, but in instruction manuals
and airport lounges.

Finally, I have to acknowledge that I have already lost this argument.
Next time I am anxiously scanning the notices in a European airport I
will have to look for a "flag" that spells out "en" instead of the one
most English speakers recognise instantly.
<http://europa.eu.int/comm/ipg/library/standard_images_en.htm#language_icone>
It is a triumph of misplaced logic and ethnic/national sensitivity
over communication.

 

[Alan J. Flavell]

Icons are necessarily special cases. Jukka Korpela's article
acknowledges the universal use of the Union Jack as an icon meaning
English.

You misrepresent him. Widespread, yes - he says "most commonly used"
(as compared to other national flags, presumably), but "universal",
no.

My American colleague gets very upset about that, too, muttering dark
imprecations about delusions of colonial grandeur, Boston Tea Party
and such. Naturally, he'd use the stars and stripes to denote the
language. And there's more of them, and they tend to have an even
narrower view of international relations...

And English is not the only indigenous national language spoken (and
written) in the United Kingdom.

It is a triumph of misplaced logic and ethnic/national sensitivity
over communication.

If it amuses you to think so. Which language does the Indian flag
represent in your universe, by the way?

 

[dorayme]

Can you suggest a way of reading the article "properly" without
agreeing with it?

Now lets not be like that... I had a glance at my favourite
human's article and I got the impression his arguments were at
least worth taking seriously. To take up your previous point, one
of his arguments was that flags were easily misunderstood or
mismatched in relation to the language wanted. You can disagree
with this, but you need to think about it. Your summing up of his
article ("Don't use icons because they may be misunderstood
and/or offend someone") does not inspire confidence you have.
This does not mean you are wrong about using flags.

 

[Neredbojias]

With neither quill nor qualm, Dylan Parry quothed:

Pondering the eternal question of "Hobnobs or Rich Tea?", Neredbojias
finally proclaimed:


No. Have you tried my cooking? It doesn't taste good the first time
round, so what makes you think it would the second?

I expressed nor do now express no opinion one way or t'other. It was
merely an admittedly wasteful human-interest question.

 

[David Segall]

<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>

Thanks Jonathan. That worked perfectly after I realised I had a class
called "caption".

 

[David Segall]

My American colleague gets very upset about that, too, muttering dark
imprecations about delusions of colonial grandeur, Boston Tea Party
and such. Naturally, he'd use the stars and stripes to denote the
language. And there's more of them, and they tend to have an even
narrower view of international relations...

Indeed they do, but all of them instantly recognize the Union Jack as
the icon to choose if they want to be able to read some text. It's a
good example of national sensitivity but not a good reason to drop the
icon. If he is willing to accept the use of "America" as a synonym for
the United States of America, ignoring the other 24 countries, then he
can put up with using the Union Jack as the icon for the English
language.

And English is not the only indigenous national language spoken (and
written) in the United Kingdom.

That's a good example of misplaced logic. Thousands of Coca-Cola
bottles are used to contain water but in its iconic form it represents
Coca-Cola.

If it amuses you to think so. Which language does the Indian flag
represent in your universe, by the way?

That's another good example of misplaced logic. Because the Union Jack
and the French flag are instantly recognised as icons for a particular
language does not mean that all flags must have a meaning as icons for
a language.

An icon acquires a meaning of its own. The swastika has been used as a
symbol for three thousand years but if you choose to put one on your
web site you know how it will be interpreted. The same applies to the
Union Jack and I think that makes it very useful. The fact that it
happens to be the flag of a particular country is irrelevant.

 

[Jose]

If it amuses you to think so. Which language does the Indian flag

That's another good example of misplaced logic. Because the Union Jack
and the French flag are instantly recognised as icons for a particular
language does not mean that all flags must have a meaning as icons for
a language.

Well, let's come at it a different way. You have a website with the
British, German, and French flags, representing English, German, and
French. You then add pages for three of the languages commonly spoken
in India - Kannada, Punjabi, and Tamil. What flag do you use for each
of them?

Use of icons sets up an expectation, and while it can be met in trivial
cases, the expectation can fail when things get more complex, which is
why the use of icons should be well thought out.

Jose

 

[David Segall]

Well, let's come at it a different way. You have a website with the
British, German, and French flags, representing English, German, and
French. You then add pages for three of the languages commonly spoken
in India - Kannada, Punjabi, and Tamil. What flag do you use for each
of them?

I don't know which, if any, icons would be recognised as representing
those languages. There is no reason to expect them to be flags. They
might be an iconic map indicating the main area in which the language
is usually spoken. If so, we can expect Indian bloggers protesting
that they speak the language but don't live in the area or vice versa.
My entire point is that, in the context of a web site, instruction
manual or public sign the three European symbols you mention are not
national flags; they are widely recognised icons that represent a
language.

Use of icons sets up an expectation, and while it can be met in trivial
cases, the expectation can fail when things get more complex, which is
why the use of icons should be well thought out.

Of course. And when the happy day comes and my web site is translated
into the 5000 or so languages in the world I promise that I will not
force a visitor to choose by clicking an icon.