Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Rollover
Forum PHP.pl > Forum > Przedszkole
Poczatkujacy_Web
Witam!

Chcialbym zrobic aby rollover dzialal tak ze zmiana obrazka wyglada tak jak tutaj : http://www.maitredeau.be/ po najechaniu na jedna z tych 3 grafik.

Robie to w ten sposob :

<a href="http://www.pckurier.pl" onMouseOver='rollover.src="../grafika/pcq.gif"'
onMouseOut='rollover.src="../grafika/hand.gif"'>
<img src="../grafika/hand.gif" name="rollover" border="0"></a>

lecz to zamienia grafiki od razu bez tego ladnego efektu wejscia od dolu. Jak to zrobic? Da sie w html/css czy javascript? Pomożcie
kamil4u
Cytat
Da sie w html/css czy javascript?

Da się i w tym i w tym. Z tym, że tylko w CSS3, więc nie zadziała to na starszych przeglądarkach.
Wpisz w google: Rollover CSS3 lub Rollover jquery i szukaj na anglojęzycznych stronach - na pewno znajdziesz.

Chyba, że chcesz sam to napisać. Wtedy napisz w czym to powiem Ci jak to zrobić smile.gif
Poczatkujacy_Web
Najchetniej zrobil bym to w css3 wiec mozesz podpowiedziec chyba ze latwiej w javascript smile.gif
Damonsson
Takie efekty odpuść sobie w samym CSS, nawet IE9 tego nie załapie chyba. Wpisz w wyszukiwarkę i wyskoczy Ci 300 tutoriali jak to zrobić.
kamil4u
CSS3:
- :hover - najechanie na obrazke
- CSS3 Transitions - animacja - wydaje się to skomplikowane, ale tak naprawdę jest proste

Wada: Brak IE i starych przeglądarek.
Przykład: http://www.w3schools.com/css3/tryit.asp?fi...ss3_transition1

JS:
Musisz samemu zrobić skrypt animacji. Najłatwiej poprzez setInterval. Zmieniasz styl danego elementu cyklicznie, małymi kroczkami.
Działa pod każdą przeglądarką.

jQuery:
To co wyżej tyle, że już zostało napisane. Między innymi przez twórców jQuery. W sumie dostajesz gotowy skrypt, poszukaj w dokumentacji. W necie są też setki przykładów.
viking
Wystarczy w sumie poświęcić kilka sekund żeby zajrzeć w źródło podanej strony i od razu wiadomo że używają http://jquery.malsup.com/cycle/download.html . Kombinować można zacząć jeżeli nie zależy nam na starszych przeglądarkach albo nie korzystamy z jquery.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.