Solved

Problem in Script which can resize the picture at load time

Posted on 2006-07-02
3
179 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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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:
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

623 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