Mappe di immagine HTML
Questo post ti insegnerà:
- Quali sono le mappe dell'immagine HTML?
- Come creare mappe di immagini nel documento HTML?
- Come creare una mappa dell'immagine collegata ad altre pagina?
Quali sono le mappe dell'immagine HTML?
La mappa dell'immagine è un'immagine con aree che possono essere cliccate. Per creare una mappa delle immagini in HTML, il “"L'elemento viene utilizzato. Inoltre, uno o più "I tag vengono aggiunti all'interno dell'elemento "" per specificare le aree.
Sintassi
La sintassi per specificare le mappe delle immagini in un documento HTML è menzionata di seguito:
IL ""L'elemento è definito con i seguenti attributi:
- "src"Specifica il percorso dell'immagine.
- "Al"Mostra un testo alternativo quando un'immagine non può caricare.
- "usemap"È specificato per rendere cliccabile 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.
- "coords"L'attributo definisce le coordinate dell'area cliccabile.
- "Href"Attributo ha definito l'URL della fonte.
Come creare mappe di immagini nel documento HTML?
Per creare una mappa delle immagini in un documento HTML, controlla le istruzioni fornite:
- In HTML, aggiungi un ""Elemento e assegnare una classe"mappa di immagine".
- All'interno di questo div, aggiungi un ""Elemento per aggiungere un'immagine associata agli attributi sopra disclusivi.
- Quindi, aggiungi un html ""Elemento e assegnarlo il"Clickspace" nome.
- Nota che il "usemap"Attributo viene assegnato il nome"#Clickspace"Indicando il"nome"Attributo del tag" ".
- Al suo interno, aggiungi il ""Tag con gli attributi sopra indicati:
Passiamo verso la sezione CSS per regolare le dimensioni dell'immagine.
Stile "" in CSS
Utilizzare il ".mappa di immagine"Classe per accedere al""Elemento e applica le seguenti proprietà CSS:
.immagine-maplarghezza: 700px;
Margine: auto;
Ecco la descrizione delle proprietà CSS menzionate:
- IL "larghezza"La proprietà imposta la larghezza dell'elemento div.
- IL "margine"La proprietà aggiunge più spazio attorno all'elemento.
Elemento "img" di stile
.image-map imglarghezza: 100%;
Vedi, le coordinate dell'area specificate nel "coords"L'attributo è ora cliccabile:
Nella sezione successiva, impareremo come collegare la mappa dell'immagine a un'altra fonte.
Come creare una mappa dell'immagine collegata ad altre pagina?
Crea un'altra pagina HTML con l'estensione ".html"Seguendo i passaggi menzionati di seguito:
- Nel nostro caso, gli diamo il nome "computer portatile.html".
- Aggiungi un elemento div e assegnalo una classe "Laptop-img".
- Quindi, posiziona un'immagine usando il “"Elemento e associare il"src" E "larghezza"Attributi.
- Successivamente, specificare un paragrafo utilizzando il ""Elemento:
Un laptop è un computer portatile che può essere spostato e utilizzato in una varietà di impostazioni.
In CSS, specificare le seguenti proprietà CSS al "Laptop-img" classe:
.Laptop-imglarghezza: 500px;
Margine: auto;
Produzione
Ora collegheremo il "computer portatile.html”Pagina a un'immagine""Elemento della prima pagina. Per fare ciò, specificare l'URL della pagina al "Href"Attributo dell'elemento" "come mostrato di seguito:
Produzione
Abbiamo imparato con successo quali sono le mappe delle immagini e come sono collegate ad altre fonti.
Conclusione
L'HTML ""L'elemento viene utilizzato per creare una mappa dell'immagine o un'immagine con aree cliccabili. Per definire le aree cliccabili dell'immagine, una o più "I tag vengono aggiunti all'interno dell'elemento "". Inoltre, gli attributi associati al tag "" sono "forma","coords", E "Href". Questo post ha illustrato come creare mappe di immagini HTML con un esempio.