accessibility issues with image gallery

[Cragdo]

Hi

I have used the Dynamic Drive image gallery which works perfectly.


<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

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

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

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

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

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
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: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>


My problem is an accessibility compliance issue.

I would like it to have the ability to not only use the hover psuedo class but also display the image from the keyboard.

After the user has navigated to the image gallery using the relevant access key (accesskey="i") I need tha user to have the ability to access the larger image by pressing another key such as the return key.

I have tried to find some information on how to do this with CSS but it all very thin on the ground.

Can anyone give me some pointers please.

Thanks