Mappe immagine HTML

Mappe Immagine Html



Spesso potresti aver visitato siti Web in cui potresti trovare un collegamento come questo: ' Visita il link per saperne di più ”. Di conseguenza, se fai clic su questo, verrai indirizzato a un sito Web diverso. Allo stesso modo, la funzione di mappatura delle immagini dell'HTML ci consente di aggiungere collegamenti cliccabili alle immagini. La pagina ci indirizzerà a un'altra fonte quando fai clic su quell'area specificata.

Questo post ti insegnerà:

Cosa sono le mappe immagine HTML?

La mappa immagine è un'immagine con aree che possono essere cliccate. Per creare una mappa immagine in HTML, il ' ” viene utilizzato l'elemento. Inoltre, uno o più “ I tag ” vengono aggiunti all'interno dell'elemento “” per specificare le aree.





Sintassi



La sintassi per specificare le mappe immagine in un documento HTML è indicata di seguito:



< imm src = 'immagini/img1.jpg' Tutto quanto = 'il computer portatile' usemap = '#clickspace' >

< carta geografica nome = 'spazio clic' >

< la zona forma = 'retto' coordinate = '224,37,422,312' href = 'laptop.html' >

< / carta geografica >

Il ' L'elemento ” è definito con i seguenti attributi:



  • “ src ” specifica il percorso dell'immagine.
  • “ Tutto quanto ' mostra un testo alternativo quando non è possibile caricare un'immagine.
  • “ usemap ” è specificato per rendere cliccabili le aree dell'immagine. Per creare un collegamento, il suo valore deve essere uguale alla classe o all'id dell'elemento “”.

Il ' L'elemento ” viene aggiunto con i seguenti attributi:

  • “ forma ” specifica la dimensione dell'area di un HTML “ elemento '.
  • “ coordinate L'attributo ” definisce le coordinate dell'area cliccabile.
  • “ href L'attributo ” definisce l'URL della fonte.

Come creare mappe immagine in un documento HTML?

Per creare una mappa immagine in un documento HTML, controlla le istruzioni fornite:



  • In HTML, aggiungi un '
    ” elemento e assegna una classe “ immagine-mappa ”.
  • All'interno di questo div, aggiungi un ' ” per aggiungere un'immagine associata agli attributi sopra discussi.
  • Quindi, aggiungi un codice HTML ' ” e assegnagli l'elemento “ clickspace ' nome.
  • Si noti che il ' usemap ” all'attributo viene assegnato il nome “ #clickspace ” indicando il “ nome ” attributo del tag “”.
  • Al suo interno, aggiungi il ' ” tag con gli attributi sopra indicati:
< div classe = 'mappa immagine' >

< imm src = 'immagini/img1.jpg' Tutto quanto = 'il computer portatile' usemap = '#clickspace' >

< carta geografica nome = 'spazio clic' >

< la zona forma = 'retto' coordinate = '224,37,422,312' href = 'laptop.html' >

< / carta geografica >

< / div >

Spostiamoci verso la sezione CSS per regolare le dimensioni dell'immagine.

Stile '
' in CSS

Utilizza il “ .immagine-mappa ” per accedere alla “

” e applica le seguenti proprietà CSS:

.immagine-mappa {

larghezza : 700 pixel;

margine: automobile;

}

Ecco la descrizione delle proprietà CSS citate:

  • Il ' larghezza La proprietà ” imposta la larghezza dell'elemento div.
  • Il ' margine La proprietà ” aggiunge più spazio intorno all'elemento.

Stile 'img' Elemento

.immagine-mappa img {

larghezza : 100 %;

}

Vedi, le coordinate dell'area specificate nel ' coordinate ” sono ora cliccabili:

Nella prossima sezione impareremo come collegare la mappa immagine a un'altra fonte.

Come creare una mappa immagine collegata ad un'altra pagina?

Crea un'altra pagina HTML con l'estensione ' .html ” seguendo i passaggi indicati di seguito:

  • Nel nostro caso gli diamo il nome “ laptop.html ”.
  • Aggiungi un elemento div e assegnagli una classe ' laptop-img ”.
  • Quindi, posiziona un'immagine usando il ' ” e associare l'elemento “ src ' e ' larghezza ' attributi.
  • Quindi, specifica un paragrafo usando il '

    elemento ':

< div classe = 'laptop-img' >

< imm src = '/immagini/laptop.jpg' larghezza = '400px' >

< p >Un laptop è un computer portatile che può essere spostato e utilizzato in una varietà di impostazioni.< / p >

< / div >

In CSS, specifica le seguenti proprietà CSS al ' laptop-img ' classe:

.laptop-img {

larghezza : 500px;

margine: automatico;

}

Produzione

Ora collegheremo il ' laptop.html ” pagina a un'immagine “ ” elemento della prima pagina. Per fare ciò, specificare l'URL della pagina in ' href ” dell'elemento “ ” come mostrato di seguito:

< la zona forma = 'retto' coordinate = '310,57,590,470' href = 'laptop.html' >

Produzione

Abbiamo appreso con successo cosa sono le mappe immagine e come sono collegate ad altre fonti.

Conclusione

L'HTML “ L'elemento ” viene utilizzato per creare una mappa immagine o un'immagine con aree cliccabili. Per definire le aree cliccabili dell'immagine, uno o più ' I tag ” vengono aggiunti all'interno dell'elemento “”. Inoltre, gli attributi associati al tag “ ” sono “ forma ”, “ coordinate ', e ' href ”. Questo post ha illustrato come creare mappe immagine HTML con un esempio.

Altro

Categoria

Messaggi Popolari

Come modificare il file host su Linux Mint 21

Come ottenere variabili d'ambiente in Java?

Valori letterali del modello JavaScript (stringhe del modello)

Come modificare il motore di ricerca predefinito su iPhone

Mirror del registro Docker

Come installare Windows 11 (macchina virtuale) su VirtualBox?

Come uscire dalla navigazione su Google Maps Android

Che cos'è New-Object (Microsoft.PowerShell.Utility)?

Come usare scanf() in C++

Che cos'è Amazon Simple Email Service e come utilizzarlo?

Che cos'è il modello di avvio HTML?

Multi-get di Elasticsearch

Come utilizzare il parser di output in LangChain?

Qual è la differenza tra AWS Backup e Snapshot?

Qual è la parola chiave gamma in Golang

Come utilizzare il metodo 'clamp()' in PyTorch?

Crea GIF: installa Peek su Linux Mint 21

Come utilizzare più immagini di sfondo con i CSS

Come distribuire HAProxy in un contenitore Docker

Come utilizzare la condivisione nelle vicinanze per Windows su Android?