PDA

View Full Version : Resize Image



suryadee
06-19-2012, 12:09 PM
Hi Guys

Just wondering if anyone can help me with my problem.

I want my image to resize, whether the window was dragged vertically or horizontally.

more clearer example: http://www.mickkmg.com

the image on the centre, when you pull your window in from the bottom or side, it will resize.

how would i apply this to any images?

many thanks

SD

vwphillips
06-19-2012, 01:39 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function ResizeImage(id,r){
var ww=window.innerHeight?window.innerWidth*window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientWidth*document.documentElement.c lientHeight:document.body.clientWidth*document.body.clientHeight;
document.getElementById(id).style.width=Math.max(ww/r,50)+'px';
}


window.onresize=function(){
ResizeImage('tst',2000);
}

/*]]>*/
</script>

</head>

<body>
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />

<script type="text/javascript">
/*<![CDATA[*/
ResizeImage('tst',2000);
/*]]>*/
</script>
</body>

</html>

suryadee
06-20-2012, 04:20 AM
thanks Vic

would it be possible to run the same script but with image class rather than ID?

Also i need to embed this in a php file, which has image classes rather than ID.

many thanks for your help!

cheers

bernie1227
06-20-2012, 05:49 AM
thanks Vic

would it be possible to run the same script but with image class rather than ID?

Also i need to embed this in a php file, which has image classes rather than ID.

many thanks for your help!

cheers

In answer, getElementByClassName is supported by most recent major browsers.
Bernie

suryadee
06-20-2012, 06:38 AM
In answer, getElementByClassName is supported by most recent major browsers.
Bernie

Thanks Bernie, would it be right to line the code like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function ResizeImage(className,r){
var ww=window.innerHeight?window.innerWidth*window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientWidth*document.documentElement.c lientHeight:document.body.clientWidth*document.body.clientHeight;
document.getElementByClassName(className).style.width=Math.max(ww/r,50)+'px';
}



window.onresize=function(){
ResizeImage('tst',2000);
}

/*]]>*/
</script>

</head>

<body>
<img class="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />

<script type="text/javascript">
/*<![CDATA[*/
ResizeImage('tst',2000);
/*]]>*/
</script>
</body>

</html>

cheers

bernie1227
06-20-2012, 08:05 AM
Thanks Bernie, would it be right to line the code like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function ResizeImage(className,r){
var ww=window.innerHeight?window.innerWidth*window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientWidth*document.documentElement.c lientHeight:document.body.clientWidth*document.body.clientHeight;
document.getElementByClassName(className).style.width=Math.max(ww/r,50)+'px';
}



window.onresize=function(){
ResizeImage('tst',2000);
}

/*]]>*/
</script>

</head>

<body>
<img class="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />

<script type="text/javascript">
/*<![CDATA[*/
ResizeImage('tst',2000);
/*]]>*/
</script>
</body>

</html>

cheers

Looks alright to me, I'll check it again later, but just for future reference, please contain your code in [CODE] tags.

vwphillips
06-20-2012, 08:25 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function ScaleImages(){
var objs=document.getElementsByTagName('IMAGE'),cls,i,o,img,z0=0,z0a;
ScaleImages.ary=[];
for (;z0<objs.length;z0++){
cls=objs[z0].className;
if (cls&&cls.indexOf('scale:')>-1){
cls=cls.split(';');
o={obj:objs[z0]};
for (z0a=0;z0a<cls.length;z0a++){
i=cls[z0a].indexOf(':');
if (i>2){
o[cls[z0a].substring(0,i).toLowerCase()]=cls[z0a].substring(i+1);
}
}
if (isFinite(o.scale)){
ScaleImages.ary.push([o.obj,o.scale]);
}
}
}
ResizeImage();
}

function ResizeImage(id,r){
var ary=ScaleImages.ary,ww=window.innerHeight?window.innerWidth*window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientWidth*docume nt.documentElement.clientHeight:document.body.clientWidth*document.body.clientHeight,z0=0;
for (;z0<ary.length;z0++){
ary[z0][0].style.width=Math.max(ww/ary[z0][1],50)+'px';
}
}


window.onresize=function(){
ResizeImage();
}

/*]]>*/
</script>

</head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" class="scale:2000;" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" class="scale:3000;" />

<script type="text/javascript">
/*<![CDATA[*/

ScaleImages();

/*]]>*/
</script>
</body>

</html>