4 replies [Last post]
Cragdo
Offline
newbie
Last seen: 12 years 4 weeks ago
Timezone: GMT+1
Joined: 2007-06-25
Posts: 2
Points: 0

Hi,

I have a css Image gallery that uses an absolutely positioned span that initially is set to hidden to hold the larger image and using the psuedo class hover property to set the span to visible when the cursor is placed over the thumbnail image which I have set as a link so that it can access the hover property.

css code:

/* Css document for Image viewer */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
height: 900px;
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid #fff;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ccc;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 170px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

p {
margin: 30px 50px 20px 50px;
padding: 0;
}

html:

CSS Image Viewer
@import "image_expander.css";


Pete's last day



Catstycam and Brown Cove

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris porta eleifend mauris. In id lorem eget velit vestibulum vehicula.
Pellentesque congue tempor arcu. Curabitur lorem. Vivamus commodo fermentum urna.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris porta eleifend mauris. In id lorem eget velit vestibulum vehicula.
Pellentesque congue tempor arcu. Curabitur lorem. Vivamus commodo fermentum urna.

Suspendisse varius neque a purus. Vestibulum ornare interdum augue. Donec tempor arcu non felis.
Mauris congue risus ac dui. Pellentesque aliquam pede tempor massa.

Fusce sit amet enim. Nulla vestibulum mauris quis ante. In quis pede. Aliquam dui. Donec adipiscing est id ligula.
Phasellus et massa a eros facilisis venenatis.



This works perfectly but I need to set something up so that it is accessible using the keyboard only to make the site AA Accessibility compliant.

Normally I would write a JavaScript function that was called from within the onkeypress property but this is not allowed by the client.

I have searched around for a solution with no success.
Can anyone help please?

Thanks

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Gragdo please don't post the

Gragdo please don't post the same question to different sub forums, it won't get a faster response, especially in the friendsters section which is old and seldom visited.

I'll delete the duplicate post.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Have you tried setting the

Have you tried setting the :focus pseudo class?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Cragdo
Offline
newbie
Last seen: 12 years 4 weeks ago
Timezone: GMT+1
Joined: 2007-06-25
Posts: 2
Points: 0

Sorry about that

I posted in the wrong forum the first time but I thatought I had removed the first post.
Typical newbie. I apologise.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No problem.

No problem.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me