Maison > Article > interface Web > Comment ancrer un élément à la bonne position dans une image responsive ?
Comment ancrer un élément à la bonne position dans une image responsive ?
- PHPzavant
- 2023-09-22 18:09:06977parcourir
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 ![Comment ancrer un élément à la bonne position dans une image responsive ?]()
Pour insérer une image dans une page Web ou un site Web, utilisez la balise HTML Grammaire
Voici la syntaxe de la balise img
<img src="" alt="" style="max-width:90%" height="">Pour en savoir plus sur l'ancrage des éléments au bon emplacement sur une image responsive, consultez les exemples ci-dessous
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="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg" 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="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" 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>
Lorsque le script est exécuté, il générera une sortie contenant l'image téléchargée sur la page Web et le lien hypertexte correspondant ajouté au bas de l'image de réponse. 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="https://www.math-english.com/media/dices/two-dices2.png" 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>
Lorsque vous exécutez le script ci-dessus, une fenêtre de sortie apparaîtra montrant l'image téléchargée sur la page Web et les hyperliens attachés des deux côtés de l'image, avec CSS appliqué dans les hyperliens. 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!