[CSS][HTML]Rollover Opcje

[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]

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ć

[Poczatkujacy_Web]

Najchetniej zrobil bym to w css3 wiec mozesz podpowiedziec chyba ze latwiej w javascript

[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.