Welcome to WebmasterWorld Guest from 35.171.146.16

Forum Moderators: open

Message Too Old, No Replies

Image Resize onclick

javascript to change the size of an image

     
1:18 pm on Apr 30, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:July 5, 2005
posts:352
votes: 0


A friend of mine asked if I could come up with a little script that would run through a page, make all the images smaller, and when one of the images is clicked, it toggles between it's original size and the smaller thumbnail size.

I thought it would be a fun little script to produce however now I'm a little stuck. Here's what I have so far;

<html>
<head>
<title>Image resize</title>

<script type="text/javascript">

var imgState;
var imgWidth;
var imgHeight;

function imageResize(theImage){
imgWidth = document.getElementById(theImage).width;
imgHeight = document.getElementById(theImage).height;

imgWidth = eval(imgWidth/2);
imgHeight = eval(imgHeight/2);

document.getElementById(theImage).width = imgWidth;
document.getElementById(theImage).height = imgHeight;

imgState = 'small';
}

function changeImageSize(thisImage){
if(imgState == 'small'){
imgWidth = document.getElementById(thisImage).width;
imgHeight = document.getElementById(thisImage).height;

imgWidth = eval(imgWidth*2);
imgHeight = eval(imgHeight*2);

document.getElementById(thisImage).width = imgWidth;
document.getElementById(thisImage).height = imgHeight;

imgState = 'large';
}else{
imgWidth = document.getElementById(thisImage).width;
imgHeight = document.getElementById(thisImage).height;

imgWidth = eval(imgWidth/2);
imgHeight = eval(imgHeight/2);

document.getElementById(thisImage).width = imgWidth;
document.getElementById(thisImage).height = imgHeight;

imgState = 'small';
}
}
</script>

</head>

<body onload="imageResize('firstImage');">

<img src="balloons.png" width="550" height="600" border="0" alt="" id="firstImage" onclick="changeImageSize(this.id)">

</body>
</html>

That works fine for the one image, now I need to make it work for all images in a page. Do I use getElementsByTagName? And how would I know if it's the resized image or the original size. Also, I heard I should not be using eval, what should I be using?

I'm going to keep at it, but I'm sure someone like Dabrowski enjoys this sort of thing. ;)

Thanks!

[edited by: Trace at 1:19 pm (utc) on April 30, 2007]

5:48 pm on Apr 30, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


Not sure if this will do the trick. It will shrink all images when the page loads. When an image is clicked, it will shrink all images and then restore the clicked image to its original size. Clicking the image again will just keep the image big (doesn't toggle it back to small size), but clicking on a different image will cause it to be shrunk again.

Note, this just tries to overwrite the event handlers. A better option would be to 'attach' event listeners (I like using the Yahoo UI Library for this, but I didn't do that in this example).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image resize</title>
<script type="text/javascript">
// Create namespace to avoid global conflicts
var FOTI = window.FOTI {};
FOTI.ImageSizer = function() {
return {
/**
* Array that stores the images and their original sizes
*/
imgList : [],
/**
* Initialize
*/
init : function() {
// Get all images
var imgElList = document.getElementsByTagName('img');
for( var i = 0; i < imgElList.length; i++ ) {
// Store the images
FOTI.ImageSizer.addImg(imgElList[i]);
// Attach the onclick handlers for the images
imgElList[i].onclick = function() {
FOTI.ImageSizer.shrinkImages();
FOTI.ImageSizer.restoreImage(this);
}
}
// Shrink 'em
FOTI.ImageSizer.shrinkImages();
},
/**
* Store an image
* @param {HTMLElement} el The image element to store
*/
addImg : function(el) {
FOTI.ImageSizer.imgList[FOTI.ImageSizer.imgList.length] = {
img : el,
origWidth : el.width,
origHeight : el.height
}
},
/**
* Shrink all images
*/
shrinkImages : function() {
for( var i = 0; i < FOTI.ImageSizer.imgList.length; i++ ) {
// If the current width is the same as the original width, resize it
if( FOTI.ImageSizer.imgList[i].img.width == FOTI.ImageSizer.imgList[i].origWidth ) {
FOTI.ImageSizer.imgList[i].img.width = FOTI.ImageSizer.imgList[i].origWidth / 2;
FOTI.ImageSizer.imgList[i].img.height = FOTI.ImageSizer.imgList[i].origHeight / 2;
}
}
},
/**
* Restore an image to its original size
* @param {HTMLElement} el The image element to restore
*/
restoreImage : function(el) {
for( var i = 0; i < FOTI.ImageSizer.imgList.length; i++ ) {
// Find the image in the stored list so we can get its orig width/height
if( FOTI.ImageSizer.imgList[i].img == el ) {
el.width = FOTI.ImageSizer.imgList[i].origWidth;
el.height = FOTI.ImageSizer.imgList[i].origHeight;
}
}
}
};
}();
window.onload = function() {
FOTI.ImageSizer.init();
}
</script>
</head>
<body>
<img src="balloons.png" alt="Balloons">
<img src="balloons.png" alt="Balloons">
<img src="balloons.png" alt="Balloons">
</body>
</html>

[edited by: Fotiman at 5:51 pm (utc) on April 30, 2007]

12:15 pm on Mar 20, 2008 (gmt 0)

New User

10+ Year Member

joined:Jan 26, 2008
posts:5
votes: 0


Yes its really help full for me thanks "Trace"
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members