Avatar billede NielsErikP Mester
16. december 2012 - 12:18 Der er 6 kommentarer og
1 løsning

Brug af Resize script...

Hej..

Er rimelig ny til javascript.
Fandt dette script på nettet til at resize billeder med.



<script type="text/javascript">

var resize = function(img, maxh, maxw) {
  var ratio = maxh/maxw;
  if (img.height/img.width > ratio){
      // height is the problem
    if (img.height > maxh){
      img.width = Math.round(img.width*(maxh/img.height));
      img.height = maxh;
    }
  } else {
    // width is the problem
    if (img.width > maxh){
      img.height = Math.round(img.height*(maxw/img.width));
      img.width = maxw;
    }
  }
};

</script>



Har så en div med et img tag, hvor jeg skal have resized billedet ind i..
Men.. men.. da jeg er ny, vides der ikke lige hvordan dette script bruges/kaldes.

Håber i kan hjælpe her.
Avatar billede lclemens Nybegynder
16. december 2012 - 12:26 #1
<img src="x" onload="resize(this,<x bredde>,<x højde>)">
Avatar billede NielsErikP Mester
16. december 2012 - 13:12 #2
Hej..

Nej.. Det funger ikke.



  <img src="mitbillede.jpg" onload"resize(this, 120px, 138px)">



mitbillede.jpg = 928px * 920px og billedet der bliver sat ind er 928px * 920px   istedet for 120px * 138px .
Avatar billede olebole Juniormester
16. december 2012 - 15:10 #3
<ole>

Prøv dette:

<script type="text/javascript">
var resize = function(img, maxh, maxw) {
  var ratio = maxh/maxw;
  if (img.height/img.width > ratio){
      // height is the problem
    if (img.height > maxh){
      img.width = Math.round(img.width*(maxh/img.height));
      img.height = maxh;
    }
  } else {
    // width is the problem
    if (img.width > maxh){
      img.height = Math.round(img.height*(maxw/img.width));
      img.width = maxw;
    }
  }
};
</script>

<img id="foo" src="http://www.eksperten.dk/images/eksperten_logo.gif" alt="">

<p>
    <button onclick="resize(document.getElementById('foo'), 30, 100)">TEST</button>
</p>

/mvh
</bole>
Avatar billede NielsErikP Mester
16. december 2012 - 22:18 #4
Hej..

Tusind tak, ole.. Du er simpelthen genial :-)
Jeg endte op med dette udfra dit eksemple i #3.


<div id="kunster">
  <div id="kunster">
                    <a href="album.php"><img id="show_hide" src="billeder/cd/cd004.jpg" onload="resize(document.getElementById('show_hide'), 120, 138)"></a>
                </div>


Dog undrer det mig at tager jeg egenskaber på cd004.jpg siger den 121px * 120px

Derudover tænker jeg lidt på om sådan et resize script bruger mange resourser... Mener javascript er client side og php server side .
Hvordan mht. til at resize sådannne billeder, hvis klienten ikke have javascript slået til i sin browser. Er der en måde at detekte dette på.? Så man evt. kan forhindre side visning, hvis dette ikke er slået til.

Mange tak for hjælpen, ole.. Mener ikke du er storvildt jæger og samler "Smiler".. Så smider selv lige et svar.
Avatar billede olebole Juniormester
16. december 2012 - 23:29 #5
Det bør ikke virke - og gør det sikkert ikke X-browser - med mindre du explicit skriver HTML5. Der har i mange år (under HTML4.01) hersket forvirring omkring onload på et IMG tag, men det har ikke været en valid attribut før HTML5.

Forvirringen opstår sikkert, fordi et JavaScript Image object har - og altid har haft - en onload event:

var img = new Image();
img.onload = function() {
    alert("Billedets bredde: " + this.width);
};
img.src = "sti/til/pic.png";

- men det er ikke det samme som et IMG HTMLElement, som i udgangspunktet ikke ikke har understøttet onload event'en.

Bruger du en HTML5 compliant DocType, kan du regne med, onload på et IMG tag fungerer i nye browsere - ellers ikke.
Avatar billede NielsErikP Mester
16. december 2012 - 23:46 #6
Hej...

Jamen det gør jeg ikke bruger Html 4.01 strict og det havde jeg tænkt mig at blive ved med en rum tid endnu.

Men hvad er alternativet så..?? Til den onload  img tagget .

Det jeg har er en div til cd billede på 120px * 138px, som skifter mellem front og bagside cover på cd'en, derunder er der en række små thunmps, hvor meningen så er at man skulle kunne trykke på et af dem, som så vises i div'en på 120px  * 138px.. og dette div skifter så automatisk til det næste cd billede i rækken.. Det var lidt om meningen med det, men er der absolut ikke endnu.
Avatar billede NielsErikP Mester
18. december 2012 - 21:06 #7
Hej..

Måske jeg ikke forstår boksen i #5 ...
Men det også fint, lukker selv og tak endnu en gang,Ole.


Skulle der med tiden dukke andre op på tråden med lyst til at svare på spørgsmålet i #6 :
  "hvad er alternativet så..?? Til den onload  på img tagget .
"

Så er jeg modtagelig!!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester