Get image width

@alxlaDec 18.2006

I think I’m going mad about this :S
I have a image : <img src=”{URL}” border=”0″ /> .
The image is placed in a table or a div.
I want a javascript so if the image is wider than the table the image will be autoresized to 100% of the table widht and then the image will be linked to it’s url. {URL}
I also want to constain the height – width propotions.

to post a comment

JavaScript

12 Comments(s) _↴

@hansschmuckerDec 18.2006 — #That should do it (Aside from the link, I'm too lazy to move nodes around now ? )

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;HelloButton&lt;/title&gt;
 &lt;script&gt;
 function wrapperAddEventListener(obj,type,callback){
 if(obj.addEventListener!=undefined) obj.addEventListener(type,callback,false);
 else if(obj.attachEvent!=undefined) obj.attachEvent("on"+type,callback);
 else alert("Sorry, your browser is not supported");
 }
 
 <i>	</i>function main(){
 <i>	</i>	var resizeMe=function(evt){
 <i>	</i>		if(document.getElementById("foo").clientWidth&lt;document.getElementById("bar").naturalWidth){
 <i>	</i>			var AR=document.getElementById("bar").naturalWidth/document.getElementById("bar").naturalHeight;
 <i>	</i>			document.getElementById("bar").style.width=(document.getElementById("foo").clientWidth-2)+"px";
 <i>	</i>			document.getElementById("bar").style.height=((document.getElementById("foo").clientWidth-2)/AR)+"px";
 <i>	</i>		}else{
 <i>	</i>			document.getElementById("bar").style.width=document.getElementById("bar").naturalWidth+"px";
 <i>	</i>			document.getElementById("bar").style.width=document.getElementById("bar").naturalHeight+"px";
 <i>	</i>		}
 <i>	</i>	}
 <i>	</i>	wrapperAddEventListener(window,"resize",resizeMe);
 <i>	</i>	resizeMe();
 <i>	</i>}
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="main()"&gt;
 
 <i>	</i>		&lt;div style="width:310px; overflow:hidden; padding:0px;" id="foo"&gt;
 <i>	</i>			&lt;img src="rose3.png" style="margin:0px;"  id="bar" /&gt;
 <i>	</i>		&lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@alxlaauthorDec 18.2006 — #That was a bit of code ?

I thought you only needed a couple of lines, i forgot to mension that i want the javascript to break the img line. And i would possibly make the image clickable wathever.

Like in the <img> there is a javascript that says;

<a href="{IMG:URL}"><img src="{IMG:URL} [JAVASCRIPT]"if old_imgwidth>divwidth then resize to new_width=90%*divwidth new_height=(new_width/old_imgwidth) *old_imgheight[/JAVASCRIPT] /></a>

How do i wright that in proper (lol) javascript?

@hansschmuckerDec 18.2006 — #OK, I'm still too lazy to create an actual link, so we're using onclick... no idea what you mean with "break the image line"

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;HelloButton&lt;/title&gt;
 &lt;script&gt;
 function wrapperAddEventListener(obj,type,callback){
 if(obj.addEventListener!=undefined) obj.addEventListener(type,callback,false);
 else if(obj.attachEvent!=undefined) obj.attachEvent("on"+type,callback);
 else alert("Sorry, your browser is not supported");
 }
 
 <i>	</i>function main(){
 <i>	</i>	var resizeMe=function(evt){
 <i>	</i>		if(document.getElementById("foo").clientWidth&lt;document.getElementById("bar").naturalWidth){
 <i>	</i>			var AR=document.getElementById("bar").naturalWidth/document.getElementById("bar").naturalHeight;
 <i>	</i>			document.getElementById("bar").style.width=(document.getElementById("foo").clientWidth-2)+"px";
 <i>	</i>			document.getElementById("bar").style.height=((document.getElementById("foo").clientWidth-2)/AR)+"px";
 <i>	</i>			wrapperAddEventListener(document.getElementById("bar"),"click",(function(){document.location.href=document.getElementById("bar").src;}));
 <i>	</i>		}else{
 <i>	</i>			document.getElementById("bar").style.width=document.getElementById("bar").naturalWidth+"px";
 <i>	</i>			document.getElementById("bar").style.width=document.getElementById("bar").naturalHeight+"px";
 <i>	</i>			wrapperAddEventListener(document.getElementById("bar"),"click",(function(){}));
 <i>	</i>		}
 <i>	</i>	}
 <i>	</i>	wrapperAddEventListener(window,"resize",resizeMe);
 <i>	</i>	resizeMe();
 <i>	</i>}
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="main()"&gt;
 
 <i>	</i>		&lt;div style="width:310px; overflow:hidden; padding:0px;" id="foo"&gt;
 <i>	</i>			&lt;img src="rose3.png" style="margin:0px;"  id="bar" /&gt;
 <i>	</i>		&lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@alxlaauthorDec 18.2006 — #Yes, but it works as a code in a forum so it has to be in the img "line" or wathever.

[code=html]<img src='{URL}' border='0' onload="javascript:if(this.width > screen.width-300){ this.height = Math.round(((screen.width-300)/this.width)*this.height); this.width = (screen.width-300); }" onclick="javascript:window.open('{URL}','','scrollbars=1,toolbar=0,resizable=1,menubar=0,directories=0,status =0')" alt="The img might be resized, klick to wiev fullscreen." title="The img might be resized, klick to wiev fullscreen." />[/code]

It's simlar to my problem but i want the screen.width-300 to be replaced by the width of the sorrunding div or table, i don't know if the code above works, but it should

@hansschmuckerDec 18.2006 — #The difference is mainly that it doesn't handle resize, but aside from that, it's pretty much the same. Do you want it adopted to the size of one certain div, or the next parent div?

@alxlaauthorDec 18.2006 — #I think it's the parent div, the one that contains the image?

I tested it on my site and it worked fine (to resize from screen.width) a while but suddenly stopped working, prob. me messing with the code ?

@hansschmuckerDec 18.2006 — #this is as short as I'm willing to make it (otherwise it becomes too "hackish"):

<i>
 </i>			&lt;div style="width:310px; overflow:hidden; padding:0px;"&gt;
 &lt;img src="rose3.png" style="margin:0px;" onload='var bar=this; for(var foo=bar;foo.tagName!="DIV";foo=foo.parentNode){}  var barw=bar.width; var barh=bar.height; var foocw=foo.clientWidth; var AR=barw/barh;if(foocw&lt;barw){bar.style.width=(foocw-2)+"px";bar.style.height=((foocw-2)/AR)+"px";bar.onclick=(function(){window.open(this.src,"","scrollbars=1,toolbar=0,resizable=1,menubar=0,directories=0,status=0");});}else{bar.style.width=barw+"px";bar.style.width=barh+"px";}' /&gt;
 &lt;/div&gt;

@alxlaauthorDec 19.2006 — #It seems to work, thx man! ?

1. But so the visitors know that they can open it in a new window, can i get the mouse, if the image is resized, to the hand icon, and the alt text to: "klick to view full"?

2. EDIT: Tested it a bit more now, and you are not able to set the div's width to ex: 75%, but i think i'll have to live with that.

3. I don't know but this ain't working wery well:

[code=html]<div style="width:9000px; overflow:hidden; padding:0px; "><img src="http://wwwimages.adobe.com/www.adobe.com/images/icons/ps_splash_beta_labs_150x50.jpg" style="margin:0px;" border="0" onload='var bar=this; for(var foo=bar;foo.tagName!="DIV";foo=foo.parentNode){}  var barw=bar.width; var barh=bar.height; var foocw=foo.clientWidth; var AR=barw/barh;if(foocw<barw){bar.style.width=(foocw-2)+"px";bar.style.height=((foocw-2)/AR)+"px";bar.onclick=(function(){window.open(this.src,"","scrollbars=1,toolbar=0,resizable=1,menubar=0,directories=0,status=0");});}else{bar.style.width=barw+"px";bar.style.width=barh+"px";}' />
 </div>[/code]

Although the image is just 150x50px it gets resized :S

But with other small images it works fine ?

4. If you want to see it it action i have uploaded it on my demosite: [URL=http://www.testzone.se/demo/]http://www.testzone.se/demo/[/URL]

@hansschmuckerDec 19.2006 — #

<i>
 </i>&lt;img src="http://wwwimages.adobe.com/www.adobe.com/images/icons/ps_splash_beta_labs_150x50.jpg" style="margin:0px;" onload='var bar=this; for(var foo=bar;foo.tagName!="DIV";foo=foo.parentNode){} var barw=bar.width; var barh=bar.height; var foocw=foo.clientWidth;var AR=barw/barh;if(foocw&lt;barw){bar.style.width=(foocw-2)+"px";bar.style.height=((foocw-2)/AR)+"px";bar.onclick=(function(){window.open(this.src,"","scrollbars=1,toolbar=0,resizable=1,menubar=0,directories=0,status=0");});}' alt="The img might be resized, klick to wiev fullscreen." title="The img might be resized, klick to wiev fullscreen." /&gt;

1: I've added the alt tag, but it will always be there... if I add it to the javascript that line will definately get too long.

There's little I can do about the hand icon: "hover" only works on links and creating a link dynamically requires a few lines of code.

2. Works for me, but it's definately nothing you should depend on as it will get corrupted every time the user resizes the window.

3. I f*cked up, that's about it. When I compressed the code into a single line I accidently included a line of code that I should have left out. Hard to get an overview when everything is just a single string.

@alxlaauthorDec 19.2006 — #Thank you wery much ?

Now everything works fine ?

@alxlaauthorDec 21.2006 — #But.. I hoped i hadn't had to say it. :/

Someties, i don't know why, the script just crops the image, but when i refresh the page, everything works fine. Do you know why is that?

@hansschmuckerDec 21.2006 — #No idea... there's nothing in it that could really change... maybe somebody else could take a shot at it...

Also in #JavaScript _↴

Basic Javascript Countdown question how to save a file using javascript Positioning the layer (Div tag) - making all browsers compatible

Success!

Help @alxla spread the word by sharing this article on Twitter...

Tweet This

Get image width

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Get image width

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴