john551 — Thu, 08 Dec 2005 09:47:56 +0000

It will be better you do it on server side using php or whatever scripting language yr application is in.

Patrick A Baer — Thu, 24 Nov 2005 20:49:29 +0000

I found a way, quite easy actually, and wanted to share it with you:

<html><body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" style="margin:0px;" style="background:none;">
<?php
echo <<<EndOfHTML
<a href="$pic" target="new"><img id="pic" src="$pic" onLoad="resize(this);" border="0"></a></body>
&lt;script type="text/javascript"&gt;<!--

PicValid = 0;

function resize(PIC) {

 PicValid = 1;
 tooBig = 0;

 height = PIC.height;
 width = PIC.width;

 if(width > 266) { 
 	width = 266;
	tooBig = 1;
	PIC.width = 266;
 }
 

 parent.document.getElementById(window.name).setAttribute("width",PIC.width);

 if(window.opera) { 
	 parent.document.getElementById(window.name).setAttribute("height",PIC.height);
 } else {
	parent.document.getElementById(window.name).setAttribute("height",PIC.height+3);
 }

 if(linkStr = parent.document.getElementById(window.name).parentNode.getAttribute("href"))	{

	document.getElementsByTagName("a")[0].href = linkStr;

 } else if(tooBig) {

	myDiv = document.createElement("div");
	myDiv.style.position = "absolute";
	myDiv.style.top = PIC.height-16 + "px";
	myDiv.style.left = PIC.width-16 + "px";

	myDivLink = myDiv.appendChild(document.createElement("a"));
	myDivLink.setAttribute("href",PIC.src);
	myDivLink.setAttribute("target","new");

	myDivImage = myDivLink.appendChild(document.createElement("img"));
	myDivImage.setAttribute("border",0);
	myDivImage.setAttribute("src","img/expand.gif");
	
	myDivObj = document.firstChild.childNodes[1].appendChild(myDiv);	

	PIC.parentNode.removeAttribute("href");

 } else {
	PIC.parentNode.removeAttribute("href");
 }
}

function noPic() {
 if(!PicValid) {
 	document.getElementsByTagName("img")[0].src = "#";
	parent.document.getElementById(window.name).setAttribute("height",30);
	parent.document.getElementById(window.name).setAttribute("width",30);
 }
}

window.setTimeout("noPic()",30000);

// -->&lt;/script&gt;
</html>
EndOfHTML;

Renegade — Wed, 23 Nov 2005 07:57:54 +0000

Well, what you could try and do is set a div that is 200px by 200px and set the image as the background, centred.

If the image doesn't show up right, within the boundaries, then, the user will upload another image for his profile?

edpudol — Wed, 23 Nov 2005 05:39:00 +0000

matt_w wrote: Patrick,

The best thing to do is to programmatically resize the image... but if you don't want to do that, you can set the size attribute for the width only. IE and Firefox/Mozilla will adjust the height to maintain the aspect ratio and scale the image to match the specified width. (I haven't tested this in other browsers.) The drawback is that smaller images will be made larger, which can look pretty ugly.

Matt

I agree with matt_w. you can do this an alternative solution, but as he said it will cause the picture look ugly.

matt_w — Tue, 22 Nov 2005 03:16:41 +0000

Patrick,

The best thing to do is to programmatically resize the image... but if you don't want to do that, you can set the size attribute for the width only. IE and Firefox/Mozilla will adjust the height to maintain the aspect ratio and scale the image to match the specified width. (I haven't tested this in other browsers.) The drawback is that smaller images will be made larger, which can look pretty ugly.

Matt