Dymek
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:
-
<!– <![CDATA[
-
/***************
-
Copyright (c) 2004 Tomasz Elendt- Eluś
-
this script is free for non-commercial use
-
***************/
-
function tooltip(d,E,b,i,a){
-
d=document;E=d.documentElement;b=d.body;if(!E)return;
-
for(i=0;a=b.getElementsByTagName("a")[i];i++){
-
if(a.title){
-
with(a.t=d.createElement("div")){
-
id="tooltip"
-
innerHTML=a.title.replace(/\|/g,"
-
")
-
}
-
a.onmouseover=function(e){
-
with(this){title="";onmousemove(e)}
-
b.appendChild(this.t)
-
}
-
a.onmouseout=function(x){
-
with(this){title=t.innerHTML.replace(/<br \/>/g,"\|")}
-
if(x=d.getElementById("tooltip"))b.removeChild(x)
-
}
-
a.onmousemove=function(e){
-
e=e||event;with(this.t.style){
-
left=e.clientX+(E.scrollLeft||b.scrollLeft)+"px"
-
top=e.clientY+(E.scrollTop||b.scrollTop)+"px"
-
}
-
}
-
}
-
}
-
}
-
function addEvent(O,E,F,x){
-
return(x=O.addEventListener)?x(E,F,1):(x=O.attachEvent)?x('on'+E,F):!1
-
}
-
addEvent(window,'load',tooltip);
-
-
// ]]> –>
-
Skrypt zamienia systemowego tooltipa na warstwę o identyfikatorze "tooltip", której cechy zamieszczam poniżej:
-
#tooltip {
-
text-align: center;
-
white-space: nowrap;
-
color: #EFE7CE;
-
font: normal 9px verdana, sans-serif;
-
padding: 4px;
-
background: #BF5B00;
-
position:absolute;
-
margin-top: 20px;
-
}
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:
-
<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 -
<style type="text/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;
-
}
-
</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ę?:]
