Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1320
  • Last Modified:

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.
0
Rozwaldeo
Asked:
Rozwaldeo
  • 2
3 Solutions
 
shaggy_the_sheepCommented:
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
 
bochgochCommented:
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
 
nltechCommented:
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now