Resizing an image with Javascript

**undone** · 11-08-2009, 12:19 AM

I would like to resize an image that my web page produces from a javascript link to a donation site. The actual image size that shows up on my website is 297px × 131px. I'd like to make the image 190px wide x relative px height.

You can see the script at my website: http://www.starfishmn.org The script produces the "Donate Now" button at lower right.

The script was provided by the donation site in order to link to the proper donation page and doesn't contain the size of the image. Can I add something to the script in order to resize the image?

Thank you for your help.

**vwphillips** · 11-08-2009, 09:46 AM

Code:

<!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 ReSize(id,w){
 var img=document.getElementById(id);
 var r=w/img.width;
 img.width=img.width;
 img.height=img.height;
 img.width=img.width*r;
 img.height=img.height*r;
}
/*]]>*/
</script></head>

<body>
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="297" height="191" />
<input type="button" name="" value="ReSize" onclick="ReSize('tst',190);"/>

297px × 131px. I'd like to make the image 190px
</body>

</html>

**vwphillips** · 11-08-2009, 12:38 PM

Took a closer look at your page

Code:

<!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 ReSize(w){
 var imgs=document.body.getElementsByTagName('IMG');
 var img=imgs[imgs.length-1];
 if (img.width>50){
  var r=w/img.width;
  img.width=img.width;
  img.height=img.height;
  img.width=img.width*r;
  img.height=img.height*r;
 }
 else {
  setTimeout(function(){ ReSize(190); },500);
 }
}
/*]]>*/
</script>
</head>

<body onload="ReSize(190);">
<script language="JavaScript" src="http://givemn.razoo.com/story/Starfish-Ministries-2/promotebox.js?code=donatebubble"></script><br />

</body>

</html>

**undone** · 11-09-2009, 02:29 PM

Thanks, Vic. I used your code, but it doesn't appear to be working. With the addition of your code, I now have two text/javascipt entries in my head section - one for google analytics and one for the resize of the donation button. Do I need to rename one so that both have unique names?

Many thanks!

**vwphillips** · 11-09-2009, 03:12 PM

It is not working because the script has not been called

put this immediatly befor the </BODY> tag

Code:

<script  type="text/javascript">
/*<![CDATA[*/
ReSize(190);
/*]]>*/
</script>

and change

setTimeout(function(){ ReSize(190); },500);

to

setTimeout(function(){ ReSize(w); },500);

**vwphillips** · 11-09-2009, 03:14 PM

Code:

<!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"><head>
<meta name="verify-v1" content="R0lFdoc5YCszGSqxDNbVmQyAl/Ru8V3gnpaxupOO1KI=" />
<meta name="msvalidate.01" content="B81573CF01332DB92C3F8ABF2DF5BC48" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="http://www.starfishmn.org/style.css" type="text/css" /><title>Home | Starfish Ministries</title>

<meta name="keywords" content="starfish ministries, adopt a family, circles of support, relationship, volunteer, coach, budgeting, employment, housing, education, parenting, spirituality, Inver Grove Heights, Minnesota, Grace Christian Reformed Church" />
<meta name="description" content="Starfish Ministries facilitates programs to help and equip churches and their volunteers coach struggling families in the areas of budgeting, employment, housing, education, parenting, spirituality or any other area of life where families desire help." />
<meta name="author" content="Favilla Designs - http://www.favilla-designs.com" />
<meta name="generator" content="Favilla Designs - http://www.favilla-designs.com" />
<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9433142-1");
pageTracker._trackPageview();
} catch(err) {}</script>

<script type="text/javascript">
/*<![CDATA[*/
function ReSize(w){
var imgs=document.body.getElementsByTagName('IMG');
var img=imgs[imgs.length-1];
if (img.width>50){
var r=w/img.width;
img.width=img.width;
img.height=img.height;
img.width=img.width*r;
img.height=img.height*r;
}
else {
setTimeout(function(){ ReSize(w); },500);
}
}
/*]]>*/
</script>
</head>
<body>
<div id="top" class="smallgraytext" align="right">
<div style="text-align: right;"><a href="#">&nbsp;</a>
<a href="index.html">Home</a> | <a href="contact.html">Contact</a>
|&nbsp;<a href="sitemap.xml">Sitemap</a></div>
</div>
<div id="logo">
<div style="margin-top: 154px; height: 19px;" align="center"><span style="font-style: italic; font-weight: bold;" class="smallwhitetext">Making a difference one family at a
time!</span><br />

</div>
</div>
<div id="banner">
<div id="menu" align="center"> <a href="index.html" id="on">Home</a> <a href="about.html">About</a>
<a href="resources.html">Resources</a> <a href="refugees.html">KaRen Refugees</a>
<a href="contact.html">Contact</a>
<a href="faq.html">FAQ</a> </div>

</div>
<div id="main">
<div id="left">
<div id="leftpanel">
<div id="leftpanel_top"><img src="http://www.starfishmn.org/images/leftpanel_top.gif" alt="" height="17" width="193" /></div>
<div id="leftpanel_middle">
<div style="padding-left: 10px; padding-right: 30px;" align="justify">
<div style="text-align: center;"> <span class="smalltitle">Testimonials</span><br />
</div>
<br />
<div style="text-align: center; width: 163px;"><span class="bodytext" style="font-weight: normal; font-style: italic;">
"The most significant learning I gained [through Starfish Ministries]
was
through my financial coach. We met at my house once a week for the next
several months. I learned a lot about budgeting and credit. But more
importantly, I learned about money the way God sees it."</span><br class="bodytext" style="font-weight: bold;" />
</div>
<div style="text-align: center; font-weight: bold;"><span class="bodytext" style="font-weight: normal;"><br />

</span>
<div class="bodytext" style="text-align: right;"><span style="font-weight: normal;">-Stacy Golden</span></div>
</div>
<br style="font-weight: bold;" />
<span class="smallgreentext"></span></div>
</div>
<div id="leftpanel_bottom"><img src="http://www.starfishmn.org/images/leftpanel_bottom.gif" alt="" height="17" width="193" /><br />
<div style="text-align: center;"><span class="smalltitle"><span class="medgraytext"><br />
</span></span></div>
</div>
</div>
</div>
<div id="content">
<table style="width: 100%;" class="bodytext" border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>

<td colspan="1" rowspan="3" style="vertical-align: top; background-image: url(images/bg_content.jpg); background-repeat: repeat-x;"><span class="titletext">Welcome
to Starfish Ministries</span><span class="medgraytext"><strong><br />
&nbsp;<br />
</strong></span><span class="bodytext" style="font-weight: bold;"></span><span class="medgraytext"></span>
<p><span class="medgraytext"><strong>Do
you want to
help
families who are caught in the current economic crisis but you're not
sure how? </strong></span></p>
<p><span class="medgraytext"><strong>We
might have the answer for you!</strong></span></p>
<span class="medgraytext"><strong></strong></span>In
the
current economic
environment, many families in your community are struggling to get
by.&nbsp; I'm sure you hear of needs but are not always confident
how best to help nor do you have resources to help everyone. <br />
<br />
But, there are probably two or three members of your church who
would&nbsp;give some of their time to help families who
are&nbsp;demonstrating a desire to make positive
changes.&nbsp; That's what
Starfish Ministries is all about.&nbsp;<span style="font-weight: bold;" class="bodytext"><br />

</span><br />
<p><span class="medgraytext">Make a difference
to those in poverty!</span></p>
Starfish Ministries has&nbsp;designed&nbsp;approaches to help
you and your church get involved in the lives
of those in your community who are struggling. We come alongside y<span class="bodytext">ou
to
provide training and oversight as members of your congregation provide
encouragement to a
struggling family. &nbsp;The families has worked with Starfish
Ministries staff to identify the areas of their lives they want to
change such as finances, employment, housing,
education, parenting, and spirituality. </span><span style="font-family: times new roman;"></span><br />
&nbsp;<br />
<br />
<span class="medgraytext">Why does Starfish
Ministries do this? </span><br />
<br />
<span class="bodytext">Christ
calls us, His followers, to help the "poor" in our midst.&nbsp;
Most
churches and church members want to help but lack understanding,
confidence and a working structure.&nbsp; Generally, there are
adequate
financial and material resources in our communities to meet those
needs. What
many in poverty lack are relationships with healthy, caring and
committed people. We&nbsp;connect caring churches with families
within a structures that work. </span><br />

</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 170px; height: 225px;" alt="" src="http://www.starfishmn.org/images/family5.jpg" /></td>
</tr>
<tr>
<td style="text-align: center;"></td>
</tr>
<tr>
<td style="text-align: center;">
<script language="JavaScript" src="http://givemn.razoo.com/story/Starfish-Ministries-2/promotebox.js?code=donatebubble"></script><br />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="footer" class="smallwhitetext" align="center">

<a href="index.html">Home</a> | <a href="about.html">About</a>
| <a href="resources.html">Resources</a> | <a href="refugees.html">KaRen Refugees</a>
| <a href="contact.html">Contact</a>
| <a href="faq.html">FAQ</a>

| Starfish Ministries
Minnesota © 2009. Web design by <a href="http://www.favilla-designs.com" target="_blank">Favilla
Designs</a> </div>
<!--Numbers 6:24-26 "The LORD bless you and keep you; the LORD make his face shine upon you and be gracious to you; the LORD turn his face toward you and give you peace."-->
<script  type="text/javascript">
/*<![CDATA[*/
ReSize(190);
/*]]>*/
</script>

</body></html>

**undone** · 11-09-2009, 10:56 PM

The last code resized the image to 190px wide, however, the height was only 16px! Would it be safer to also specify the height?

I am very grateful to you, Vic.

**undone** · 11-12-2009, 01:27 PM

I should rephraze my question: how do I modify the code in order to make the image 190x84px? Many thanks!

**vwphillips** · 11-12-2009, 02:09 PM

Code:

<script  type="text/javascript">
/*<![CDATA[*/
var imgs=document.body.getElementsByTagName('IMG');
var img=imgs[imgs.length-1]
img.style.width='190px'
img.style.height='84px'

/*]]>*/
</script>

</body></html>

is easiest but I do not understand

the height was only 16px!

**undone** · 11-12-2009, 03:59 PM

Yes, I know. It was wierd to see this long, flat image! I copied/pasted the coding exactly as you had it, too. I'll try specifying the height and see what that does. Again, I am very grateful to you.

UPDATE: The coding worked and the image is the exact size I need. Yay!

Thread: Resizing an image with Javascript

Thread Tools

Search Thread

Resizing an image with Javascript

Bookmarks

Bookmarks

Posting Permissions