Polskie Forum Użytkowników GIMP-a

Ogólne dyskusje => Języki Internetu => Wątek zaczęty przez: homilian on 11.06.2008, 14:13:18


Tytuł: Rollover - Czyli prosta zmiana obrazu!
Wiadomość wysłana przez: homilian on 11.06.2008, 14:13:18
Rollover
Tutorial

Opracowanie: homilian
Poziom trudności: łatwy

(http://unistyle.ofp.pl/upload/komiks.rar)


Tutorial zrodził się z tego wątku (http://www.gimpuj.info/index.php/topic,17249.new.html), napisany został na życzenie Calii (http://www.gimpuj.info/index.php?action=profile;u=2047).

Tutorial napisany w wersji GIMP 0.1~. W innych wersjach nazwy narzędzi i pojęć mogą się różnić.


[lp] Zaczynamy

[lp] 1. Tworzymy 2 RÓŻNE obrazy, lub pobieramy te 2:
(http://www.gimpuj.info/gallery/6760_07_03_08_12_40_21.png)
(http://www.gimpuj.info/gallery/10140_01_06_08_7_47_54.png)


[lp] 2. Zmieniamy nazwę obrazów odpowiednio na:
 [op] obraz1.png
 [op] obraz1pozmianie.png
 [op] po czym tworzymy folder o nazwie "rollover" i umieszczamy tam oba obrazy

[lp] 3. Otwieramy Notatnik (lub edytor HTML) i wpisujemy doń kod:

Kod:
<html>
<head>
<title>rollover</title>
</head>
<body>
<a href="#" onMouseOver='rollover.src="obraz1pozmianie.png"'
onMouseOut='rollover.src="obraz1.png"'>
<img src="obraz1.png" name="rollover" border="0"></a>
</body>
</html>

[lp] 4. Zapisujemy plik jako: rollover.html
z parametrami:
Typ: Wszystkie pliki
Kodowanie: UTF-8

[lp] 5. Otwieramy plik rollover.html za pomocą przeglądarki i cieszymy się zmieniającym się obrazem (po najechaniu myszą)


[lp] Koniec


Każdy Webmaster wie iż rollovery są bardzo nieprzydatne w opcjach takich jak menu, tam należy zastosować arkusze CSS, tutorial ma jednak pokazać jak zrobić pojedynczy element :). Jeżeli chcesz wykorzystać na stronie więcej niż jeden rollover musisz ponumerować obrazy ponumerować (zamiast jedynki wpisać następną liczbę tu: 2). Należy też ponumerować wartości "rollover" i "rollover.src" na np."rollover2" i "rollover2.src

"Miłego GIMPowania. :)" i tworzenia stron internetowych Pozdrawiam wszystkich Webmasterów którzy uznają iż tut jest nieprzydatny :).

PS. Wpadające w oczy (przyp. Calii) kolory zastosowane specjalnie :)

Tytuł: Odp: Rollover - Czyli prosta zmiana obrazu!
Wiadomość wysłana przez: szujak on 12.06.2008, 19:55:55
Można to zrobić w inny sposób, a mianowicie za pomocą CSS.

Kod:
a {
  display: block;
  width: 200px; //szerokość obrazka
  height: 100px; //wysokość obrazka
  background-image: url('obraz1pozmianie.png');
}

a:hover {
  display: block;
  width: 200px; //szerokość obrazka
  height: 100px; //wysokość obrazka
  background-image: url('obraz1pozmianie1.png');
}

Uważam, że ta metoda jest prostsza i bardziej uniwersalna.

Tytuł: Odp: Rollover - Czyli prosta zmiana obrazu!
Wiadomość wysłana przez: homilian on 12.06.2008, 19:58:14
Cytat: homilian on 11.06.2008, 14:13:18
Każdy Webmaster wie iż rollovery są bardzo nieprzydatne w opcjach takich jak menu, tam należy zastosować arkusze CSS

Co ja tu napisałem? poza tym tut został stworzony z komiksu, co możesz zobaczyć klikając w link na górze tuta :] dało by sie tam CSS zastosować ale było by to nieprzydatne (w takich sytuacjach lepiej użyć rollovera)

Tytuł: Odp: Rollover - Czyli prosta zmiana obrazu!
Wiadomość wysłana przez: asifalittlezonked on 12.06.2008, 21:25:28
O, co ja widzę :) Fajnie, że powstał ten tutorial. Przez przypadek go zauważyłam.
Sorry za wcinkę, już uciekam ;)

Tytuł: Odp: Rollover - Czyli prosta zmiana obrazu!
Wiadomość wysłana przez: Ravicious on 16.06.2008, 17:50:04
Myślałem, że to już dawno wyszło z mody i jest przestarzałe. Teraz czas na CSS, nie ma po co dodatkowo kombinować...

Tytuł: Odp: Rollover - Czyli prosta zmiana obrazu!
Wiadomość wysłana przez: ozziuss on 16.06.2008, 21:21:29
najlepiej to rollover robić tak:
- przycisk przed i po najechaniu na jednym obrazku (tzn jeden pod drugim)
- ustawić normalnie background dla <a /> czy innego elementu
- dla hovera jest ten sam obrazek tyle że przesunięty o odpowiednią ilość jednostek (background-position: http://www.kurshtml.boo.pl/css/pozycja,tlo.html)
dzięki temu niewelujemy efekt opóźnionego wczytywania się obrazka który ma się pojawić po nakierowaniu myszą.
mam nadzieję że wszyscy wiedzą o co biega ;)

Tytuł: Odp: Rollover - Czyli prosta zmiana obrazu!
Wiadomość wysłana przez: Ravicious on 02.06.2009, 13:01:49
Wiem, że temat jest stary, ale dodam coś jeszcze od siebie.

Niech Was czart broni przed używaniem rollovera - to jest po prostu przestarzała metoda na podmianę obrazka.

Podczas odpowiadania na problem z odsyłaczem (http://www.gimpuj.info/index.php/topic,29218.0.html), przypomniał mi się ten temat i odpowiedź Szujaka. Jego sposób jest o wiele lepszy od tego przedstawionego w temacie, ale nie jest do końca dobry.

Dlaczego? Jeśli najedzie się na obrazek, to dopiero wtedy zacznie wczytywać się ten, który jest zdefiniowany w a:hover. Nie chcemy tego, prawda?

Dlatego lepiej zastosować inny sposób. Po prostu umieszczamy dwa obrazki w jednym pliku PNG (najlepiej, żeby obrazek miał stałą szerokość, tzn. mieściły się tam oba obrazki). Wtedy kod CSS wygląda nieco inaczej:

Kod:
a {
	display:block;
	width:100px; // szerokość obrazka
	height:38px; // wysokość obrazka
	background: url(/images/obrazek.png) no-repeat 0 0;
	text-indent:-30000px; // wyrzucenie anachora w kosmos
	overflow:hidden; // gdyby coś miało 'wystawać', to nie pokazuj
}

a:hover {
	background:url(/images/obrazek.png) no-repeat 0 -38px;
}

Magiczną liczbą jest tutaj liczba 38 - oznacza ona wysokość, w której w pliku obrazek.png kończy się jeden obrazek, a zaczyna drugi. Należy tę liczbę 38 wraz z 100 podmienić na określone wartości dla naszego obrazka.

Efekt możecie sprawdzić w stopce (http://pokapulpit.heroku.com/) (logo Blipa) - przy wczytywaniu strony wczytywany jest jeden obrazek, co jest bardziej użyteczne i zaoszczędza czas - wystarczy jedno żądanie do serwera, a nie dwa.

Tadam! ;-)

Tytuł: Odp: Rollover - Czyli prosta zmiana obrazu!
Wiadomość wysłana przez: muka[SpC] on 09.07.2009, 15:54:58
Cytat: homilian on 11.06.2008, 14:13:18
[op] po czym tworzymy folder o nazwie "rollover" i umieszczamy tam oba obrazy

Poprawny kod to:

Kod:
<html>
<head>
<title>rollover</title>
</head>
<body>
<a href="#" onMouseOver='rollover.src="rollover/obraz1pozmianie.png"'
onMouseOut='rollover.src="rollover/obraz1.png"'>
<img src="rollover/obraz1.png" name="rollover" border="0"></a>
</body>
</html>

nie było dostępu do folderu 'rollover' w którym znajdowały się owe zdjęcia.
pozdrawiam.


Powered by SMF 1.1.21 | SMF © 2006-2011, Simple Machines