Forum graficzne Burning-Brushes.pl

Skalowanie obrazków przydaje się gdy ktoś da za duże zdjęcie i strona się rozciąga.

W tym tutorialu opiszę jak zeskalować obrazek używając Javascript. Na wstępie zaznaczę, że podobne rozwiązanie jest użyte w moim skrypcie [url=http://rafal-brzezinski.pl/portfolio/webmastering/forum/]Fafu Board[/url].

To do dzieła!
Aby zeskalować obrazek potrzebujemy pobrać jego wysokość oraz szerokość. Niestety aby to zrobić obrazek musi być do końca załadowany dlatego użyjemy zdarzenia onload w tagu html . Wstawimy tam funkcję [b]resize_image()[/b] z odwołaniem do tego obrazka (this).
[code]<img src="obraz.jpg" onload="resize_image(this);">[/code]

Dobra, kod html już mamy czas na JS

[code]
var max_width = 300; // definiujemy maksymalną szerokość obrazka

// tworzymy nową funkcje
function resize_image(img) {

    // jeśli szerokość obrazka jest większa niż dopuszczalna maksymalna szerokość
    if(img.width > max_width) {

      // obliczamy proporcje szerokość do wysokość
      factor = img.width / img.height;

      // obliczamy proporcjonalną wysokość, zaokrąglamy ją używając Math.floor();
      height = Math.floor(max_width / factor);

      // nadajemy obrazkowi nowe wymiary
      img.width = max_width;
      img.height = height;
      }

}
[/code]

Jak widać na [url=http://rafal-brzezinski.pl/examples/skalowanie1.html]przykładzie[/url] wszystko działa jak należy

Jednak niektórym to nie wystarcza, chcieliby dodać jakieś efekty wyglądu zeskalowanego zdjęcia oraz stosowny komunikat. Użyjemy do tego funkcji [b]createElement[/b] czyli jak sama nazwa wskazuje stworzymy nowy element html.

[code]
var max_width = 300; // definiujemy maksymalną szerokość obrazka

// definujemy nową funkcje
function resize_image(img) {

// jeśli szerokość obrazka jest większa niż dopuszczalna maksymalna szerokość
if(img.width > max_width) {
      // obliczamy proporcje szerokość do wysokość
      factor = img.width / img.height;

      // obliczamy proporcjonalną wysokość, zaokrąglamy ją używając Math.floor();
      height = Math.floor(max_width / factor);
     
      // i tutaj zaczyna się zabawa tworzymy element div
      var newdiv = document.createElement('div');

      // nadajemy mu klasę css .resize_image
      newdiv.className = 'resize_image';

      // za pomocą metody innerHTML zmieniamy zawartość diva: link do powiększonego obrazka, oraz komunikat "Kliknij na obrazek aby go powiększyć"
      newdiv.innerHTML = '<a href="' + img.src +'" onclick="this.target=\'_blank\'"><img src="'
+ img.src +'" height="' + height +'" width="' + max_width +'" alt="" title="Kliknij aby
powiększyć."></a><br /><p style="width:' + max_width +';">Kliknij na obrazek aby go
powiększyć.</p>';

      // wstawiamy diva przed ten duży obrazek
      img.parentNode.insertBefore(newdiv, img);

      // i usuwamy go (obrazek)
      img.parentNode.removeChild(img);
      }

}
[/code]

Jeszcze dam wam styl css:

[code]
.resize_image {
display: inline;
}

.resize_image img {
border: 1px solid #9aa4b1;
padding: 5px;
display: inline;
margin: 0;
}

     
.resize_image p {
border: 1px solid #9aa4b1;
border-top: none;
padding: 5px;
color: #464c55;
margin: 0;
font-size: 14px;
padding: 5px;
height: 17px;
text-align: center;
}
[/code]

Jak widać [url=http://rafal-brzezinski.pl/examples/skalowanie2.html]działa.[/url]
To by było na tyle

_____________________________________

Autor poradnika: [b]Fafu[/b] http://rafal-brzezinski.pl/