Resizable images on a web page

screen shot
The other day trying to make an audiobook using the instructions
from my old audiobook post.
I found myself jumping back and forth between the instructions
and the full size screen shot that was linked via a thumbnail.
The thumbnail to the right is the one from the audiobook post…



I realized that it would be nicer if the image resized inside the context of
the page instead of loading a new page when I clicked on it. That way I could
still read the instructions and see the image at its full size or thumbnail
size. Then I realized that it’s pretty easy to make an image do that. Try it...
Click on the thumbnail. It will alternatively resize between a big and a small
image without reloading the page!




How it works in 3 parts:



Part 1: A JavaScript function that tells the image to resize.
You add this to the <head> section of your page once and any image can use it. Here's the code:

<script>
/* changeImageSize(image, bigWidth, bigHeight,
smallWidth, smallHeight)

Purpose: alternates the size of an image on
the page from big to small based on
the settings provided by the call to
the function.

Expects:
image: an image tag object
bigWidth: the image width to use when
displaying a the big size
bigHeight: the image height to use when
displaying a the big size
smallWidth: the image width to use when
displaying a the small size
smallHeight: the image height to use when
displaying a the small size

Note: the decision to swith size is based on a
comparison of the image objects current
width to the big size.

usage:

<img width="212" height="230"
align="right"
alt="dialog sample"
class="imgGrow"
src="pic.jpg"
onclick="changeImageSize(this,530,575,212,230)">


*/
function changeImageSize(image, bigWidth, bigHeight,
smallWidth, smallHeight)
{


// see if the width of the image is set to
// the small size if so, make it big
if (image.width == smallWidth)
{
image.width=bigWidth;
image.height=bigHeight;
}
else
{
image.width=smallWidth;
image.height=smallHeight;
}
}
</script>




Part 2 (optional): CSS
that to causes the green highlight and changes the cursor type when you mouse over the image.
You add this to the <head> section of your page. It's optional, but very cool to use.
Here's the code:




<style>
/* images that have the ability to grow and
shrink should use this class */
.imgGrow {
margin: 10pt 10px 10px 10pt;
padding: 10px;
color:green;
cursor: hand;
border:1px dashed;
text-decoration:none;

}
</style>





Part 3: The image tag. This is the HTML you would use to add the image
to your page. Here's the code:


<img width="212" height="230"
align="right"
alt="dialog sample"
class="imgGrow"
src="pic.jpg"
onclick="changeImageSize(this,530,575,212,230)">


  1. The width and height tags should be set to the initial size you want the image displayed.

  2. The class="imgGrow" tells the image to use the style we defined in step #2.

  3. Set src="[the url location of your image]".

  4. The onclick="changeImageSize(this,220,146,110,73)" tag is what makes the image resizable. Its 5 arguments in order

    • the image object: just type "this" its a javascript keyword

    • bigWidth: the image width to use when displaying a the big size

    • bigHeight: the image height to use when displaying a the big size

    • smallWidth: the image width to use when displaying a the small size

    • smallHeight: the image height to use when displaying a the small size




Once you have parts 1 and 2 added to you're page just add images using the convention in part 3.



Share and Enjoy.





russelldad_blog_tags
_code_
_invention_