Come creare descrizioni comandi per le immagini con i CSS e JavaScript

September 16

Come creare descrizioni comandi per le immagini con i CSS e JavaScript


Creazione di un suggerimento su una pagina Web richiede l'utilizzo di diverse tecnologie. Gli sviluppatori Web utilizzano fogli di stile CSS per impostare le proprietà visive di suggerimenti. HTML elementi "div" fungono da contenitori tooltip attuali, e JavaScript gestisce l'intero processo. tooltip immagine possono aiutare i visitatori del sito mediante la visualizzazione di informazioni utili quando si librano le loro cursori sulle immagini. Dopo aver configurato un quadro di base di codice, è possibile aggiungere un tooltip personalizzato per qualsiasi immagine regolando alcuni valori delle proprietà.

istruzione

1 Lancio "Blocco note" o un altro editor HTML. Aprire un documento HTML.

2 Inserire il seguente codice HTML da nessuna parte nella sezione "corpo" del documento:

<Img id = "Image1" />

<Div id = "Tooltip" class = "tooltip">

</ Div>

Questo codice aggiunge un'immagine alla pagina Web. il valore id dell'immagine è "Image1" in questo esempio. Il tag "div" crea un blocco div vuoto. Il codice userà questo div come il tooltip. il valore id del div è "Tooltip". Il div fa riferimento anche una classe CSS chiamato "tooltip".

3 Aggiungere il seguente codice alla sezione "testa" del documento:

<Style type = "text / css">

.tooltip {background-color: Giallo; colore rosso; altezza: 100px; width: 200px; visibility: hidden; position: absolute;}

</ Style>

Questo codice CSS crea il "suggerimento" classe CSS. Questa classe definisce le proprietà di stile del div. Le prime due proprietà impostare lo sfondo e colori di primo piano per il suggerimento. Quei colori sono "verde" e "rosso" in questo esempio. Sostituire quei colori se lo si desidera. L'altezza e la larghezza del tooltip sono 100 pixel e 200 pixel. Modificare questi valori, come pure se si desidera che il suggerimento di avere dimensioni differenti. La proprietà di visibilità imposta la visibilità del div di nascosto. Questo rende il div invisibile quando la pagina Web carichi. Il valore della proprietà position è "assoluta". In questo modo il codice per spostare il tooltip in qualsiasi posizione sullo schermo. Non modificare i valori delle proprietà di visibilità o posizione.

4 Aggiungere il seguente codice JavaScript dopo il codice CSS descritto nella sezione precedente:

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

var tooltipId = "Tooltip";

var ImageID = "Image1";

var imageToolTip = "Inserisci Tooltip qui";

window.onload = addMouseEvents;

addMouseEvents function () {

var imageobject = document.getElementById (ImageID);

imageObject.onmouseover = function () {

manageToolTip (imageobject, "SHOW", imageToolTip);

}

imageObject.onmouseout = function () {

var imageobject = document.getElementById (ImageID);

manageToolTip (imageobject, "nascondere", imageToolTip);

}

}

Si noti che la variabile tooltipId contiene l'ID del div. La variabile ImageID contiene l'identificativo del tuo immagine, e la variabile imageToolTip contiene il testo che si desidera visualizzare nel tooltip. Modificare il testo da "Inserisci Tooltip Qui" per il testo che si desidera visualizzare nella descrizione comando. Il codice rimanente imposta i gestori di eventi che causano il div di apparire e scomparire quando il cursore del mouse si muove sopra e lontano dall'immagine.

5 Aggiungere le seguenti funzioni JavaScript dopo il codice mostrato nel passaggio precedente:

Funzione manageToolTip (imageobject, azione, toolTipMessage) {

var toolTipObject = document.getElementById (tooltipId);

se (azione == "nascondere")

toolTipObject.style.visibility = "hidden";

altro {

var = imageObjectTop findTop (imageobject);

toolTipObject.style.visibility = "visible";

toolTipObject.innerHTML = toolTipMessage;

toolTipObject.style.left = findLeft (imageobject);

toolTipObject.style.top = findTop (imageobject);

}

}

Funzione findLeft (imageobject) {

var = parentElement imageObject.offsetParent;

var = imageCurrentPosition imageObject.offsetLeft;

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

imageCurrentPosition + = parentElement.offsetLeft;

parentElement = parentElement.offsetParent;

}

tornare imageCurrentPosition;

}

Funzione findTop (imageobject) {

var = parentElement imageObject.offsetParent;

var = imageCurrentPosition imageObject.offsetTop;

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

imageCurrentPosition + = parentElement.offsetTop;

parentElement = parentElement.offsetParent;

}

tornare imageCurrentPosition;

}

</ Script>

Questo codice viene eseguito quando il cursore si sposta sopra l'immagine e dall'immagine. Si calcola le coordinate X e Y dell'immagine e sposta il div tooltip in quella posizione. Ciò assicura che il suggerimento appare sull'immagine anziché in una posizione casuale.

6 Salvare il documento HTML, e aprirlo nel browser. Muovi il mouse sopra l'immagine. Il tooltip apparirà e visualizzare il testo impostato nel codice JavaScript. Muovi il mouse dall'immagine per rendere il tooltip scomparire.

Consigli e avvertenze

  • Si noti che il div tooltip e l'immagine definita nella sezione "corpo" contengono proprietà id. Questi due elementi devono contenere le proprietà ID per il suggerimento di lavorare. Le funzioni JavaScript manipolano questi oggetti facendo riferimento a quei valori id. In questo esempio, l'ID del div tooltip è "Tooltip" e l'ID dell'immagine è "Image1". È possibile effettuare questi valori qualcosa che ti piace. Se si modificano questi valori, apportare le modifiche corrispondenti nel codice JavaScript. Per esempio, se si cambia id dell'immagine da "Image1" a "River", individuare "Image1" nel codice JavaScript e modificarlo a "River".