I have a Gallery on my site now, When you hover over the image, It displays the images larger,

Is there any way to make it display the image the same way, but the users have to click rather as hover over?

This is the CSS and the webpage is here.

http://www.digicars.co.uk/web/new/photography.php

.hoverbox
{
cursor: default;
list-style: none;
}

.hoverbox a
{
cursor: default;
}

.hoverbox a .preview
{
display: none;
}

.hoverbox a:hover .preview
{
display:block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}

.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}

.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}

.hoverbox .preview
{
border-color: #000;
width: 600px;
height: 480px;

}

Is there any way to make it display the image the same way, but the users have to click rather as hover over?

Yes, but you have to do it with scripting using the onClick event

Cheers

for that, just so i know that script wont work for my needs, I'll hunt for

another

one

It's a fairly simple thing to do, you just can't do it with CSS alone. Lots of scripts around.

you might consider this http://www.huddletogether.com/projects/lightbox2/

Originally Posted by davemies

you might consider this http://www.huddletogether.com/projects/lightbox2/

That looks like the one, I'll bookmark it and try it out tomorow when i have time, cheers Dave,