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??:]
