Strona 1 z 2
Hover Map - Jak wykonać?
Napisane: sobota, 20 kwietnia 2013, 23:20
przez NeoniX
Witam Serdecznie:)
Mam pewien problem. Chciałbym uzyskać efekt HOVER na mapie odsyłaczy
Podaję kod:
Proszę nie sugerować się jakością grafiki ponieważ zrobiona na szybkiego i chciałem właśnie taki efekt uzyskać
Jak widac w kodzie normalne odsyłacze działaja za pomocą mapowania , ale chciałbym jeszcze zeby po najechaniu właśnie na ten odnosnik , zmieniał kolor
Pozdrawiam:)
Re: Hover Map - Jak wykonać?
Napisane: wtorek, 23 kwietnia 2013, 10:18
przez Morfidon
Popraw najpierw kod, bo masz błąd na błędzie:
http://validator.w3.org/
To raz. Dwa nie robi się tak. Linki powinno się unikać jako mapa, powinny być tekstowe wtedy niosą ze sobą większą wartość. Trzy nie wiem, czy to zadziała po prostu spróbuj dodać atrybut ":hover" w css do elementu na który właśnie się najeżdża, wcześniej popraw kod.
Re: Hover Map - Jak wykonać?
Napisane: wtorek, 23 kwietnia 2013, 16:49
przez tajger
Hover w takim przypadku będzie działać, ale raczej w IE nie. W IE hover na takiego typu elementy lub całe divy średnio działa. Kiedyś próbowałem coś podobnego i stanowczo odradzam się tak bawić. Tak jak morfidon napisał, stwórz sobie teksowe linki. Możesz także próbować może ci się jakoś uda.
Re: Hover Map - Jak wykonać?
Napisane: wtorek, 23 kwietnia 2013, 21:32
przez NeoniX
W moim przypadku akurat przyciski - buttony robię w grafice aby to ładniej wyglądało do szablonów aukcji
Re: Hover Map - Jak wykonać?
Napisane: wtorek, 23 kwietnia 2013, 21:56
przez tajger
Wrzuć jeszcze raz kod jak zmodyfikowałeś go i przejrzę go jutro.
Re: Hover Map - Jak wykonać?
Napisane: wtorek, 23 kwietnia 2013, 22:01
przez Morfidon
Przyciski i buttony mogą wyglądać bardzo ładnie z samym CSS:
http://css3button.net/
Co więcej nie trzeba z tego korzystać, ale grafikę ustawia się jako tło tak jak to robię na videokurs.pl tylko wtedy możesz podstawić inną grafikę odpowiednią do szablonu.
Re: Hover Map - Jak wykonać?
Napisane: środa, 24 kwietnia 2013, 10:06
przez NeoniX
Witam Ponownie:)
Kod zosał troche zmodyfikowany ale teraz cały obraz mi sie podświetla a nie poszczegolne linki
http://wklej.to/HqhLq
jakbym poznał chcoiaż strukturę tego to już później sobie poradzę. Chodzi o to aby poszczegolne linki sie podświetlały
Proszę o pomoc
Re: Hover Map - Jak wykonać?
Napisane: środa, 24 kwietnia 2013, 13:07
przez tajger
W tym kodzie masz mnóstwo błędów i źle zrobiłeś mapę, trzeba użyć
usemap, żeby się potem odnieść do współrzędnych i przekazać ją w obrazku
img. Próbowałem coź z CSSem ale nie udało się. Pewnie to jakoś inaczej się robi. Najlepiej byłoby to zrobić w
DIVach jeśli się orientuejsz trochę w HTML, poustawiać marginesy, albo po prostu wrzucić powycinane obrazkim i poskladać je, a potem po klasach ustawiać każy inny hover na adres łącza danego obrazka i to byłby efekt podświetlenia.
Wcześniejszy kod wogóle nie działał, linki też. Finalny kod jest taki:
Code: Zaznacz cały
<img src="http://artgraf24.com.pl/mapowanie/top.jpg" alt="AllegroMap" usemap="#AllegroMap">
<map name="AllegroMap">
<area shape="rect" coords="133,332,395,387" href="http://allegro.pl/listing/user.php?us_id=26460146" alt="O mnie">
<area shape="rect" coords="85,252,347,307" href="http://allegro.pl/listing/user.php?us_id=26460146" alt="Komentarze">
<area shape="rect" coords="51,168,273,223" href="http://allegro.pl/listing/user.php?us_id=26460146" alt="Nasze aukcje">
<area shape="rect" coords="14,84,206,137" href="http://allegro.pl/listing/user.php?us_id=26460146" alt="Kontakt z nami">
</map>
Re: Hover Map - Jak wykonać?
Napisane: środa, 24 kwietnia 2013, 20:15
przez GniadeK
Użyj zwykłych znaczników <a></a> - jak koniecznie chcesz mieć napisy w obrazkach to użyj ich jako tła dla poszczególnych "<a>", gdy ustawisz wyświetlanie blokowe "display:block" to działa wysokość i szerokość znacznika "<a>" (domyślny jest "inline"), marginesami ustawiasz odstępy między nimi i wsio. Dla znacznika "<a>" akcja ":hover" działa wszędzie.
Re: Hover Map - Jak wykonać?
Napisane: czwartek, 25 kwietnia 2013, 02:00
przez tajger
GniadeK napisał(a):Użyj zwykłych znaczników <a></a> - jak koniecznie chcesz mieć napisy w obrazkach to użyj ich jako tła dla poszczególnych "<a>", gdy ustawisz wyświetlanie blokowe "display:block" to działa wysokość i szerokość znacznika "<a>" (domyślny jest "inline"), marginesami ustawiasz odstępy między nimi i wsio. Dla znacznika "<a>" akcja ":hover" działa wszędzie.
Dla a:hovera tak, ale jakbyś miał np. diva hoverować i coś próbować z nim kombinować to IE zakrzyczy w pewnych sytuacjach. Moim zdaniem zwykłe linkowanie tagiem <a> + nadawanie tak jak wspomniałeś tła, widtha, heighta ewentualnie albo na obrazkach to zrobić. Na obrazkach byłoby o wiele lepiej in my opinion.