Sent by Richard York on 19 April 2005 20:08
Kevin Singleton wrote:
> I just posted the attached to the forum and after I hit the button, I
> realised that it is off topic. My apologies. My whole site is in CCS/XTHML
> with a bit of DHTML and css-d has been so helpful to me in the past I was
> not thinking when I posted.
>> I have a photo gallery with a series of thumbnails down the right
side. When
>> a thumbnail is clicked a larger version of the image appears in the
centre
>> of the page. I want to also display the name of the image alongside
the main
>> image when it is displayed.
It doesn't have to be off-topic.
Let's consider how it might be done using only CSS.
First the image itself.
<div class='magnified-image' id='image-name'>
<img src='some_image.jpg' style='width: 200px; height: 200px;' />
<p class='caption'>
Text You want to display
</p>
</div>
Next the hyperlink:
<a href='#image-name'><img src='thumbnail-image.jpg' alt='thumbnail'
title='Click to magnify' /></a>
Now the style sheet.
..magnified-image {
display: none;
position: absolute;
/* etc, etc */
}
..magnified-image:target {
display: block;
}
See what's happening?? You're using the :target pseudo-class to display
the larger image, via an HTML anchor.
Now for the caveats, IE doesn't support it, of course. You can google
for a JS work-around probably on the terms "CSS target pseudo class IE",
for an a-la Dean-Edwards-IE7-style plugin hack to make :target work in IE.
Doesn't work in Opera 7 either, but it works in Gecko NS 6+, Mozilla,
Firefox, etc, and in KHTML.
> However, if anyone can tell me where to get some help on this I will be
> eternally grateful.
HTH!
Regards,
Richard York
--
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
http://www.richard-york.com
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
