What is better?

[The Little Guy]

What would you do?

 

OK I have 2 images for each image one set at 50% and one at 100% in width and height.

 

The operation:

Option 1: The browser loads the first 50% sized image. When it is clicked, it removes that image and loads the 100% sized image using AJAX and PHP. When the larger image is clicked it goes back to the 50% sized image then has to reload that.

 

Option 2: The browser loads 2 images the 50% sized image and 100% sized image. The 100% sized image is defaulted to a display of none using CSS while the 50% sized is shows. Javascript is then used to change the display type of each one depending on the image they are viewing.  This is 100 times faster than the other way when zooming in and out, but requires loading 2 images.

[phpQuestioner]

I personally would do something like this:

 

<style type="text/css">

.big {width:100%;height:100%}
.small {width:50%;height:50%}

</style>


<script language="javascript">

function increaseXY(myImage)
{
document.getElementById(myImage).className='big';
document.getElementById(myImage).onclick=function() {
  decreaseXY(myImage);
}
}

function decreaseXY(myImage)
{
document.getElementById(myImage).className='small';
document.getElementById(myImage).onclick=function() {
  increaseXY(myImage);
}
}


</script>


<img id="pic" class="small" src="somepicture.jpg" onclick="increaseXY('pic')">