On 3/07/2009, at 5:57 AM, Debbie Roes wrote: > What I am wondering is if I can achieve the desired result using > ONLY CSS.
In this case, what you can achieve using *only* CSS is going to be more limited. Firstly you will have to give up on making it work in IE6 as :hover only works on <a> elements in this browser. There are ways around this but they involve javascript (http://www.xs4all.nl/~peterned/csshover.html etc.) Secondly do you really want it so that the image only appears on hover? That means that the user has to leave their mouse in place to look at the image. Wouldn't it be nicer to be able to click a thumbnail and for it to display until something else is clicked or for the main image to stay visible unless the user triggers another image with mouseover? I would suggest that a solution using javascript to get around these issues is going to be much better. If you aren't sure how to begin with something like this I'd suggest googling 'javascript thumbnail gallery' and see if you can find something that works and can be configured to meet your design needs. Here are a couple I found straight away... http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm http://devkick.com/lab/galleria/ Just because it uses javascript doesn't mean that it is going to be any more difficult to maintain for the owner. If the js is unobtrusive (i.e. the script is in an external file and and there are no inline javascript calls) then it shouldn't make any difference. If you want to do hardcore progressive enhancement and don't care if IE/Opera users don't see your rounded corners and drop shadows then you can do this with CSS3. Otherwise you'll need some type of background image solution. Again, I'd suggest googling for this, but here's one that I've used before http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/ . Good luck, Tim ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
