Forum Moderators: open
i guess this has to be done using js although am not good in js
i am creating something like article directory and i'm using images in the articles.
so when someone add image the bbcode will be converted to this:
<img src= "yyyy" width = "yyy" height = "yyy" />
but this value for width or height varies! what i want to do is when this value "yyy" exceeds a specific number it must be changed to a value i set
i could do this for instance:
<script type="text/javascript">
window.onload= function resize(){
if (document.getElementById('image').width > 200){
document.getElementById('image').width = 200;
}
}
</script>
but will only apply to the first image! so what should i do to make this if statement applies to all image tags in my document? is it something like getElementByTagName or something like that! i dont know am sorry am not good in javascript :)
thanks for ur answer in advance
Here's one way to gather up all the images in a document, and a way to loop through those images.
var imgs = document.getElementsByTagName("IMG");
for (var i=0; i<imgs.length; i++){
var img = imgs[i];
alert(img.src+' - '+img.style.width);
}
Using the code you've already posted, I think you'll be able to take it from here. If not, just post back with another code snippet and we'll do our best to help. :)
1. If Javascript is disabled, it fails. You are probably getting these on the page from a dynamic server side script, right? If so, you should do your sizing on output of the page. Even that has a problem:
2. Scaling down images in the page bloats load time, and sometimes affects quality. Normally when you increase/decrease an image size linearly, the file size increases/decreases exponentially. When you scale an image in the browser, the file size still stays big, when that file size could be a lot smaller and load your pages faster.
The ultimate solution is to use the GD toolkit or Imagic for PHP, or whatever API is available to your server side programming, to size the images to what they are supposed to be.
3. Maintain proportion. If you're just scaling width, it's inevitable that an image will get distorted. That is, change 300 w X 200 H to 200 W, it's still 200 h and looks stretched.
Either eliminate the height attribute and let the browser figure out the height (which is may or may not do, untested) or be sure to add math to set the proportionate height. For example,
var imgs = document.getElementsByTagName("IMG");
for (var i=0; i<imgs.length; i++){
var img = imgs[i];
var origW = img.style.width;
var origH = img.style.height;
var newW = (origW > 200)?200:origW;
var newH = parseInt(newW * origH) / origW));
}
. . . untested, but newH should be the proportionate height for newW.
thanks alot for the loop it works fine and now am able to go across all of my images in the page and resize them if they are large
and thanks for rocknbil yes! you are right about what u said and i am not willing to use this for uploaded images i am using php and i have a class to resize images after they are uploaded but the thing is i allowed image posting for other servers so what if this image was too large it will mess up the page
i know this will not make the file size smaller as it just resize it in the browser but at least it wont mess the design
thanks for the note about scaling the width with the height
here is the code i came up with:
<script type="text/javascript">
window.onload= function resize(){
var imgs = document.getElementsByTagName("IMG");
for (var i=0; i<imgs.length; i++){
var img = imgs[i];
if(img.width > 200){
var original_height = img.style.height;
var original_width = img.style.width;
newW = 200;
newH = (original_height/original_width)*newW;
img.style.width = newW;
img.style.height = newH;
}
}
}
</script>
i test it ... it works fine
it might slow down the load a little bit but i am not sure if there is any alternate that will be great and remember here i'm talking about images on other servers so php wont do me any good here i guess
thanks for ur replies guys
i tested it before on FF and it worked fine but it's not working on IE i'm not sure why :)
i tested it on IE6 and IE8 and it's not working with both of them
any suggestions?
Throw some alerts in there to make sure IE is getting the values correctly, like
var img = imgs[i];
alert(' here comes image ' + imgs[i] + ' height ' + img.style.height);
Should give you something like "here comes image image object height 200"
Added rocknbil beat me to it. ;)
and it is working fine now here is the example i made in case someone stumbled upon this page from google or something : )
<html>
<head>
<script language="javascript" type="text/javascript">
window.onload= function resize(){
var imgs = document.getElementsByTagName("IMG");
for (var i=0; i<imgs.length; i++){
var img = imgs[i];
if(img.width > 200){
var original_height = img.height;
var original_width = img.width;
newW = 200;
newH = (original_height/original_width)*newW;
img.width = newW;
img.height = newH;
}
}
}
</script>
</head>
<body>
<img src="../hoteditor/clock.gif" width = "400" height = "400" />
<img src="../hoteditor/clock.gif" width = "200" height = "200" />
<img src="../hoteditor/clock.gif"/>
<img src="resized.jpg"/>
</body>
</html>
with some styling to it like this image is resized click here to see see full version it will do the work :)
thanks again for ur help
