Tällä skriptillä saa mihin tahansa nettisivun elementtiin työkaluvihjeen joka tulee esiin kun vie hiiren objektin päälle ja katoaa kun hiiren vie pois objekti päältä. Varustettu WindowsXP tyylisillä vihjeen sisään- ja uloshäivytyksillä. Vinkin taustan, tekstin, reunaviivan ja muita tyyliasetuksia voi säätää vapaasti, sillä ne ovat css tiedostossa.
Käyttöohjeet:
Laita sivun head-osioon nämä koodit:
<script src="tooltip.js"></script>
<link rel=stylesheet type="text/css" href="tooltip.css">
Laita dokumentin body tagiin tämä parametri:
onMouseMove="tooltip_update();"
Laita objekteihin näyttö- ja piilotusfunktioiden kutsut, esim:
<button onMouseOver="tooltip_show('teksti');" onMouseOut="tooltip_hide();">Tämä on esimerkkinappi</button>
* Ei toimi valittettavasti kuin IE:llä, feidausten takia. Yritän korjata joskus, kun kerkiän, systeemin toimimaan kaikilla selaimilla...
tooltip.js
/*
T Y Ö K A L U V I H J E - S K R I P T I
By:
Square35
Tätä skriptiä saa levittää vapaasti,
kunhan säilytät kommenttiosat
muokkaamattomana. Myöskin tämän koodin
levittäminen muokattuna on kiellettyä, levitä
vain alkuperäisiä tiedostoja.
*/
/*
Funktio tooltip_prepare, alustaa
tarvittavat muuttujat ja tulostaa
ruudulle työkaluvihje-layerin.
Tämän funktion kutsu on skriptin lopussa,
sitä ei tarvi kutsua uudelleen.
*/
function tooltip_prepare()
{
document.write("<div id='tt'><input type=text id='tttext'></input></div>");
ttx=""
tty=""
document.all("tttext").style.filter="alpha(opacity=0);";
tooltip_fadep="0";
}
/*
Funktio tooltip_fade_in pitää huolen
työkaluvihjeen sisäänfeidauksesta.
*/
function tooltip_fade_in()
{
if (tooltip_fadep>=0&&tooltip_fadep<=100)
{
tooltip_fadep+=10;
document.all("tttext").style.filter="alpha(opacity="+tooltip_fadep+");";
fadetimer=setTimeout("tooltip_fade_in();", 1)
} else {
tooltip_fadep=100;
}
}
/*
Funktio tooltip_fade_out pitää huolen
työkaluvihjeen ulosfeidauksesta.
*/
function tooltip_fade_out()
{
if (tooltip_fadep>0) {
tooltip_fadep-=10;
document.all("tttext").style.filter="alpha(opacity="+tooltip_fadep+");";
fadetimer=setTimeout("tooltip_fade_out();", 1)
} else {
tooltip_fadep=0;
}
}
/*
Funktio tooltip_hide piilottaa
työkaluvihjeen. Tämän funktion kutsu
sijoitetaan sen objektin onMouseOut-
tapahtumakäsittelijään, johon on
laitettu tooltip_show-kutsu.
Esimerkki:
onMouseOut="tooltip_hide();"
*/
function tooltip_hide()
{
tooltip_fadep="100";
tooltip_fade_out();
}
/*
Funktio tooltip_show(text)
näyttää työkaluvihjeen ja
asettaa sen tekstin. Haluttu
teksti annetaan text-parametrissä.
Tämän funktion kutsu laitetaan
sen objektin onMouseOver-
tapahtumakäsittelijään, jonhon
työkaluvihje halutaan.
Esimerkki:
onMouseOver="tooltip_show('Vihje');"
*/
function tooltip_show(text)
{
tooltip_fadep="0";
ttx=event.x;
tty=event.y;
ttx+=10;
tty+=10;
document.all("tt").style.top=tty;
document.all("tt").style.left=ttx;
document.all("tttext").value=text;
tooltip_fade_in();
}
/*
Funktio tooltip_update päivittää
työkaluvihjeen paikan ja
pitää sen tietyn matkan päässä
hiirestä. Tämän funktion kutsu
laitetaan sen sivun body-tagin
onMouseMove-
tapahtumakäsittelijään, missä
halutaan työkaluvihjeitä näyttää.
Tämä kutsu tarvii olla vain kerran.
Esimerkki:
onMouseMove="tooltip_update();";
*/
function tooltip_update()
{
ttx=event.x;
tty=event.y;
ttx+=20;
tty+=10;
document.all("tt").style.top=tty;
document.all("tt").style.left=ttx;
}
tooltip_prepare();tooltip.css
#tt {position:absolute; border-width:0px:}
#tttext {border-width:0px; background-color:gold; width:200px; filter: alpha(opacity=100);}esimerkki.html
<html>
<head>
<script src="tooltip.js"></script>
<link rel=stylesheet type="text/css" href="tooltip.css">
<title>Tooltips</title>
</head>
<body onMouseMove="tooltip_update();">
<p>Tavallista tekstiä. Buttoni, johon on liitetty tooltippi: <button onMouseOver="tooltip_show('Heippa');" onMouseOut="tooltip_hide();">Siirä hiiri tämän painikkeen päälle nähdäksesi tooltipin</button>
<p>Lisää esimerkkejä: <input type="text" value="testaus" onMouseOver="tooltip_show('Testi');" onMouseOut="tooltip_hide();"></input><br><img src="" alt="" onMouseOver="tooltip_show('Tämä kuva ei toimi...');" onMouseOut="tooltip_hide();">
<p><font onMouseOver="tooltip_show('Tekstiä!!');" onMouseOut="tooltip_hide();">Tähän tekstiin on lisätty tooltip!</font></p>
</body>
</html>Hirveesti tekstii
Onhan sitä, mutta kommentit ovat siitä suurin osa.
Osa koodista on aika purkkaa, kun ei tahtonu millään ruveta toimimaan. Siinä on vieläkin pikku bugi. Kun vetäsee hiiren objektin päältä nopeasti explorerin työkalupalkin päälle, se vinkki jää näkyviin. Jos joku tietää miten sen saisi korjattua olisin tosi kiitollinen.
JavaScriptin haittapuoli on just toi. Scriptistä tulee pitkää ja kaikki on näkyvissä lähdekoodis, jota on sit kiva lueskella. Ja miten saa noin pitkän pätkän tekstii noin pienestä jutusta :) JavaScriptiin pitäis kyl saada joku feature et sen vois jotenki tulkata pimennos.
tosta vois olla valmis systeemi vaik sun sivuilla... mä oon nii laiska et ei millää jaksais kopioida... jooko
Tuolla on esimerkki: http://www.members.lycos.co.uk/dizzyproductions/
Voitteko laittaa linkkejä screenshotteihin jos olette löytäneet jotakin muitakin bugeja?
karseeta koodia kun noin paljon kommentteja välissä. ja mitä järkee pistää kaksi CSS-määritystä omaan tiedostoonsa??
Toimiiko toi sivu kaikilla? Itselläni tulee "sivua ei löydy".
ai niin tossa onkin esimerkki, noh, tämän perusteella ihmettelen miksi näin bugista scriptiä on edes tänne hyväksytty.
ja älä käytä lycosia, pelkkää mainosta mainosten perään.
Hyi mikä kauhistus. Ei sisennyksiä eikä mitään ja JavaScript on muutenkin kohtalaisen turha keksintö :)
Se on mun eka tänne hyväksytty vinkki, älkää naurako...
kyl mul ainaki toimii...
Ei taida pahemmin !IE selaimilla toimia? Ainakaan Mozilla eikä Firebird ei suostuneet moista näyttelemään..
Joo kun toi filtteröinti on explorerin omia lisukkeita niin ei toimi kun sillä.
Firefox 1.0:lla sivu näkyi aivan p**kana
http://koti.mbnet.fi/kuukke/data/ei_toimi.PNG
Joo toi on ihan kamalaa koodia kun nyt myöhemmin miettii. On tullu paljo uusia asioita nyt opittua joten ehkä joskus kerkiän tuonkin korjata toimimaan kaikilla selaimilla...
Aihe on jo aika vanha, joten et voi enää vastata siihen.
