Webmark

Dymek

Index » Kategoria: CSS » Tagi: css , dymek , tutorial , warstwy.

Dość często otrzymywałem e-mailem pytania dot. "dymkĂłw" z opisem linkĂłw. Otóş posługuje się skryptem napisanym przez Elusia, ktĂłry znalazłem na forum Webhelp. Skrypt javascript osadzamy w sekcji HEAD strony lub zapisujemy go w oddzielnym pliku zaś w kodzie strony zamieszczamy odwołanie do niego. Temat nie do końca mieści się w kategorii css ale w końcu skrypt wygeneruje warstwę, ktĂłra zostanie opisana dzięki kaskadowym arkuszom stylĂłw więc czemu nie …
Skrypt js:
[code lang="javascript"][/code]

Skrypt zamienia systemowego tooltipa na warstwę o identyfikatorze "tooltip", której cechy zamieszczam poniżej:
[code lang="css"]#tooltip {
text-align: center;
white-space: nowrap;
color: #EFE7CE;
font: normal 9px verdana, sans-serif;
padding: 4px;
background: #BF5B00;
position:absolute;
margin-top: 20px;
}[/code]
Oczywiście ktoś moĹźe zarzucić, Ĺźe w sieci moĹźna znaleźć sporo, o wiele bardziej rozbudowanych skryptĂłw js generujących "baloniki". Zapewne tak ale… Otóş w/w skrypt bazuje tylko i wyłącznie na opisach odnośnikĂłw czyli "title". Nie trzeba zatem dopisywać do linkĂłw Ĺźadnych mouseover itp. Dodatkowo jeśli ktoś zechce przełamać opis odnośnika (aby nie wydłuĹźać niepotrzebnie warstwy) wystarczy podzielić go znakiem " | " aby opis wyświetlił się w kilku liniach.
Przykładowy link wygląda zatem tak:
[code lang="html"]link[/code]
I na koniec pytanie. A co będzie z tooltipem gdy ktoś wyłączy obsługę js lub nie zostanie załadowany plik css? Ano nic, "dymek" i tak zostanie wyświetlony z tym, że w swojej systemowej (brzydkiej) formie.

* * *

• Komentarze
• Archiwum