?
Solved

Problem in Script which can resize the picture at load time

Posted on 2006-07-02
3
Medium Priority
?
188 Views
Last Modified: 2010-04-06
hello Experts

This is my code

<script language=vbscript>
function ChangeHeight(oh,ow,nh,imgnm)
   nw= (nh*ow)/oh
  alert(nw)
end function
</script>


<td><P align=center><A  href="http://www.artageindia.com/bigpic.asp?id1=36">  <IMG id="img1"
            src="products1_files/BC-011.jpg" border=2 onload="ChangeHeight(this.height,this.width,77,this.id)" > </p></td>
<td><P align=center><A  href="http://www.artageindia.com/bigpic.asp?id1=37">  <IMG id="img2"
            src="products1_files/BC-012.jpg" border=2 onload="ChangeHeight(this.height,this.width,77,this.id)" > </p></td>
<td><P align=center><A  href="http://www.artageindia.com/bigpic.asp?id1=38">  <IMG id="img3"
            src="products1_files/BC-013.jpg" border=2 onload="ChangeHeight(this.height,this.width,77,this.id)" > </p></td>

now i want to change the width and height of the below images (img1,img2,img3) so that all the pictures height remain same and width can be changed accordingly using function. Now using function how to change the size of pictures run time.

thanks

vikas
0
Comment
Question by:vikas_maderna
  • 2
3 Comments
 
LVL 26

Expert Comment

by:DireOrbAnt
ID: 17028815
Some notes first. I would not use vbscript as javascript has a  MUCH better support base.
Also, I used Math.round so you don't get non int width.

Here it is:
------------------------------
<HTML>
<HEAD>
<script language="javascript">
function ChangeHeight(ImgId, nh) {
  var ImgObj = document.getElementById(ImgId);
  ImgObj.width = Math.round((nh*ImgObj.width)/ImgObj.height);
}

function FixImages() {
  ChangeHeight('img1', 77);
  ChangeHeight('img2', 77);
  ChangeHeight('img3', 77);      
}
</script>
</HEAD>
<BODY onload="FixImages()">
<table><tr>
<td><P align=center><A  href="http://www.artageindia.com/bigpic.asp?id1=36">  <IMG id="img1"
            src="products1_files/BC-011.jpg" border=2> </p></td>
<td><P align=center><A  href="http://www.artageindia.com/bigpic.asp?id1=37">  <IMG id="img2"
            src="products1_files/BC-012.jpg" border=2> </p></td>
<td><P align=center><A  href="http://www.artageindia.com/bigpic.asp?id1=38">  <IMG id="img3"
            src="products1_files/BC-013.jpg" border=2> </p></td>
</tr></table>
</BODY>
</HTML>
------------------------------
0
 

Author Comment

by:vikas_maderna
ID: 17028893
hello ,

In this function

function FixImages() {
  ChangeHeight('img1', 77);
  ChangeHeight('img2', 77);
  ChangeHeight('img3', 77);    
}

You have made the img1 and img2, .... name fixed while for me this is variable thing, as it is asp page and pictures are comming from database and i dont know their numbers. Then how can i do this.

thanks

vikas
0
 
LVL 26

Accepted Solution

by:
DireOrbAnt earned 2000 total points
ID: 17031548
How about this:
-------------------------------
<HTML>
<HEAD>
<script language="javascript">
function ChangeHeight(ImgObj, nh) {
  ImgObj.width = Math.round((nh*ImgObj.width)/ImgObj.height);
}

function FixImages() {
  var AllImg = document.getElementsByTagName('IMG');
  for (var i=0; i<AllImg.length; i++) {
        if (AllImg[i].className == 'MyClass') ChangeHeight(AllImg[i], 77);
      }
}
</script>
</HEAD>
<BODY onload="FixImages()">
<table><tr>
<td><P align=center><A  href="http://www.artageindia.com/bigpic.asp?id1=36">  <IMG id="img1" src="products1_files/BC-011.jpg" border=2> </p></td>
<td><P align=center><A  href="http://www.artageindia.com/bigpic.asp?id1=37">  <IMG id="img2" class="MyClass" src="products1_files/BC-012.jpg" border=2> </p></td>
<td><P align=center><A  href="http://www.artageindia.com/bigpic.asp?id1=38">  <IMG id="img3" src="products1_files/BC-013.jpg" border=2> </p></td>
</tr></table>
</BODY>
</HTML>
-------------------------------

Note that I changed both functions and made the second image class be MyClass so it changes that one.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

589 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question