1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Text appears when hover over image

Discussion in 'HTML & Website Design' started by whateverandever2, Nov 23, 2007.

  1. #1
    Hi

    I want a text description to appear when you hover over an image, how would I do this pls? Is it difficult? Thnx
    whateverandever2, Nov 23, 2007 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,197
    Likes Received:
    135
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Depends. If the image is a link too, easy:

    HTML:
    <a href="somewhere.com"><img src="beeld.gif" alt="somewhere.com" title="click here to go to somewhere.com" /></a>

    In Internet Exploder, the ALT text shows on hover, which it's not supposed to but oh well. The rest of the world shows TITLE text on hover.

    However, if you want text to appear when hovering over just anything, that's a whole other clue of yarn.

    http://mikecherim.com/experiments/css_map_pop.php

    I used it on a website here:
    pizzaatje.nl > click on the scooter image at right, hover mouse over question marks.
    (earlier it was a three-page steaming pile of Javascript... now it's a few CSS rules)

    Ah, there is a third way I'd forgotten about.

    You could have the text already under the image (or above... wherever), but hidden by having the same colour as the background (the colour around the image). On hover of the container with image and text, the text could change colour and then of course it's visible. Unfortunately, IE6 only hovers on links. You can Javascript your way out of that, and take PeterNed's and just stick it somewhere http://www.xs4all.nl/~peterned/htc/csshover2.htc .

    HTML
    <div class="imagehover">
    <img src="somewhere.gif" height="100" width="100" alt="a picture of a walrus wallowing in the blood" />
    <p>Here's some hidden text which shows when the container is hovered over</p>
    </div>

    Assuming the page's background is white:
    CSS
    .imagehover p {
    color: #fff;
    }
    .imagehover p:hover {
    color: #000;
    }

    The text goes from invisible white to visible black on hover of the container. Be careful about google. Hidden text and links have been abused by spammers so sometimes google thinks a site with hidden text deserves a ban. As far as I know, it being visible on hover should make that okay (I've done it several times for hidden skip links for da blind).
    Stomme poes, Nov 23, 2007 IP
  3. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,034
    Likes Received:
    431
    Best Answers:
    0
    Trophy Points:
    0
    #3
    whateverandever2, Stomme poes just gave you the answer in all its glory. Nothing I can say here can add to what was already said (with one exception - if used properly, this technique will be considered acceptable by Google and other search engines since you're enhancing the usability of the Web site, not stuffing the page with content that people will never see that the search engines can).
    Dan Schulz, Nov 23, 2007 IP
  4. www.DublinPCServices.com

    www.DublinPCServices.com Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    As this is an old thread, I hope you don't mind if I hijack it and turn the OP's question on it's head.

    Is it possible to do the same thing, but for a piece of text? e.g. lets say the site listed features of a computer, and when the mouse hovered over the "inverter" feature, it would say "The inverter performs the following functions...blah blah"

    Thanks!
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,197
    Likes Received:
    135
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Same thing as my second answer, unless you want to javascript it (which I don't recommend... you'd have to have that text available by default to everyone, and those with javascript get it hidden from them (onload) until they click on the icon or hover over the text).

    I have one site listed up in my answer, but here's another: http://stommepoes.nl/Scooterverzekeren/scooterafsluiten1.html

    Scroll down and hover over Identificatienummer (or any of the others with a questionmark next to them). That one has an image in it. Woo!

    That page is HTML4 transitional because I needed "target" for those without JS or browser caching (such a shame, to tarnish my code like that), but you can do it strict.

    Basically you're wrapping an <a> inside the text in question with a <span> inside containing the stuff you want to appear on :hover/:focus.

    <p><a id="foo" href="#foo"><span>The inverter converts your DC power into 59.99Hz AC power</span>Inverter Feature</a></p>

    The a goes to its own id in case someone accidentally clicks it-- they don't lose focus and stay at the same place on the page. The a is position: relative, and the span is position: absolute and set to either left: -9999em or margin-left: -9999em (or a gazillion px, whatever), and on :hover or :focus of the text, span's position is left: wherever you want it in relation to the a;

    You'll notice in IE (6 and 7) that hover doesn't seem to do anything. For IE, you need to give it a little nudge:
    p a:hover {
    visibility: visible;
    }
    You need to keep this separate from your other :hover declarations! You don't have to use visibility:visible but it makes no noticeable difference which is why it's a good one. Otherwise, you can set a background colour or something.
    Stomme poes, Apr 10, 2008 IP
  6. dellmerca

    dellmerca Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #6
    Code (Text):
    1. .txtOverlay{
    2. width:390px;
    3. height:206px;
    4. opacity:0.9;
    5. font-size:20px;
    6. font-weight:700;
    7. text-align:justify;
    8. border:5px solid #FFA500;
    9. padding:5px;
    10. background: url(img/tiger-img.png) no-repeat;
    11. }
    12. .theText{
    13. opacity:0;
    14. }
    15. .txtOverlay:hover .theText
    16. {
    17. opacity:0.9;
    18. color:#FFFFFF;
    19. font-size:20px;
    20. font-weight:700;
    21. }

    dell
    Last edited by a moderator: Apr 28, 2014
    dellmerca, Apr 28, 2014 IP
  7. MeBeGreedy

    MeBeGreedy Member

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #7
    I've been coding images WRONG all this time! (Argh!) I had been wondering why my ''alt=' text in my images hadn't been showing up in Firefox. I had it pegged to something wrong in my own system or browser configuration.

    Then today I ran across this statement "In Internet Exploder, the ALT text shows on hover, which it's not supposed to but oh well. The rest of the world shows TITLE text on hover." (Argh!)

    So now in all the custom coding that I've done I need to go back and add duplicate 'title=' statements in EVERYTHING to enable hover over image text...

    So a decent HTML IMG statement now looks like this to me (with the 'title=' statement):

    HTML:
    1. <img src="http://thissite.com/images/incentwd.png" alt="[INCENT]" title="[INCENT]" border="0" hspace="1" width="49" height="12">
    Anyone else out there been forgetting about their 'title=' statement as well (come on, please help me NOT feel like I'm an idiot - fess up)

    Now if I only could find a neato automatic utility that would take all my alt= statements and add duplicate title= statements in whole pages of code in one fell swoop... Anyone know of such a utility to do this? ..or some type of easier softer process to accomplish this in a TON of code pages? PLEASE?


    I just googled looking for such a utility and came up blank (Argh!) (I might have to make an app or macro quick and dirty that would do this)

    I could make the manual task a bit easier I guess by finding and replacing 'alt="' with 'title="" alt="' and then search for all the 'title=""' statements and fill in the quotes with whatever is in the alt statements... but such a pain in the arse!
    MeBeGreedy, May 18, 2014 IP