Witam
Jak zrobić bajer przypominający podobny opis:
1 szerokość wyświetlanego zdjęcia jest pomniejszane do podanego (wysokość automatycznie sie zmienia/wylicza)
2 po kliknięciu na nie powiększa sie do oryginalnych rozmiarów
dzięki za wszelaką pomoc
pozdrawiam
Chmura
[js] pomnijeszanie/powiększanie zdjęcia
Re: [js] pomnijeszanie/powiększanie zdjęcia
Od wyświetlania zdjęcia w dowolnych rozmiarach to odpowiedzialny jest sam HTML/CSS. Wysokość zdjęcia zawsze się dopasowuje do szerokości o ile nie podałeś jej na sztywno. A całość funcjonalności może wyglądać następująco:
Kod: Zaznacz cały
<img src="cos.jpg" alt=".." style="width: 120px;" onclick="this.style.width = 300px">
Re: [js] pomnijeszanie/powiększanie zdjęcia
To możesz właśnie js'em odwołać się do parametrów HTML danego elementu - i.e. img. Również możesz obrobić style i wyjdzie na to samo.
Re: [js] pomnijeszanie/powiększanie zdjęcia
trochę nie do końca sie zrozumieliśmy
1 pobierane są rozmiary zdjęcia, jeśli wielkość przekracza podaną zostaje pomniejszana do rozmiarów rozdzielczości ekranu (no może trochę mniejsze jak rozdzielczość"
2 po kliknięciu powiększa sie do oryginalnych rozmiarów
3 po kolejnym kliknięciu powraca do stanu pierwotnego
w szczególności interesuje mnie punkt pierwszy
pozdrawiam
1 pobierane są rozmiary zdjęcia, jeśli wielkość przekracza podaną zostaje pomniejszana do rozmiarów rozdzielczości ekranu (no może trochę mniejsze jak rozdzielczość"
2 po kliknięciu powiększa sie do oryginalnych rozmiarów
3 po kolejnym kliknięciu powraca do stanu pierwotnego
w szczególności interesuje mnie punkt pierwszy
pozdrawiam
Re: [js] pomnijeszanie/powiększanie zdjęcia
Skrypt:
Skrypt umieszczasz w head lub w dołączanym pliku. Funkcje loading wywołujesz poprzez zdarzenie onload dla body a change_size w zdarzeniu onclick obrazka. Pisane z głowy więc coś może nie działać. Być może niektóre przeglądarki nie obsługują body.offsetWidth - wtedy musisz znaleźć inny sposób na zczytanie wymiarów ekranu, a style.width nie wiem czy działa jak nie zadeklarujesz sam szerokości w stylu. jeśli nie działą zastąp style.width na offsetWidth.
Kod: Zaznacz cały
var status = 0;
function loading(id_obrazka)
{
org_width = document.getElementById(id_obrazka).style.width;
working_area = document.body.offsetWidth;
document.getElementById(id_obrazka).style.width = working_area;
}
function change_size(id_obrazka)
{
if(status)
document.getElementById(id_obrazka).style.width = working_area;
else
document.getElementById(id_obrazka).style.width = org_width;
status=(status==0) ? 1 : 0;
}

