Dymek

Index » Kategoria: CSS » Tagi: , , , .

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.


* * *

  • Napisał: Pit1000 — 19/09/2007 @ 12:20

    Jak nazwać plik z całym skryptem ???

  • Napisał: nastazja — 06/05/2008 @ 08:38

    To tylko moj krzyk rozpaczy Od kilku dni chce sobie wprowadzic jak najprostszy dymek i prawie nic nie dziala. Nie jestem profesjonalista , chcialam tylko dodac dosc dlugiego tooltipa . Rece mi opadly , czesc tego dziala w IE ale w Firefoxie i IE juz nie.
    Dzieki tak czy siak
    nastazja

  • Napisał: Magic — 10/11/2008 @ 13:06

    Ale wiesz, że ktoś, kto nie miał z tym do czynienia nie rozumie z tego ani słowa? Opisz chociaż jak i co zrobić.

  • Napisał: zama — 11/11/2008 @ 03:33

    Wydawało mi się, Ĺźe jaśniej juĹź nie moĹźna 🙂 Tak jak napisałem: zawartość skryptu kopiujemy w nagłówku strony (przed znacznikiem </head>. PoniĹźej, o ile nie korzystamy z zewnętrznego arkusza stylĂłw moĹźna dodać definicję warstwy czyli
    [code lang="css"]

    [/code]
    i to wszystko. Niestety nie da się wszystkiego i zawsze wytłumaczyć. Nawet b. początkujący webmaster musi mieć chociaż niewielkie pojęcie o osadzaniu skryptów, budowie strony, warstwach, tabelach itp.

  • Napisał: heliar — 27/03/2009 @ 11:03

    Screen'a bym zobaczył jak to wygląda, da się?:]

* pola wymagane

Linie i paragrafy automatyczne, adres e-mail nigdy nie widoczny.
Dozwolony HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> [code lang="css"][/code], [code lang="html"][/code]

Komentarze są moderowane. Spamowanie (reklamowanie innych stron, wpisy nie na temat itp.) komentarzy może spowodować zablokowanie IP komentującego.



 

tanie serwery www: timnet.pl

Webmark został zbudowany na silniku Wordpress
wpisy (rss)komentarze (rss)
design by zama 2008
Stat24

Ostatnie komentarze

admin
TOP