ocelot | (no subject)

(no subject)

Dear LazyWeb,

I want to make it so that all pictures of a certain class have the same text in their title attribute. Specifically, I want all thumbnails to say "Click here for larger image" when you put the mouse over them, which would normally be accomplished via the title attribute. How would I do this, preferably using CSS, but whatever works?

This is not working:

img.tpic
{
position: relative;
top: -8px;
background-image: url('images/imgbg.gif');
height: 130px;
padding: 10px;
title: "Click here for larger image";
}

I am embarrased to admit how long I have been trying to figure this out.

Thank you!

Flat | Top-Level Comments Only

I've been Googling around, and I don't think it's possible to do it with CSS. CSS is meant for style, not content, and the title/alt tag is content. I found this page which seems to agree. Looks like he has a suggestion that might work for you, but I didn't read the whole thing.

You could probably create a JavaScript (or find someone to create it for you) that would identify all images of a certain class and add the title information directly on the page, though.

Forgive me for sticking my nose in way out of my depth -- I haven't played with CSS in years. But in what way is this not working? the alt-text just isn't popping, but everything else goes according to plan? My understanding is that you can't attach an alt attribute to a background image, and I'm trying to figure out what the background-image attribute is doing there -- when you call an image with img.tpic, is it supposed to call the background image, stick the called image on top of that, and apply the alt-text to the top image?

Now I'm really curious. can I ask where this is being used? I'm curious about how it looks.

Just a plain old image that needs text over it, not a background image.

The image on http://www.koyotemakesstuff.com/ is an example (It's not linked to anything at the moment, but it's the only I've been messing with).

Flat | Top-Level Comments Only