Ce billet vous apprendra :
- Que sont les images cliquables HTML ?
- Comment créer des images cliquables dans un document HTML ?
- Comment créer une image cliquable liée à une autre page ?
Que sont les images cliquables HTML ?
L'image cartographique est une image avec des zones sur lesquelles il est possible de cliquer. Pour créer une image cliquable en HTML, le '
Syntaxe
La syntaxe pour spécifier les images cliquables dans un document HTML est mentionnée ci-dessous :
< image src = 'images/img1.jpg' tout = 'ordinateur portable' usemap = '#clickspace' >
< carte Nom = 'espace de clic' >
< région forme = 'rectifier' coordonnées = '224,37,422,312' href = 'portable.html' >
< / carte >
Les '
- ' src ” spécifie le chemin de l'image.
- ' tout ” affiche un texte alternatif lorsqu'une image ne peut pas être chargée.
- ' usemap ” est spécifié pour rendre les zones d'image cliquables. Pour faire un lien, sa valeur doit être la même que la classe ou l'id de l'élément «
Les '
- ' forme ' spécifie la taille de la zone d'un HTML '
' élément. - ' coordonnées ” définit les coordonnées de la zone cliquable.
- ' href ” L'attribut définit l'URL de la source.
Comment créer des images cliquables dans un document HTML ?
Pour créer une image cliquable dans un document HTML, consultez les instructions données :
- En HTML, ajoutez un ' ” élément, et assignez une classe “ carte-image ”.
- Dans cette div, ajoutez un '
” pour ajouter une image associée aux attributs décrits ci-dessus. - Ensuite, ajoutez un HTML '
» et attribuez-lui l'élément « espace de clic ' Nom. - Notez que le ' usemap ” l'attribut reçoit le nom “ #clickspace » pointant vers le « Nom » attribut de la balise «
- À l'intérieur, ajoutez le '
< div classer = 'image-carte' >” tag avec les attributs indiqués ci-dessus :
< image src = 'images/img1.jpg' tout = 'ordinateur portable' usemap = '#clickspace' >
< carte Nom = 'espace de clic' >
< région forme = 'rectifier' coordonnées = '224,37,422,312' href = 'portable.html' >
< / carte >
< / div >Passons à la section CSS pour ajuster la taille de l'image.
Style '
' en CSSUtilisez le ' .image-map ' classe pour accéder à la '
” et appliquez les propriétés CSS suivantes : .image-map {
largeur : 700 pixels ;
marge : voiture ;
}Voici la description des propriétés CSS mentionnées :
- Les ' largeur ” La propriété définit la largeur de l'élément div.
- Les ' marge ” propriété ajoute plus de place autour de l'élément.
Élément de style 'img'
.image-map img {
largeur : 100 % ;
}Voir, les coordonnées de la zone spécifiées dans le ' coordonnées ” sont désormais cliquables :
Dans la section suivante, nous apprendrons comment lier l'image cliquable à une autre source.
Comment créer une image cliquable liée à une autre page ?
Créez une autre page HTML avec l'extension ' .html ” en suivant les étapes mentionnées ci-dessous :
- Dans notre cas, nous lui donnons le nom ' ordinateur portable.html ”.
- Ajoutez un élément div et attribuez-lui une classe ' ordinateur portable-img ”.
- Ensuite, placez une image à l'aide de la touche '
” et associez le “ src ' et ' largeur ' les attributs. - Ensuite, spécifiez un paragraphe en utilisant le ' ' élément:
< image src = '/images/portable.jpg' largeur = '400px' >
< p >Un ordinateur portable est un ordinateur portable qui peut être déplacé et utilisé dans une variété d'environnements.< / p >
< / div >En CSS, spécifiez les propriétés CSS suivantes au ' ordinateur portable-img ' classer:
.ordinateur portable-img {
largeur : 500 pixels ;
marge : voiture ;
}Sortir
Maintenant, nous allons lier le ' ordinateur portable.html « page vers une image »
< région forme = 'rectifier' coordonnées = '310,57,590,470' href = 'portable.html' >” élément de la première page. Pour cela, indiquez l'URL de la page au ' href ” de l'élément “ ” comme indiqué ci-dessous : Sortir
Nous avons appris avec succès ce que sont les images cliquables et comment elles sont liées à d'autres sources.
Conclusion
Le HTML '
” est utilisé pour créer une image cliquable ou une image avec des zones cliquables. Pour définir les zones cliquables de l'image, un ou plusieurs ' ” les balises sont ajoutées dans l'élément “ - Dans cette div, ajoutez un '