Question:

How to pre-determine image size before it is displayed on webpage?

by | earlier

Hi, Is there a way to determine the size of the images displayed beofre it is displayed on the webpage so that based on its size, we can manuplate the image size and display it in an appopriate size. Our problem is that we have the thumbnail & full size images of all different sizes. Is there a way to determine the size of the image before it gets displayed, compare that size to a pre-specified size, if the existing image size is smaller than the pre-specified (pre-determined) size, then display it as it is and if the image size is bigger than the pre-determined size, then display the image in the pre-determined size, that way there will be a uniformity in all pages. There are too many images, so it not possible to go and resize each images, plus, each image is unique and sometimes resizing it makes the image look bad. If we can achive this, then maybe, we can run a on-mouse over script to show the complete image in its original size? Any thoughts, suggestions, ideas would be greatly appericiated. Thanks much

Tags:

Report

Answer The Question I've Same Question Too

Follow Question

1 ANSWERS

Sort By: Date | Rating

Your question is a bit fuzzy. Here's an example that may address your question. If it doesn't, explain the difference between what this does and what you need, and I may give a better answer.

<html>

<head>

<script>

// declare the predefined height to which all images

// must conform - could use width, if that's preferred

var preHeight = 200; // in pixels

// declare the source directory for all image files

var imgDir = '../../../x*x/'

// declare the names of the image files

var imgSrcArray = [

'img0.jpg',

'img1.jpg',

'img2.jpg'

]

// preload the images to cache

var imgArray = new Array();

var last = imgSrcArray.length;

for (var i = 0; i < last; i++) {

imgArray[i] = new Image();

imgArray[i].src = imgDir + imgSrcArray[i];

}

function getImgSize(iRef) {

var h = iRef.height;

var w = iRef.width;

if (h < preHeight) {

return 'height: ' + h + '; width: ' + w;

}

else {

var scale = preHeight/h;

var sh = preHeight;

var sw = Math.floor ( w*scale );

return 'height: ' + sh + '; width: ' + sw;

}

}

function addImgs() {

var imgHtml = '';

var last = imgArray.length;

for (var i = 0; i < last; i++) {

imgHtml += '<img src="' + imgArray[i].src + '" ' +

'style="' + getImgSize( imgArray[i] ) + '" />';

}

var d = document;

var ih = d.getElementById( 'imgHolder' );

ih.innerHTML = imgHtml;

}

window.onload = addImgs;

</script>

</head>

<body>

<div id="imgHolder"></div>

</body>

</html>

Added: "The image file names get passed as a variable to be displayed." What is the structure of the variable? There could be some relatively simple translation of "the variable" to a form that would conform to either the imgSrcArray or the imgArray. 'Splain me mo'.
Report (0) (0) | earlier