Welcome to the MacNN Forums.

Gadifae · 08:14 PM

On a photography gallery page that I've been developing, I would like to have data about each photograph display when the visitor hovers over a thumbnail. Each page will have either four or six thumbnailed images.

Musing about how to implement such a function, it occured to me the data could be placed inside of a paragraph tag which could then be hidden and displayed almost anyway I like. What I have not been able to figure out, is how I can make the data display only when the visitor is hovering over a thumbnail. (Since there will be more than one image on each page, the data must be displayed only when the cursor is over the image.).

If it helps, the thumbnail image is also a link to a larger version of the photograph.

G.

Simon Mundy · Dec 23, 2003, 03:57 AM

Originally posted by Gadifae:
On a photography gallery page that I've been developing, I would like to have data about each photograph display when the visitor hovers over a thumbnail. Each page will have either four or six thumbnailed images.

Musing about how to implement such a function, it occured to me the data could be placed inside of a paragraph tag which could then be hidden and displayed almost anyway I like. What I have not been able to figure out, is how I can make the data display only when the visitor is hovering over a thumbnail. (Since there will be more than one image on each page, the data must be displayed only when the cursor is over the image.).

If it helps, the thumbnail image is also a link to a larger version of the photograph.

G.

Here's a link. Do with it what you will.

http://www.meyerweb.com/eric/css/edge/popups/demo.html

Millennium · 09:30 AM

Eric Meyer's method is great. However, unless your thumbnails are all linked to larger versions of the pics (which, being thumbnails, I'm guessing is probably the case) it won't work in IE/Win. This is because IE/Win only recognizes the :hover attribute on links.

Why does IE do this? There actually is a reason for this (sort of). The thing is, Microsoft actually invented the :hover pseudoclass before CSS2 came out; it was part of their Embrace And Extend philosophy. They intended it to be like :link and :visited, which only make sense for links.

Unfortunately for them, when :hover was incorporated into CSS2, it was done better. Instead of applying only to links, it was specified to apply on any tag. IE, unfortunately, never caught up with the standard in this regard. In essence, the W3C Embraced And Extended them.

Quite a shame, actually. Putting :hover on a link has its uses, but is mostly fluff. Putting :hover on arbitrary elements, though, allows for some surprisingly useful applications. Check out some of the other demos on Eric Meyer's site for more information on that.

Gadifae · Dec 24, 2003, 05:02 AM

Originally posted by Simon Mundy:
Here's a link. Do with it what you will.

http://www.meyerweb.com/eric/css/edge/popups/demo.html

This looks promising. Once the holidays are over I shall tinker around with this and see what I can do with it.

Thanks for pointing me towards it.

G.

larkost · Dec 24, 2003, 12:37 PM

As it happens, I just posted some code that does about this:

http://forums.macnn.com/showthread.p...hreadid=194411

Synotic · Dec 24, 2003, 02:44 PM

Originally posted by Simon Mundy:
Here's a link. Do with it what you will.

http://www.meyerweb.com/eric/css/edge/popups/demo.html

I've been there before but this thread persuaded me to give it a shot (you can always learn something

) I messed around with it and took a bit far I think...

http://s88199767.onlinehome.us/rollover/

It works a bit better than eric's though because the paragraph is positioned relative to the image/link as opposed to the window. This means you can move the images anywhere, resize the text and it should all work fine.

Can anyone test how well this works? Will MSIE apply the effect if it's still selecting a paragraph even though it's within a hovered link which it does support? If so maybe that can be a hackish solution for hovering on arbitrary elements...

Edit: OK so it doesn't even work in ie:mac and neither does eric's. Well I suppose it wasn't meant to work necessarily if it was in his edge section. Any other ideas?

nica · Jan 5, 2004, 04:53 PM

You can have the image with a rollover that displays the description. Or the images with rollovers that display in one location with different descriptions.

Not the best way to solve the problem but it�s an alternative.

DavideMac · Jan 5, 2004, 07:19 PM

Ok, I'm new to CSS and after doing some research and reading a few articles I'm committed to using CSS for layout instead of tables. I'm also starting to see some of the benefits of using CSS for so many other things and I'm getting pretty excited about it although it can be frustrating at times. I've gotten pretty good with quite a few aspects so far but I'm a little confused with how the code works in http://www.meyerweb.com/eric/css/edge/popups/demo.html. I was wondering if it's possible for someone to display that demo ready to go so that I can study it and what it does. Also I was wondering (to avoid Javascript as much as possible with more people turning it off these days) is it possible using CSS to to change the text in a line? I mean I know you can alter the text size and underline it with a mouse hover but what about changing "this" to "that"? Is that possible?

I apologize in advance for having only a basic understanding of CSS and I thank you for the other examples in thread which I will have to look at a few times more to understand what's going on.

DavideMac · Jan 5, 2004, 07:55 PM

Well I got the demo working and it's very cool. What I don't understand is the way he labeled the id selectors. If someone could explain this I would be grateful. Snippets of code are nice to have but I'm looking for understanding so I can get my own creative juices flowing.

Thanks