Text below image on hover

Discussion in 'HTML' started by David Segall, Jan 17, 2006.

  1. David Segall

    David Segall Guest

    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.
     
    David Segall, Jan 17, 2006
    #1
    1. Advertising

  2. David Segall

    Dylan Parry Guest

    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

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references

    Disclaimer: This post does not represent the opinion of me or my cats.
     
    Dylan Parry, Jan 17, 2006
    #2
    1. Advertising

  3. David Segall

    David Segall Guest

    Dylan Parry <> wrote:

    >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

    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.
     
    David Segall, Jan 17, 2006
    #3
  4. 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
     
    Jonathan N. Little, Jan 17, 2006
    #4
  5. David Segall

    Dylan Parry Guest

    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!
    ;)

    --
    Dylan Parry
    http://electricfreedom.org -- Where the Music Progressively Rocks!

    Disclaimer: This post does not represent the opinion of me or my cats.
     
    Dylan Parry, Jan 17, 2006
    #5
  6. On Tue, 17 Jan 2006, David Segall wrote:

    > Dylan Parry <> wrote:
    >
    > >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

    >
    > 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.
     
    Alan J. Flavell, Jan 17, 2006
    #6
  7. David Segall

    Neredbojias Guest

    With neither quill nor qualm, Dylan Parry quothed:

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


    Have you ever tried it?

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Jan 18, 2006
    #7
  8. David Segall

    Dylan Parry Guest

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

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

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

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references

    Disclaimer: This post does not represent the opinion of me or my cats.
     
    Dylan Parry, Jan 18, 2006
    #8
  9. David Segall

    David Segall Guest

    "Alan J. Flavell" <> wrote:

    >
    >On Tue, 17 Jan 2006, David Segall wrote:
    >
    >> Dylan Parry <> wrote:
    >>
    >> >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

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

    Can you suggest a way of reading the article "properly" without
    agreeing with it?
    >
    >> 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*.

    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.
     
    David Segall, Jan 18, 2006
    #9
  10. On Wed, 18 Jan 2006, David Segall wrote:

    > 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?
     
    Alan J. Flavell, Jan 18, 2006
    #10
  11. David Segall

    dorayme Guest

    In article <>,
    David Segall <> wrote:

    > "Alan J. Flavell" <> wrote:
    >
    > >
    > >On Tue, 17 Jan 2006, David Segall wrote:
    > >
    > >> Dylan Parry <> wrote:
    > >>
    > >> >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
    > >>
    > >> 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.

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

    --
    dorayme
     
    dorayme, Jan 18, 2006
    #11
  12. David Segall

    Neredbojias Guest

    With neither quill nor qualm, Dylan Parry quothed:

    > Pondering the eternal question of "Hobnobs or Rich Tea?", Neredbojias
    > finally proclaimed:
    >
    > >> Just because a billion flies eat poo doesn't mean that it tastes good!

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


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

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Jan 19, 2006
    #12
  13. David Segall

    David Segall Guest

    "Jonathan N. Little" <> wrote:

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

    >
    ><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, Jan 19, 2006
    #13
  14. David Segall

    David Segall Guest

    "Alan J. Flavell" <> wrote:

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

    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.
     
    David Segall, Jan 19, 2006
    #14
  15. David Segall

    Jose Guest

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


    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
    --
    Money: what you need when you run out of brains.
    for Email, make the obvious change in the address.
     
    Jose, Jan 19, 2006
    #15
  16. David Segall

    David Segall Guest

    Jose <> wrote:

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

    >
    >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.
     
    David Segall, Jan 20, 2006
    #16
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad
    Replies:
    0
    Views:
    581
    tshad
    Apr 15, 2005
  2. Rajesh

    Text below an image

    Rajesh, Jan 19, 2006, in forum: ASP .Net
    Replies:
    9
    Views:
    474
    Rajesh
    Jan 19, 2006
  3. Jason Heydasch
    Replies:
    1
    Views:
    481
  4. Zarkas

    capture onclick event below an image

    Zarkas, Sep 20, 2009, in forum: Javascript
    Replies:
    10
    Views:
    194
    Zarkas
    Sep 21, 2009
  5. kiran
    Replies:
    12
    Views:
    1,222
    Scott Sauyet
    Dec 7, 2011
Loading...

Share This Page