Ciekawe i istotne rozwiązania dla stron www

lelahel.pl >css odniesienia

Tooltips z użyciem tylko CSS

Z lewej strony,w textarea umieściłem kod CSS demonstrujący trzy klasy anchor czyli kotwicy,czyli linku. Każda klasa, czyli .pokaz,.pokaz1,.widok jest na pozycji relative oraz ma opisany stan hover itd. Najważniejsza jest jednak możliwość przyporządkowania elementu znajdującego się wewnątrz kotwicy, pseudo-klasom różnicującym wygląd linku. Tu elementem znajdującym sie wewnątrz kotwicy ('a') jest span oraz img . Dzięki rozwojowi CSS możemy ustalić, że link ' w stanie spoczynku',czyli nie niepokojony przez mysz, zawartości <span ></span > i <img > nie pokazuje: a.pokaz span{display:none;} . Natomiast, jesli wskaźnik myszy znajdzie się na linku, czyli nastąpi stan 'hover',zawartość tych elementów ma być wyświetlona: a.pokaz:hover{display:block;position:absolute;...itd} Jeśli się ktoś uprze,może zamiast <span >zastosować <p > paragraf,ale może wtedy oczekiwać niespodziewanych efektów, zwłaszcza w Internet Explorer .

A oto nasza klasa .pokaz: link do strony 'budzik' Uwaga, po załadowaniu strony słychać pianie koguta !

Tak przy okazji:zawsze trzeba sprawdzać działanie kodu w przeglądarkach. Np.dziwne rzeczy sie dzieją przy wstawieniu kotwicy ze span tuż pod textarea . W Internet Explorer 'tooltip' wyświetla się w położeniu odnoszącym sie do prawej górnej krawędzi textarea ,zamiast do kotwicy.

Teraz klasa .pokaz1 Użytkownik nie musi mieć każdej czcionki Czcionka magneto jest ladna,ale polskich znakow diakrytycznych niestety, nie ma

Wyświetlany przy najechaniu myszką na link <span >ma pozycję absolute w odniesieniu do linku,konkretnie ustalaną za pomocą top: oraz left: . Zapis text-decoration:none; likwiduje domyślne podkreślenie linku, bez tego widoczne także w tooltip. Dobrego tłumaczenia tego określenia na razie nie znalazłem. Ale jeszcze poszukam przy okazji. W Wikipedii, o tooltip ktoś napisał: O tooltip w WikipediiTooltip to graficzny element interfejsu użytkownika. Jest on wyświetlany po najechaniu kursorem myszy na element nim opatrzony. Tooltip to przeważnie mała "chmurka" lub "dymek", który zawiera komentarz, lub poszerzenie opisywanego zagadnienia.

To jeszcze jakiś obrazek w formie tooltip (może: podpowiedzi ?) należałoby zademonstrować. Wielkość obrazka powinno się określić w <img >,by uniknąć niespodzianek. Wystarczy podać jeden wymiar,np szerokość width i obrazek zostanie dopasowany, niezależnie od rzeczywistej swojej wielkości.

Oto klasa .widok anioł w oknie

Jeszcze o autorze pomysłu! Także wpis do 'index' i do 'title.'

Last Modified 06/6/2011 11:12