To jest pierwszy wyraz, czyli „Każdy
To jest drugi wyraz, czyli słowo „wyraz
To jest trzeci wyraz, czyli krótkie słówko „ma
To jest czwarty wyraz, czyli słowo „swój
To jest ostatni wyraz, czyli słowo „dymek
Dymek 2


Po kliknięciu nastąpi powrót do strony głównej skryptów.

Zupełnie przyzwoity „dymek”. Różni się od innych tym, że całą konfigurcję ma na macieżystej stronie co pozwala, żeby użytkownik mógł dostosowywać „dymki” danej strony do jej kolorystyki. Ponadto istnieje możliwość konfigurowania każdego dymka pod względem formatowania tekstu i kolorystyki – wszystko to odbywa się w stylach. Jeżeli któryś z „dymków” nie jest sformatowany oddzielnie, przyjmuje format ogólny.



Każdy wyraz ma swój „dymek”





Do zamieszczenia w ramach HEAD:

<script language="JavaScript" src="biblioteka.js"></script>
<script language="JavaScript" src="tooltip.js"></script>
<style type="text/css">
<!--
#tooltip1Div, #tooltip2Div, #tooltip3Div, #tooltip4Div, #tooltip5Div {
color:#000000;
visibility:hidden;
font-size:10pt;
font-weight:bold;
text-align:center;
position:absolute;
width:170;
padding:3px;
background-color:#CCFFFF;
layer-background-color:#CCFFFF;
}

#tooltip1Div {
background-color:#CCFF99;
layer-background-color:#CCFF99;
}

-->
</style>


Do umieszczenia w dowolnym miejscu na stronie:

<div id="blokDiv">
<div id="tooltip1Div">To jest pierwszy wyraz, czyli „<B>Każdy</B>”</div>
<div id="tooltip2Div">To jest drugi wyraz, czyli słowo „<B>wyraz</B>”</div>
<div id="tooltip3Div">To jest trzeci wyraz, czyli krótkie słówko „<B>ma</B>”</div>
<div id="tooltip4Div">To jest czwarty wyraz, czyli słowo „<B>swój</B>”</div>
<div id="tooltip5Div">To jest ostatni wyraz, czyli słowo „<B>dymek</B>”</div>


Wywołanie „dymka”:

onmouseover="showToolTip('tooltip1Div')" onmouseout="hide('tooltip1Div')"


Zawartość skryptu BIBLIOTEKA.JS:

/********************************************/
/* BIBLIOTEKA Cross-Browser DHTML */
/* wersja 2.1 1999-05-20 */
/********************************************/
/* onFocus Dynamic Web Design */
/* Ania Kręglewska, Paweł Postupalski */
/* mailto:onfocus@webmedia.pl */
/* http://www.onfocus.com.pl */
/********************************************/
/* Ta biblioteka moze byc wykorzystywana */
/* bez zadnych ograniczen pod warunkiem */
/* zachowania tej informacji */
/********************************************/

/*************************/
/* Detekcja przegladarki */
/*************************/
nn4 = (document.layers) ? true:false;
ie4 = (document.all) ? true:false;

/**********************/
/* Pokaz blok 'ident' */
/**********************/
function show(ident,nest) {
if(nn4) {
nest ? document.layers[nest].document.layers[ident].visibility = "show" : document.layers[ident].visibility = "show";
} else if(ie4) {
document.all[ident].style.visibility = "visible";
}
}

/**********************/
/* Ukryj blok 'ident' */
/**********************/
function hide(ident,nest) {
if(nn4) {
nest ? document.layers[nest].document.layers[ident].visibility = "hide" : document.layers[ident].visibility = "hide";
} else if(ie4) {
document.all[ident].style.visibility = "hidden";
}
}

/****************************************/
/* Przesun blok 'ident' do punktu (x,y) */
/****************************************/
function moveTo(ident,x,y,nest) {
if(nn4) {
nest ? document.layers[nest].document.layers[ident].left = x : document.layers[ident].left = x;
nest ? document.layers[nest].document.layers[ident].top = y : document.layers[ident].top = y;
} else if(ie4) {
document.all[ident].style.left = x;
document.all[ident].style.top = y;
}
}

/*****************************************/
/* Przesun blok 'ident' o wektor [dx,dy] */
/*****************************************/
function moveBy(ident,dx,dy,nest) {
if(nn4) {
nest ? document.layers[nest].document.layers[ident].left += dx : document.layers[ident].left += dx;
nest ? document.layers[nest].document.layers[ident].top += dy : document.layers[ident].top += dy;
} else if(ie4) {
document.all[ident].style.left = document.all[ident].offsetLeft + dx;
document.all[ident].style.top = document.all[ident].offsetTop + dy;
}
}

/************************************************/
/* Przytnij blok 'ident' do zadanego prostokata */
/* t: top, r: right, b: bottom, l:left */
/************************************************/
function clipTo(ident, t, r, b, l,nest) {
if(nn4) {
if(nest) {
document.layers[nest].document.layers[ident].clip.top = t;
document.layers[nest].document.layers[ident].clip.right = r;
document.layers[nest].document.layers[ident].clip.bottom = b;
document.layers[nest].document.layers[ident].clip.left = l;
} else {
document.layers[ident].clip.top = t;
document.layers[ident].clip.right = r;
document.layers[ident].clip.bottom = b;
document.layers[ident].clip.left = l;
}
} else if(ie4) {
document.all[ident].style.clip =
"rect(" + t + " " + r + " " + b + " " + l + ")";
}
}

/****************************************************/
/* Zmien przyciecie bloku 'ident' o zadane wartosci */
/* t: top, r: right, b: bottom, l:left */
/****************************************************/
function clipBy(ident, t, r, b, l,nest) {
if(nn4) {
if(nest) {
document.layers[nest].document.layers[ident].clip.top += t;
document.layers[nest].document.layers[ident].clip.right += r;
document.layers[nest].document.layers[ident].clip.bottom += b;
document.layers[nest].document.layers[ident].clip.left += l;
} else {
document.layers[ident].clip.top += t;
document.layers[ident].clip.right += r;
document.layers[ident].clip.bottom += b;
document.layers[ident].clip.left += l;
}
} else if(ie4) {
ie_clip = document.all[ident].style.clip;
ie_clip = ie_clip.substring(5, ie_clip.length-1);
ie_clip_wart = ie_clip.split("px");
t += parseInt(ie_clip_wart [0]);
r += parseInt(ie_clip_wart [1]);
b += parseInt(ie_clip_wart [2]);
l += parseInt(ie_clip_wart [3]);
document.all[ident].style.clip = "rect(" + t + "px " + r + "px " + b + "px " + l + "px)";
}
}

/***********************************************************/
/* Zapisz pozycje bloku 'ident' do zmiennych l:left, t:top */
/***********************************************************/
function pozycja(ident,nest) {
if(nn4) {
l = nest ? document.layers[nest].document.layers[ident].left : document.layers[ident].left;
t = nest ? document.layers[nest].document.layers[ident].top : document.layers[ident].top;
} else if(ie4) {
l = document.all[ident].offsetLeft;
t = document.all[ident].offsetTop;
}
}

/******************************************************/
/* Zapisz wysokosc bloku 'ident' do zmienej h: height */
/******************************************************/
function wysokosc(ident,nest) {
if(nn4) {
h = nest ? document.layers[nest].document.layers[ident].document.height : document.layers[ident].document.height;
} else if(ie4) {
h = document.all[ident].scrollHeight;
}
return h;
}

/****************************************/
/* Sprawdz rozmiary okna */
/* oknoW: dostepna szerokosc */
/* oknoH: dostepna wysokosc */
/****************************************/
function okno(){
if(nn4){
oknoW=window.innerWidth-16;
oknoH=window.innerHeight
}else if(ie4){
oknoW=document.body.offsetWidth-20;
oknoH=document.body.offsetHeight
}
}

/*************************/
/* Przeladuj cala strone */
/*************************/
function reDo() {
if(nn4) {
if (innerWidth != oknoW+16 || innerHeight != oknoH) {
location.reload();
}
} else location.reload();
}

/*************************/
/* Zmien zawartosc bloku */
/*************************/
function writeTo(ident, tekst, nest) {
if(nn4) {
if(nest) {
document.layers[nest].document.layers[ident].document.open();
document.layers[nest].document.layers[ident].document.write(tekst);
document.layers[nest].document.layers[ident].document.close();
} else {
document.layers[ident].document.open();
document.layers[ident].document.write(tekst);
document.layers[ident].document.close();
}
} else if(ie4) {
document.all[ident].innerHTML = tekst;
}
}


Zawartość skryptu TOOLTIP.JS:

nn4=(document.layers)?true:false;
ie4=(document.all)?true:false;

function init() {
document.onmousemove = mouseMove;
if(nn4) { document.captureEvents(Event.MOUSEMOVE) }
pozycja('blokDiv');
}

window.onload=init;
pageWidth=250;
pageHeight=200;

function mouseMove(e) {
mousePosition(e);
}

function mousePosition(e) {
if(nn4) {
x = e.pageX;
y = e.pageY;
} else if(ie4) {
x = event.x+document.body.scrollLeft;
y = event.y+document.body.scrollTop;
}
}

function showToolTip(id) {

moveTo(id, x+10, y+10);
show(id);

/*
dobre efekty może dać lekkie opóźnienie wyświetlenia tooltipa:

setTimeout("moveTo('" + id + "', x+10, y+10);show('" + id + "');", 200);
*/

/*
można też ustawić automatyczne wyłączanie tooltipa po ustalonym czasie, np. 5 sekundach:

setTimeout("hide('" + id + "')",5000);
*/

}




Skrypt do pobrania:

Po kliknięciu nastąpi transfer archiwum z plikiem tekstowym ze skryptem