Questa tecnica JavaScript può essere utilizzata per molti effetti, inclusi suggerimenti e mappe immagine.

I siti Web interattivi possono fornire un'esperienza più coinvolgente per gli utenti. Esistono molti modi per rendere un sito Web più interattivo, ad esempio aggiungendo animazioni, suggerimenti o altri effetti extra.

Alcuni siti Web visualizzano informazioni anche quando l'utente passa con il mouse su un elemento della pagina. Ciò include mappe o altri dati visivi che consentono all'utente di passare il mouse sopra l'immagine per visualizzare un punto dati utilizzando una descrizione comandi.

Puoi ottenere questo effetto utilizzando HTML, CSS e JavaScript utilizzando determinate tecniche CSS e concetti DOM JavaScript.

Le immagini possono essere un modo utile per trasmettere informazioni in modo visivamente accattivante su una pagina web. Sono anche utili per aggiungere altri effetti coinvolgenti come a semplice galleria di immagini.

Puoi aggiungere un suggerimento su un'immagine in HTML utilizzando CSS e JavaScript.

instagram viewer

Il codice utilizzato in questo progetto è disponibile in this Repository GitHub con licenza MIT.

  1. In un nuovo file chiamato index.html, aggiungi la struttura di base di un file HTML:
    html>
    <html>
    <Testa>
    <titolo>Esempio di descrizione comando immaginetitolo>
    Testa>
    <corpo>
    corpo>
    html>
  2. All'interno del tag body, aggiungi un contenitore div. Questo div includerà sia l'immagine che gli elementi tooltip:
    <divclasse="contenitore">
    div>
  3. All'interno del contenitore, aggiungi un'immagine. Assicurati che un'immagine con un nome file corrispondente sia all'interno della stessa cartella del tuo file HTML:
    <immsrc="immagine.jpg"classe="Immagine"altezza="420"larghezza="840"alt="La tua immagine">
  4. Sotto l'immagine, aggiungi un div per rappresentare il tooltip:
    <divclasse="descrizione comando">div>
  5. Nel tag head, aggiungi un tag style. All'interno del tag style, aggiungi uno stile per il contenitore dell'immagine e il tooltip:
    <stile>
    .contenitore {
    posizione: parente;
    Schermo: blocco in linea;
     }

    .tooltip {
    posizione: assoluto;
    Sinistra: 0;
    Schermo: nessuno;
    imbottitura: 5px;
    colore di sfondo: #000;
    colore: #F F F;
    dimensione del font: 12px;
     }
    stile>
  6. Crea un nuovo tag script nella parte inferiore del tag body:
    <corpo>
     Il contenuto della tua pagina web qui 
    <copione>
    copione>
    corpo>
  7. All'interno del tag dello script, utilizzare il selettore DOM funzione, querySelector, per ottenere gli elementi HTML dell'immagine e il tooltip:
    cost immagine = documento.querySelector('.Immagine');
    cost tooltip = documento.querySelector('.tooltip');
  8. Aggiungi un listener di eventi per il passaggio del mouse evento. Questa funzione verrà eseguita quando passi il mouse sopra l'immagine. Quando ciò si verifica, sullo schermo verrà visualizzato il suggerimento:
    image.addEventListener('passaggio del mouse', () => {
     tooltip.style.display = 'bloccare';
    });
  9. Aggiungi un listener di eventi per il mouseout evento. Questa funzione verrà eseguita quando il mouse lascia l'immagine. Quando ciò accade, il tooltip scomparirà dallo schermo:
    image.addEventListener('mouse fuori', () => {
     tooltip.style.display = 'nessuno';
    });
  10. Apri il file index.html in qualsiasi browser e passa il mouse sopra l'immagine per visualizzare il suggerimento:

Come calcolare e visualizzare le coordinate dei pixel X e Y dell'immagine

Ora che il tooltip è visibile sulla pagina, cambia la sua posizione e il suo testo per visualizzare le coordinate X e Y del mouse.

  1. Modifica lo stile CSS del tooltip, in modo che il tooltip non sia visibile prima di passare il mouse sopra l'immagine. Questo ti impedisce di vedere il tooltip nella parte inferiore dell'immagine prima di saltare alla posizione del cursore:
    .tooltip {
    posizione: assoluto;
    superiore: -30 pixel;
    Sinistra: 0;
    Schermo: nessuno;
    imbottitura: 5px;
    colore di sfondo: #000;
    colore: #F F F;
    dimensione del font: 12px;
    }
  2. All'interno del tag script, aggiungi un altro listener di eventi, per ascoltare il file mousemove evento. Questa funzione verrà eseguita continuamente ogni volta che il mouse passa sopra un nuovo pixel. Aggiungi il parametro dell'evento, che inserirà le informazioni sul file mousemove evento nella funzione. Queste informazioni includono le coordinate dell'immagine in cui si trova il mouse in quel punto:
    image.addEventListener('mossa del mouse', (e) => {
    });
  3. Usando l'evento, cambia la posizione orizzontale del tooltip usando la proprietà CSS sinistra. Ogni volta che il mouse si sposta, questo aggiornerà il valore in modo che corrisponda alle coordinate X del cursore, memorizzate nel file clienteX variabile:
    tooltip.style.left = e.clientX + 'px';
  4. Modificare la posizione verticale del tooltip utilizzando la proprietà CSS superiore. ClienteY rappresenta le coordinate y del mouse. IL offsetAltezza La proprietà include eventuali spazi interni o bordi aggiuntivi all'interno del tooltip. Dal momento che non vuoi che il tooltip si trovi direttamente dove si trova il cursore, puoi rimuovere altri 10 px dalla posizione:
    tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px';
  5. Modificare il contenuto del testo della descrizione comandi per visualizzare le coordinate:
    tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;
  6. Apri il file index.html in qualsiasi browser e passa il mouse sopra l'immagine per visualizzare il suggerimento aggiornato:

Aggiunta di effetti alla tua pagina web interattiva

Ora sai come aggiungere un suggerimento interattivo su un'immagine nella tua pagina web. Puoi continuare a migliorare le tue abilità HTML e CSS sperimentando altri interessanti effetti HTML.