controlling the size of an image when clicked - php

Question

The following php script is used to load an image from the database! when the image is clicked an enlarged image appears but when i give height and width it remains the same large size! I want to reduce the size of the clicked image to
height=100 and width=100 Though i gave them it did not work
echo'<div class="ienlarger"><a href=../ordering/'.( $row['Image1'] ).' height=100 width=100><img src="../ordering/' .$row['Image1']. '" alt="thumb" class="resize_thumb" /><span>
<img src="../ordering/' .$row['Image1']. '" alt="large" height=500 width=500 /><br />
Copy-1</span></a></div>';
How can achieve this?

Answer 1

The reason why the clicked image isn't 100x100 is because there is no width or height attributes in the a tag. If you think about it, since a tag or anchors can link to all types of documents, including non-image files and non-html files (i.e. it could link to a file download). And in the case of a download, it wouldn't make sense to have a width attribute.
I would suggest if you really want this functionality, you could either create an image 500x500 resolution and create a similar one with a 100x100 resolution....
Or if you can't afford that space, you could create a javascript that does that. For example (not sure if it works):
<div class="ienlarger"><img src="../ordering/<?php echo $row['Image1'] ?>" alt="thumb" class="resize_thumb" />
<span>
<img id="sizable" src="../ordering/<?php echo $row['Image1'] ?>" alt="large" height=500 width=500 /><br />
Copy-1
</span>
<script>
document.getElementById("sizeable").onclick = function(evt)
{
evt.target.width = 100;
evt.target.height = 100;
};
</script>
</div>