Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich einen anklickbaren Link für ein gesamtes HTML-Div, das ein Bild enthält?

Wie erstelle ich einen anklickbaren Link für ein gesamtes HTML-Div, das ein Bild enthält?

Linda Hamilton
Linda HamiltonOriginal
2024-11-01 00:37:02182Durchsuche

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

So erstellen Sie einen Ankerlink für ein gesamtes HTML-Div

In HTML/CSS kann das Erstellen eines Links für ein gesamtes div-Element durch verschiedene Ansätze erreicht werden. Die in der Abfrage angegebene Anforderung besteht darin, einen Link für ein Div zu erstellen, das ein Bild enthält, das innerhalb seines übergeordneten Divs vertikal zentriert ist. Während die anfängliche Lösung mit verschachtelten Divs und Inline-Stilen machbar erscheint, steht sie im Widerspruch zu gültigen HTML-Codierungsstandards.

Um das Problem zu beheben, stehen mehrere Optionen zur Verfügung:

1. Verwenden eines Inline-Block-Elements innerhalb eines Anker-Tags

`

<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>


`

Diese Methode stellt sicher, dass das Bild innerhalb des übergeordneten Div vertikal zentriert bleibt, das jetzt ein Inline-Block-Element ist, das in einem Ankertag eingeschlossen ist.

2. JavaScript für die Klickverarbeitung verwenden

`

<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>


`

In dieser Lösung wird das übergeordnete Div in ein Element auf Blockebene umgewandelt, das auf Mausklicks reagiert. Beim Anklicken wird JavaScript verwendet, um den Browser zur gewünschten URL umzuleiten.

3. Verwenden Sie ein DIV mit dem Stil „Cursor: Zeiger“ und dem Anker-Tag

`

<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>
`

Bei diesem Ansatz wird ein zweites Div um das Ankertag herum eingeführt, das einen Cursor-Zeiger-Stil erhält. Optisch funktioniert es ähnlich wie die Inline-Block-Methode, verwendet jedoch ein Ankertag, um den Link zu verarbeiten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen anklickbaren Link für ein gesamtes HTML-Div, das ein Bild enthält?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Wie erreicht man sanfte Deckkraftübergänge bei abrupter Änderung der CSS-Anzeige?Nächster Artikel:Wie erreicht man sanfte Deckkraftübergänge bei abrupter Änderung der CSS-Anzeige?

In Verbindung stehende Artikel

Mehr sehen