Jeden obrazek dla onmouseover


(Jodelkapl) #1

Nie wiem czy dobrze nazwałem, ale i tak piszę. Chcę aby było coś takiego jak onmouseover lecz dla wszystkich przycisków np. chcę aby był obrazek belka i na tym napisy i jak najade na ten napis to jest efekt onmouseover , kurcze nie umiem się wyrazić. Ma byc niebieskia belka i szary obrazek onmouseover. Jak chcę tak zakodować aby było tak że daję tylko napisy, a jak najadę na pole tego napisu to pojawia się szare tło. Tu jest dobrze pokazane: http://serwerycs.eu/ <- znalazłem tę stronkę przypadkiem i nie wiem jak zrobić taki efekt. Widać że jest jeden obrazek, a to są normalne napisy bo obrazek byłby na całą wysokość belki a tutaj trzeba najechać na napis aby można było kliknąć, ale efekt onmouseover jest fajnie zrobiony. Pozdrawiam.

_ Jeżeli temat jest źle nazwany lub coś jest nie tak , proszę zmienić, chyba że ten problem już jest rozwiązany to proszę o link do rozwiązania. _


(Team Zaibatsu) #2

Najlepszym rozwiązaniem jest robienie napisu w grafice efekt będzie taki sam.


(Drobok) #3

Twoja wypowiedź jest źle sformułowana. Chcesz tak mieć to se tak zrób :slight_smile:


(manieKMP) #4

W tej "przykładowej" stronie chodzi Tobie o tą pomarańczową "belkę nawigacyjną" i efekt, jaki występuje po najechaniu na któryś z odnośników (odwrócenie tła)?

Jeśli tak, to najprościej byłoby zastosować w css'ie coś takiego jak "hover", określający stan, wygląd itp. elementu na stronie, po najechaniu na niego kursorem.

Przykładowo

a {color: green;}

a:hover {color: red;}

spowoduje, że tekst wszystkich odnośników na stronie będą zielone, ale najechanie na któryś z nich, zmieni kolor danego odnośnika na czerwony. Jeżeli chodzi o tło, zamiast (lub wespół z) "color" dla "a:hover", należałoby określić "background"

a:hover {background: red;}

lub

a:hover {background: url(ścieżka do pliku tła wraz z jego nazwą i rozszerzeniem);}

Oczywiście to co napisałem powyżej jest bardzo uogólnione (ot taki zarys) i należałoby sobie poczytać -w sieci jest- o wymienionych, stanie/pseudo-klasie, własnościach, wartościach (wpisanie w google "css hover" czy "css background" wypluje odpowiednie wyniki, a przynajmniej powinno :wink:)