ændre input-felt i forhold til andet input-felt

Det omvendte skal i sagens natur også gælde... altså hvis man ændrer højden, så ændres bredden automatisk :-)

Det kan man 'sagtens', for lige at sikre at det er de oprindelige proportioner, skal vi lige en omvej:

<script type="text/javascript">
var h,w;
window.onload = function(){
  h = document.MyForm.Height.value;
  w = document.MyForm.Width.value;
}
function adjustPic(elm){
  var f = elm.form;
  if(f.Maintain.checked){
    switch(elm.name){
      case "Height":
        f.Width.value = Math.round(+elm.value * w / h);
        break;
      case "Width":
        f.Height.value = Math.round(+elm.value * h / w);
    }
  }
  var st = document.getElementById('showPic').style;
  st.width = f.Width.value + 'px';
  st.height = f.Height.value + 'px';
}
</script>

<form name="MyForm">
Bredde: <input type="text" name="Width" value="100" onchange="adjustPic(this);">
Højde: <input type="text" name="Height" value="200" onchange="adjustPic(this);">
<input type="checkbox" name="Maintain" checked> Bevar proportioner
</form>

<img src="../billede.jpg" style="width:100px;height=200px;" id="showPic">

fantastisk, har du virkelig lavet det på et kvarter? Jeg tester lige!

roenving >> tester du sådanne scripts, når du skriver dem? Sådan bare af nysgerrighed? Jeg har en tendens til bare at skrive dem derudaf i hvert fald :)

Jeg skriver dem også bare derudaf, men den type scripts som ovenstående skriver jeg direkte i min html-editor, så jeg ved et tryk på en tast eller et ikon kan teste !-)

Det fungerer jo perfekt! Svar endelig....

Men jeg har et problem, som jeg ikke lige kan løse: Funktionen skal gerne kigge på de aktuelle højde- og breddeværdier.

I visse tilfælde indeholder formen ingen værdier ved onload. Så vælger man et billede, og formen udfyldes med bredde- og højdeværdier. Hvis man så ændrer fx højden, så står der "NaN" i bredde-feltet.

I andre tilfælde indeholder formen ganske rigtigt værdier som i dit eksempel, men så vælger man et ANDET billede, og form-værdierne ændres... Og så fungerer adjustPic fint, men regner med værdierne fra det oprindelige billede :-)

Jeg har prøvet at ændre
---------------
var h,w;
window.onload = function(){
  h = document.MyForm.Height.value;
  w = document.MyForm.Width.value;
}
--------

til blot
---------
var h,w;
h = document.MyForm.Height.value;
w = document.MyForm.Width.value;
--------

- men det er ikke nok... ???

Så skal det udvides til også at ændre værdier, når du vælger et andet (som så også skal registreres som det aktive !-)

-- sekund ...

Fatter ikke en meter, for følgende virker perfekt i min Mzilla, men IE vil ikke være med på den funktion, som kaldes fra onclick på billederne ?-)

<html>
<head>
<title>Bevar proportioner</title>
<script type="text/javascript">
var h,w,actPic;
window.onload = function(){
  actPic = document.getElementById('showPic0');
  if(document.MyForm.Height.value.match(/\d/))
    h = document.MyForm.Height.value;
  else{
    h = actPic.offsetHeight;
    document.MyForm.Height.value = h;
  }
  if(document.MyForm.Width.value.match(/\d/))
    w = document.MyForm.Width.value;
  else{
    w = actPic.offsetWidth;
    document.MyForm.Width.value = w;
  }
  actPic.title = "Dette billede er aktivt";
}
function adjustPic(elm){
  var f = elm.form;
  if(f.Maintain.checked){
    switch(elm.name){
      case "Height":
        f.Width.value = Math.round(+elm.value * w / h);
        break;
      case "Width":
        f.Height.value = Math.round(+elm.value * h / w);
    }
  }
  var st = actPic.style;
  st.width = f.Width.value + 'px';
  st.height = f.Height.value + 'px';
}
function setActive(pic){
  //alert(pic.offsetWidth);
  actPic.title = "Vælg dette billede";
  actPic = pic;
  actPic.title = "Dette billede er aktivt";
  h = pic.offsetHeight;
  document.MyForm.Height.value = h;
  w = pic.offsetWidth;
  document.MyForm.Width.value = w;
}
</script>
</head>
<body>
<form name="MyForm">
Bredde: <input type="text" name="Width" value="" onchange="adjustPic(this);">
Højde: <input type="text" name="Height" value="" onchange="adjustPic(this);">
<input type="checkbox" name="Maintain" checked> Bevar proportioner
</form>

<img src="../billede.jpg" style="width:100px;height=100px;cursor:pointer;" title="Vælg dette billede" id="showPic0" onclick="setActive(this);"><br>
<img src="../billede.jpg" style="width:200px;height=100px;cursor:pointer;" title="Vælg dette billede" id="showPic1" onclick="setActive(this);"><br>
<img src="../billede.jpg" style="width:300px;height=100px;cursor:pointer;" title="Vælg dette billede" id="showPic2" onclick="setActive(this);"><br>
<img src="../billede.jpg" style="width:400px;height=200px;cursor:pointer;" title="Vælg dette billede" id="showPic3" onclick="setActive(this);"><br>
<img src="../billede.jpg" style="width:500px;height=200px;cursor:pointer;" title="Vælg dette billede" id="showPic4" onclick="setActive(this);"><br>
</body>
</html>

samme her...

du skal ikke bruge mere tid på det hvis det driller ... den nuværende løsning kan  bruges i de fleste tilfælde...

du husker at svare! :-)

Jeg håber godt nok, at der kommer en forbi, som kan forklare det, så også min IE kan være med !-)

-- els velbekomme '-)

-- og tak for point ;~}