[thelist] JS: Resizing an image? [Solved] + tip

[Sheriff]

This tip is a modified version to what Frank has resolved! Frank has
used IMGElement.height, rather than using IMGElement.style.height which
will override other height specs even from a CSS declaration.

So please change appropriately to the following tip

<tip type="tip/xml-text" namespace="resizing an image with javascript"
mod="style" author="Sheriff">

 <content id="original" line="11">
  myImageID.height =100;
 </content>
 <content id="modified">
  myImageID.style.height="100";
 </content>

 <content id="original" line="33">
     i.height = h;
 </content>
 <content id="modified">
     i.style.height = h;
 </content>

</tip>

HTH
Sheriff

-----Original Message-----
From: thelist-bounces at lists.evolt.org
[mailto:thelist-bounces at lists.evolt.org] On Behalf Of Frank
Sent: Friday, August 26, 2005 9:04 PM
To: thelist at lists.evolt.org
Subject: Re: [thelist] JS: Resizing an image? [Solved] + tip


Solved. The reason my image wasn't resizing was because I still had it's

size declared in an external css file. As soon as I removed the 
declaration, the script functioned as it should.

<tip type="resizing an image with javascript" author="Frank Marion">

You may want to resize an image via javascript for any number of 
reasons.  Here are the basics:

In the later browsers, an image can be resized by simply assigning it a
new 
height or width via either a) the attributes (<img src="" height="100">)
or 
via a css declaration (height:100px;) or both.

You can then use js to alter these paramaters directly:

myImageID.height =100;

Now you may want to make the size of the image in relation to it's
parent 
container for any reason. You need to

1) Specify which container
2) Specify which image
3) Get the size of the container
4) Set size of the image to the size of the container.

The following is the simplest of scripts to set the height of the image
to 
that of the parent container.

   <script type="text/javascript">

     // Define which image to resize
     i = document.getElementById('artist_portrait')  // your image id

     // Get the height of the parent container
     h = document.getElementById('container').offsetHeight;  // your div
id

     //  Set the image high tothat of the container height
     i.height = h;

   </script>

NOTE: Make sure that you don't have a css declaration somewhere else
that 
may override this script.

</tip>



Frank Marion     lists at frankmarion.com      Keep the signal high.



-- 

* * Please support the community that supports you.  * *
http://evolt.org/help_support_evolt/

For unsubscribe and other options, including the Tip Harvester 
and archives of thelist go to: http://lists.evolt.org 
Workers of the Web, evolt !