interface Web
tutoriel HTML
Comment ancrer un élément à la bonne position dans une image responsive ?
Comment ancrer un élément à la bonne position dans une image responsive ?
Placer les ancres au bon endroit sur les images responsives est devenu plus important de nos jours. Parce que nous rencontrons de nombreuses publicités dans notre vie quotidienne, si l'ancre n'est pas placée correctement sous l'image responsive, il sera plus difficile pour les utilisateurs de comprendre la page Web.
Nous utilisons CSS et HTML pour ancrer les éléments à la bonne position sur l'image réactive. Avant de plonger dans cet article pour mieux comprendre, jetons un coup d'œil rapide aux ancres et aux balises d'image en HTML.
Balises d'ancrage en HTML
Grâce à son attribut href, l'élément HTML (ou élément d'ancrage) génère un lien hypertexte vers une page Web, un fichier, une adresse e-mail, un emplacement sur la même page ou tout autre contenu pouvant être adressé par une URL.
Chaque doit contenir un texte décrivant la destination finale du lien. Lorsque le focus est sur l'élément , appuyer sur Entrée active l'attribut href s'il existe.
Grammaire
Voici la syntaxe de la balise d'ancrage en HTML
<a href = "link"> Link Name </a>
Balise HTML 
Pour insérer une image dans une page Web ou un site Web, utilisez la balise HTML 
Dans les sites Web modernes, les images sont liées aux pages Web à l'aide de l'élément , qui contient l'espace réservé à l'image. Cela empêche les sites Web d'ajouter des images directement aux pages Web. Grammaire
Voici la syntaxe de la balise img
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg" class="lazy" alt="" style="max-width:90%" height="">
Exemple
Ci-dessous, nous utilisons CSS pour ancrer l'élément à la bonne position sur l'image responsive.
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
display: flex;
width: 60%;
margin: auto;
}
.type {
text-align: center;
}
.tutorial img {
max-width: 90%;
display: block;
}
</style>
<div class="tutorial">
<div class="type">
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg" class="lazy" alt="Comment ancrer un élément à la bonne position dans une image responsive ?" >
<a href="https://www.tutorialspoint.com/java/index.htm">Java Tutorial</a>
</div>
<div class="type">
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" class="lazy" alt="Comment ancrer un élément à la bonne position dans une image responsive ?" >
<a href="https://www.tutorialspoint.com/html/index.htm">HTML Tutorial</a>
</div>
</div>
</body>
</html>Exemple
Considérons l'exemple suivant où nous plaçons le point d'ancrage d'un élément au bon emplacement sur une image responsive.
<!DOCTYPE html>
<html>
<body>
<style>
#tutorial{
float:left;
position: relative;
}
#tutorial img {
max-width: 100%;
display: inline-block;
}
a.link1{
height:15%;
width:15%;
position: absolute;
top:60%; left:10%;
display:block;
background:#00FF00 ;
}
a.link2{
height:15%;
width:15%;
position: absolute;
top:50%;
left:76%;
display: block;
background:#FF0000;
}
</style>
<div id="tutorial">
<div>
<img src="/static/imghw/default1.png" data-src="https://www.math-english.com/media/dices/two-dices2.png" class="lazy" alt="Comment ancrer un élément à la bonne position dans une image responsive ?" >
</div>
<a href="https://www.tutorialspoint.com/html/index.htm" class="link1">HTML</a>
<a href="https://www.tutorialspoint.com/java/index.htm" class="link2">JAVA</a>
</div>
</body>
</html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404?
Apr 04, 2025 pm 11:54 PM
GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...
