Forum Moderators: open
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]
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]
