hover w menu

[pavlus007]

Witam. Chciałbym zrobić hover w menu. Wolałbym linki obrazkowe bo mógłbym wtedy w alt powstawiać trochę inne słowa kluczowe. Po drugie, nie byłoby kłopotu z różnymi wielkościami czcionek w różnych systemach.

Mam taki oto kod:

<a class="mlink" href="o_nas.html"><img class="m1" src="obrazki/menu/o_nas.jpg" alt="O Nas" /></a>
<a class="mlink" href="cennik.html"><img class="m2" src="obrazki/menu/cennik.jpg" alt="Cennik" /></a>
<a class="mlink" href="kontakt.html"><img class="m3" src="obrazki/menu/kontakt.jpg" alt="Kontakt" /></a>

[...]

Kod css:

.mlink {
width:222; height:46px; display:block; border: 0px; padding:0px; margin:0px; text-decoration: none;
}

.m1, .m2, .m3 {
border: 0px; padding:0px; margin:0px; height: 46px;
}

img.m1:hover {
background:url(obrazki/menu/o_nas_p.jpg); display:block; width:222; height:46;
}

img.m2:hover {
background:url(obrazki/menu/cennik_p.jpg); display:block; width:222; height:46;
}

img.m3:hover {
background:url(obrazki/menu/kontakt_p.jpg); display:block; width:222; height:46;
}

Niestety kod nie działa...

Pomożecie?

[ap_seo]

w czym robisz? IE , FF?

chyba zreszta i tak trzeba dodac a czyli img.m3 a:hover itd

[buggie]

jeśli chcesz zrobić hovery obrazków to nie w ten sposób. W ogóle, nie wiem czy wiesz, ale klasa hover działa tylko dla znaczników "a" w IE6, czyli musisz zastosować jakiegoś fix'a. Np. csshover.htc.

- użyj Sprite'ów. Dzięki temu nie będzie pobierany każdy obrazek z osobna, a tylko jeden w całości. Również zmniejszysz ilość zapytań przeglądarki, oraz hovery będą działały od razu, bo w ten sposób co chcesz zrobić obrazek będzie się ściągał po najechaniu kursorem na wybrany element menu.

- zrób hovery za pomocą biblioteki JQuery, przy okazji możesz też użyć jakiś fadów, animacji itp.

Tutaj masz przykład hoverów w JQuery z użyciem Spriteów:

$(document).ready(function(){
$(".znacznik").hover(
	function() { 
			$(this).css({'background' : 'url(/sciezka/sprites.png) 0px -29px no-repeat'});  // Po najechaniu kursorem na element
	},
	function() {
			$(this).css({'background' : 'url(/sciezka/sprites.png) no-repeat'}); // Po opuszczeniu elementu 
})
});

Czyli, w CSSie ustawiasz sobie background dla jakiegoś elementu, który ma być tym obrazkiem (np. dla "a"), a resztę robisz w JQuery jak powyżej.

Tutaj masz świetny generator do spriteów:

https://csssprites.com/

[pavlus007]

Robię dla wszystkich przeglądarek.

Co myślicie o tym?

https://www.blog.wasniowski.pl/archives/8

Czy takie obrazki google przełknie? Przecież byłby wtedy podwojony tekst na obrazku:

@buggie, dla mnie to zbyt skomplikowane pozatym czy to nie będzie zaliczać się do linku w js?

[Kukiel]

a czy Google czyta obrazki? dodaj stosowny title i alt tak jak jest w tym kursie i po robocie

[pavlus007]

Kukiel, ktoś na forum pisał, że alt powinien być taki jak tekst na obrazku. Może ktoś to potwierdzić lub zaprzeczyć?

Jeśli Google rzeczywiście czytałby obrazki to czy taki przezroczysty obrazek nie byłby uznany za ukrywanie linków?

[pavlus007]

Mam jeszcze lepszy pomysł, tylko nie wiem czy w IE6 zadziała

W <img> byłby sam tekst w gifie, a na tło linka dałbym hover.

Wie ktoś czy taki normalny gif działa w IE6?

[buggie]

To wcale nie jest takie trudne jak Ci się wydaje, zajęło mi to jakieś 3 minuty

Demo

Źródła

Ale tak na prawdę to nie ma sensu tworzyć obrazków z napisami. Niepotrzebnie zwiększasz rozmiar swojej strony, bo będziesz musiał robić po 2 obrazki dla każdego elementu menu.

Najlepiej jest to zrobić w ten sam sposób co Ci podałem linki, ale użyć normalnego anchora, a zmieniać tylko tło pod nim. Nie ma się co przejmować delikatnymi różnicami czcionek w przeglądarkach.

A co do tego czy ten link nie będzie się zaliczał do JS. Właśnie o to chodzi, że nie. W HTMLu masz zwykły link, taki jaki powinien być, natomiast JS (JQuery) obsługuje w tym przypadku podmianę tła tylko.

PS. GoogleBot nie czyta tekstu na obrazkach, to nie OCR :-] nie wiem skąd ten pomysł....