Hvordan lage verktøytips for bilder med CSS og Javascript

Opprette et verktøytips på en webside krever bruk av flere teknologier. Webutviklere bruker Cascading Style Sheets å sette de visuelle egenskapene til verktøytips. HTML "div" elementer tjene som selve tooltip containere, og Javascript styrer hele prosessen. Bildeverktøytips kan hjelpe besøkende ved å vise nyttig informasjon når de kan holde musepekeren over bildene. Når du setter opp et grunnleggende rammeverk av koden, kan du legge til en tilpasset verktøytips til et bilde ved å justere noen eiendomsverdier.

Bruksanvisning

1 Launch "Notisblokk" eller et annet HTML editor. Åpne et HTML-dokument.

2 Plasser følgende HTML-kode hvor som helst i dokumentet "body" -delen:

<Img id = "Image1" />

<Div id = "verktøytips" class = "tooltip">

</ Div>

Denne koden legger et bilde til websiden. Bildets ID-verdien er "Image1" i dette eksemplet. Den "div" tag oppretter en tom div blokken. Koden vil bruke denne div som verktøytipset. Div id verdien er "verktøytips". Div refererer også en CSS-klasse som heter "verktøytips".

3 Legg til følgende kode i dokumentet "head" -seksjonen:

<Style type = "text / css">

.tooltip {background-color: Gul; color: red; height: 100px; width: 200px; synlighet: skjult; position: absolute;}

</ Style>

Denne CSS-kode skaper "verktøytips" CSS-klasse. Denne klassen setter div styling egenskaper. De to første eiendommene satt bakgrunnen og forgrunnen farger for verktøytipset. Disse farger er "gul" og "rød" i dette eksempel. Erstatte disse fargene hvis du ønsker det. Høyden og bredden på verktøytipset er 100 piksler og 200 piksler. Endre disse verdiene i tillegg hvis du vil at verktøytipset å ha ulike dimensjoner. Synligheten eiendom komplekser div synlighet til skjult. Dette gjør div usynlig når nettsiden lastes. Posisjonen boligens verdi er "absolutt". Dette gjør at koden for å flytte verktøytipset som helst på skjermen. Ikke endre synlighet eller posisjonseiendomsverdier.

4 Legg til følgende Javascript-koden etter at CSS-kode som er beskrevet i forrige avsnitt:

<Script language = "javascript" type = "text / javascript">

Var toolTipID = "verktøytips";

Var imageID = "Image1";

Var imageToolTip = "Sett Tooltip her";

window.onload = addMouseEvents;

funksjons addMouseEvents () {

Var imageObject = document.getElementById (imageID);

imageObject.onmouseover = function () {

manageToolTip (imageObject, "SHOW", imageToolTip);

}

imageObject.onmouseout = function () {

Var imageObject = document.getElementById (imageID);

manageToolTip (imageObject, "skjule", imageToolTip);

}

}

Merk at toolTipID variabelen inneholder id av div. Den imageID variable holder din bildets ID, og ​​imageToolTip variabelen inneholder teksten du vil skal vises i verktøytipset. Endre teksten fra "Sett Tooltip Here" til teksten du vil skal vises i verktøytipset. De resterende kode setter opp hendelsesbehandlinger som forårsaker div å komme og forsvinne når musepekeren beveger seg over og vekk fra bildet.

5 Legg til følgende Javascript-funksjoner etter koden vist i forrige trinn:

funksjon manageToolTip (imageObject, action, toolTipMessage) {

Var toolTipObject = document.getElementById (toolTipID);

if (handling == "HIDE")

toolTipObject.style.visibility = "skjult";

else {

Var imageObjectTop = findTop (imageObject);

toolTipObject.style.visibility = "synlig";

toolTipObject.innerHTML = toolTipMessage;

toolTipObject.style.left = findLeft (imageObject);

toolTipObject.style.top = findTop (imageObject);

}

}

funksjon findLeft (imageObject) {

Var parentElement = imageObject.offsetParent;

Var imageCurrentPosition = imageObject.offsetLeft;

while (parentElement.nodeName! = "BODY") {

imageCurrentPosition + = parentElement.offsetLeft;

parentElement = parentElement.offsetParent;

}

tilbake imageCurrentPosition;

}

funksjon findTop (imageObject) {

Var parentElement = imageObject.offsetParent;

Var imageCurrentPosition = imageObject.offsetTop;

while (parentElement.nodeName! = "BODY") {

imageCurrentPosition + = parentElement.offsetTop;

parentElement = parentElement.offsetParent;

}

tilbake imageCurrentPosition;

}

</ Script>

Denne koden kjøres når musepekeren beveger seg over bildet og bort fra bildet. Det beregner X og Y-koordinatene til bildet og flytter verktøytips div til stedet. Dette sikrer at verktøytips vises over bildet i stedet for på et tilfeldig sted.

6 Lagre HTML-dokument, og åpne den i nettleseren din. Beveg musen over bildet. Verktøytipset vises og vise teksten du angir i Javascript-kode. Beveg musen bort fra bildet å gjøre verktøytipset forsvinne.

Hint

• Merk at verktøytipset div og bildet er definert i "kroppen" delen inneholder id egenskaper. Disse to elementene må inneholde id egenskaper for verktøytipset skal fungere. Javascript-funksjoner manipulere disse objektene ved å referere disse id-verdier. I dette eksempelet er verktøytipset div id "verktøytips", og bildets id er "Image1." Du kan gjøre disse verdiene noe du liker. Hvis du endrer disse verdiene, gjør tilsvarende endringer i Javascript-kode. For eksempel, hvis du endrer bildets id fra «Image1" til "River", finn "Image1" i Javascript-kode og endre den til "River".