Text appears when hover over image

Hi

I want a text description to appear when you hover over an image, how would I do this pls? Is it difficult? Thnx

 

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

 

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

 

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!

 

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.

 

.txtOverlay{
width:390px;
height:206px;
opacity:0.9;
font-size:20px;
font-weight:700;
text-align:justify;
border:5px solid #FFA500;
padding:5px;
background: url(img/tiger-img.png) no-repeat;
}
.theText{
opacity:0;
}
.txtOverlay:hover .theText
{
opacity:0.9;
color:#FFFFFF;
font-size:20px;
font-weight:700;
}

Code (markup):

dell

 

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

<img src="http://thissite.com/images/incentwd.png" alt="[INCENT]" title="[INCENT]" border="0" hspace="1" width="49" height="12">

HTML:

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!

 

I use this utility, works like magic: http://textmechanic.com/Big-File-Tool-Find-and-Replace-Text.html

You can change anything in a really large file within seconds.

 

Thats really useful thank you.

One site I regularly use for checking html actions is w3schools.com, I am not affiliated in any way with the site.

 

Wow, bump of an 8 year old thread.... With DAN. Damn I miss Dan... though why are we seeing so many bumps of posts from 2007-2009 forum-wide?

That said, if you need scripttardery to do this in this day and age, you probably have no business building websites. Admittedly, I've been saying that longer than this thread existed so...

 

@deathshadow yeah, I thought the same thing. I posted without looking then I saw that this thread was really old. There's this new thingy now on the main page "Popular Threads Right Now" and somehow most of the threads there (a few hours ago) were really old. Not sure what's going on.

 

Yep, I've noticed this oddity too. I think the popularity is in reference to how many times people are viewing the thread as a result of searches but I could be wrong.

 

This is why I don't really care about front page - I check certain sub-forums, and that's it

 

Wow, and all I thought you had to do was fill in the alt tags. This sht is complicated as heck