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:

  1. <!– <![CDATA[
  2. /***************
  3. Copyright (c) 2004 Tomasz Elendt- Elu??
  4. this script is free for non-commercial use
  5. ***************/
  6. function tooltip(d,E,b,i,a){
  7. d=document;E=d.documentElement;b=d.body;if(!E)return;
  8. for(i=0;a=b.getElementsByTagName("a")[i];i++){
  9. if(a.title){
  10. with(a.t=d.createElement("div")){
  11. id="tooltip"
  12. innerHTML=a.title.replace(/\|/g,"
  13. ")
  14. }
  15. a.onmouseover=function(e){
  16. with(this){title="";onmousemove(e)}
  17. b.appendChild(this.t)
  18. }
  19. a.onmouseout=function(x){
  20. with(this){title=t.innerHTML.replace(/<br \/>/g,"\|")}
  21. if(x=d.getElementById("tooltip"))b.removeChild(x)
  22. }
  23. a.onmousemove=function(e){
  24. e=e||event;with(this.t.style){
  25. left=e.clientX+(E.scrollLeft||b.scrollLeft)+"px"
  26. top=e.clientY+(E.scrollTop||b.scrollTop)+"px"
  27. }
  28. }
  29. }
  30. }
  31. }
  32. function addEvent(O,E,F,x){
  33. return(x=O.addEventListener)?x(E,F,1):(x=O.attachEvent)?x('on'+E,F):!1
  34. }
  35. addEvent(window,'load',tooltip);
  36.  
  37. // ]]> –>
  38.  

Skrypt zamienia systemowego tooltipa na warstw? o identyfikatorze "tooltip", kt??rej cechy zamieszczam poni??ej:

  1. #tooltip {
  2. text-align: center;
  3. white-space: nowrap;
  4. color: #EFE7CE;
  5. font: normal 9px verdana, sans-serif;
  6. padding: 4px;
  7. background: #BF5B00;
  8. position:absolute;
  9. margin-top: 20px;
  10. }

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:

  1. <a title="Tutaj mo??na opisa? stron? | tutaj pisz? ju?? w drugiej linii" href="#">link</a>

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

    1. <style type="text/css">
    2. #tooltip {
    3. text-align: center;
    4. white-space: nowrap;
    5. color: #EFE7CE;
    6. font: normal 9px verdana, sans-serif;
    7. padding: 4px;
    8. background: #BF5B00;
    9. position:absolute;
    10. margin-top: 20px;
    11. }
    12. </style>

    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=""> <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

  • Tani hosting

    Szukasz sprawdzonego hostingu www? B?dziesz m??g?? prowadzi? sw??j w??asny serwis lub reklamowa? swoje us??ugi. A do tego zaoszcz?dzi? p??ac?c niewielkie pieniadze za du??? przestrze?? dyskow?. Zapraszamy do zapoznania si? ofert? firmy hostingowej TimNet. Dzi?ki naszej wsp????pracy z firm? mamy do zaoferowania 25% bonifikat? na tani hosting w tej firmie. Wystarczy w polu kupon zni??kowy wpisa?: webmark.shost.pl. Kupon jest do wykorzystania przy aktywacji konta www Serwer Home Hosting PL lub Serwer Web Hosting PL.
  • Saizenmedia

  • Vladstudio

  • Spectab

    Spectab
  • Reset

    Poni??ej zamieszczam link przyk??adowego zapisu css resetuj?cego domy??lne parametry (dope??nienia, marginesy, wielko??? czcionki itp) poszczeg??lnych element??w wykorzystywanych do zbudowania strony. Autorem opracowania jest Eric Mayer
  • Mo??e co?? uaktualni??

    Ju?? ponad p???? roku min???o od ostatniego wpisu… Ale jestem ponownie z nowym (jak zwykle po d??ugiej przerwie) wygl?dem strony i zamiarem uaktualniania jej od czasu do czasu. Ju?? nied??ugo do pobrania udost?pni? poprzedni theme pod wordpressa i zupe??nie nowy projekt.
  • 'Go??y dzie??'

    Go??y dzie?? na mojej stronie trwa?? do??? kr??tko. Jako?? nie jestem przekonany do “obdzierania” strony ze sk??ry tylko po to, aby zobaczy? czy narz?dy i tkank? ma zdrow?. Wydaje mi si?, ??e zupe??nie inaczej mo??na popularyzowa? standardy sieciowe.
  • Wordpress 2.5

    A new version of Wordpress is available. Taki komunikat wita mnie w panelu administracyjnym ju?? od kilkudziesi?ciu godzin. Czas na zmiany. Nowy skrypt jest podobno warty dokonaniu apgrajdu. Zobaczymy. Wi?cej na oficjalnej stronie Wordpressa.
  • Wielkanoc

    Pogodnych, spokojnych, pe??nych nadziei i mi??o??ci ??wi?t Wielkanocnych ??yczy: admin

Ostatnie komentarze

admin
TOP