Hover Map - Jak wykonać?

[NeoniX]

Witam Serdecznie:)

Mam pewien problem. Chciałbym uzyskać efekt HOVER na mapie odsyłaczy

Podaję kod:

Code: Zaznacz cały

http://wklej.to/c7e1O

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:)

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

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

[NeoniX]

W moim przypadku akurat przyciski - buttony robię w grafice aby to ładniej wyglądało do szablonów aukcji

[tajger]

Wrzuć jeszcze raz kod jak zmodyfikowałeś go i przejrzę go jutro.

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

[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

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

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

[tajger]

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.