Sent by Pawel Knapik on 10 January 2005 01:01
On Sun, 9 Jan 2005 16:14:10 -0800, Tom Keenan [EMAIL-REMOVED]> wrote:
> I've been building web sites since 1993 but only now getting into CSS.
> The first project I started is converting an art gallery web site. In
> this site there is a page with all the artists names. Using javascript
> it now displays an image of the specific artist's work when the cursor
> hovers over the artist's name. I'd love to be able to abandon the
> javascript and use CSS. I feel there must be a way to do this with CSS
> and am feeling stupid for not seeing it. I would very much appreciate
> anyone who could point me in the right direction.
I suspect that the artists' name is a link, so you could try:
[css]
a.artist img { display: none; }
a.artis:hover img { display: block; border: none; }
[html]
<a href="artist_portfolio.html" class="artist">Artist Name <img
src="image.jpg" alt="" /></a>
this will show image when cursor is over the link.
you can position the images so they won't break your layout when will
appear, e.g.
a.artist:hover img { position: absolute; top: 0; left: 0; } will show
the image in top left corner of your site, by adding
a.artist { position: relative; } and the above images will appear in
top left corner of link area.
If artists' names are not links you can do this by styling :hover
state for elements in which image and name is included and using
csshover.htc to make it work in IE.
--
pawel
> Thanks in advance,
>
> Tom Keenan
> [EMAIL-REMOVED]
> ______________________________________________________________________
> 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/
>
______________________________________________________________________
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/
