Maison > Article > interface Web > Comment créer un lien cliquable pour une division HTML entière contenant une image ?

Comment créer un lien cliquable pour une division HTML entière contenant une image ?

Linda Hamiltonoriginal: 2024-11-01 00:37:02182parcourir

How to Create a Clickable Link for an Entire HTML Div Containing an Image?

Comment créer un lien d'ancrage pour un élément div HTML entier

En HTML/CSS, la création d'un lien pour un élément div entier peut être réalisée par différentes approches. L'exigence spécifiée dans la requête est de créer un lien pour un div contenant une image centrée verticalement dans son div parent. Bien que la solution initiale impliquant des divs imbriqués et des styles en ligne puisse sembler réalisable, elle entre en conflit avec les normes de codage HTML valides.

Pour résoudre le problème, plusieurs options sont disponibles :

1. Utilisation d'un élément de bloc en ligne dans une balise d'ancrage

<br><a href="https://www.php.cn/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9" rel="nofollow" target="_blank"></a></p>
<pre class="brush:php;toolbar:false"><span style="display: inline-block; height: 235px; width: 184px; border: 2px solid black; text-align: center;">
    <img src="myimage.jpg" height="62" width="180">
</span>

Cette méthode garantit que l'image reste centrée verticalement dans le div parent, qui est désormais un élément de bloc en ligne enfermé dans une balise d'ancrage.

2. Utilisation de JavaScript pour la gestion des clics

<br><div id="parentdivimage" style="cursor: pointer;" onclick="window.location='https://www.php.cn/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9';"></p>
<pre class="brush:php;toolbar:false"><div id="childdivimage" style="position: absolute; top: 50%; height: 62px; margin-top: -31px;">
    <img src="myimage.jpg" height="62" width="180">
</div>

Dans cette solution, le div parent est converti en un élément de niveau bloc qui répond aux clics de souris. Lorsque vous cliquez dessus, il utilise JavaScript pour rediriger le navigateur vers l'URL souhaitée.

3. Utilisez un DIV avec le style 'Cursor: Pointer' et la balise d'ancrage

<br><div style="cursor: pointer;"></p>
<pre class="brush:php;toolbar:false"><a href="https://www.php.cn/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9">
    <div style="height: 235px; width: 184px; border: 2px solid black; text-align: center;">
        <img src="myimage.jpg" height="62" width="180">
    </div>
</a>

< ;/div>
`

Dans cette approche, un deuxième div est introduit autour de la balise d'ancrage, qui reçoit un style de pointeur de curseur. Visuellement, elle fonctionne de manière similaire à la méthode inline-block, mais elle utilise une balise d'ancrage pour gérer le lien.

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!

JavaScript css html for while using pointer this location http issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment obtenir des transitions d'opacité fluides tout en modifiant brusquement l'affichage CSS ?Article suivant：Comment obtenir des transitions d'opacité fluides tout en modifiant brusquement l'affichage CSS ?

Articles Liés

Voir plus