Solved

Problem in Script which can resize the picture at load time

Posted on 2006-07-02
3
177 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 500 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

734 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