CSS Image Preview

Hi,

I have a on a web page that I have applied css styling to, to get a 75% transparent background. basically I want to be able to click an image, use an onlcick function to call the layer and display the image as full size inside the layer, then click the layer again to close it. Good example of this at:

http://www.ebuyer.co.uk/customer/products/index.html?rb=19049306449&action=c2hvd19wcm9kdWN0X2dhbGxlcnk=&product_uid=82393

Just click one of the images.

My current css code:
.image {
      background-color: #8F9BB1;
      height: 100%;
      width: 100%;
      opacity: .5;
      filter: alpha(opacity=75);
      position: absolute;
      left: 0;
      top: 0;
      visibility: visible;
}

Thanks,
Ross.
RozwaldeoAsked:
Who is Participating?
 
shaggy_the_sheepConnect With a Mentor Commented:
Hi

Try this...

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Hide and Show Image Preview</title>
<style type="text/css">
.shadow {
     background-color: #8F9BB1;
     height: 100%;
     width: 100%;
     opacity: .5;
     filter: alpha(opacity=75);
     position: absolute;
     left: 0;
     top: 0;
     visibility: visible;
}
</style>
<script language="javascript" type="text/javascript">
function showImage(id){
document.body.className = 'shadow';

var img = document.getElementById('image' + id);
var show = document.getElementById('showImage');

show.src = img.src;
show.width = img.width;
show.height = img.height;
show.style.top = (screen.height/2) - (img.height/2) + 'px';
show.style.left = (screen.width/2) - (img.width/2) + 'px';

show.style.display = 'block';

}
function hideImage(){
document.body.className = '';
document.getElementById('showImage').style.display = 'none';
}
</script>
</head>

<body>
<img id="image1" src="http://www.fast-chat.co.uk/images/monkey.jpg" onclick="showImage(1)" width="150" height="150">
<img id="image2" src="http://www.fast-chat.co.uk/images/respect.jpg" onclick="showImage(2)" width="150" height="150">
<img id="image3" src="http://www.fast-chat.co.uk/images/jimmy.jpg" onclick="showImage(3)" width="120" height="150">
<img id="showImage" style="position: absolute; display: none; cursor: hand" onclick="hideImage()" alt="Click to hide"></img>
</body>

</html>

Let me know if you need any of it explained, etc.

Richard
0
 
bochgochConnect With a Mentor Commented:
Not wanting to steal shaggy_the_sheep's thunder, but rather than reinventing the wheel have you thought of using lightbox...

http://www.huddletogether.com/projects/lightbox2/

...similar to what you're after...??

bg
0
 
shaggy_the_sheepCommented:
hi bg

that sounds like a much better idea...you might aswell use a professional looking solution....especially when it's free!

to be honest i'd never heard of lightbox, but i could help me out aswell

thanks

richard
0
 
nltechConnect With a Mentor Commented:
a lighter weight and more versatile (can also display html pages in a 'box') take on lightbox
http://codylindley.com/Javascript/257/thickbox-one-box-to-rule-them-all

css only thumbnail popup (uses 2 files for each image. thumb & 'zoom').
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

another css only solution (uses a single image for both views)
http://randsco.com/_miscPgs/cssZoomPZ3.html


0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.