Comment créer un lien cliquable pour une division HTML entière contenant une image ?-tutoriel CSS-php.cn

Table des matières

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

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

2. Utilisation de JavaScript pour la gestion des clics

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

Maison

interface Web

tutoriel CSS

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

Linda Hamilton

Nov 01, 2024 am 12:37 AM

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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>

Copier après la connexion

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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>

Copier après la connexion

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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>

Copier après la connexion

< ;/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!

Déclaration de ce site Web

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