Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Linda Hamilton
Freigeben: 2024-11-01 00:37:02
Original
200 Leute haben es durchsucht

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>
<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>
Nach dem Login kopieren


`

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>
<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>
Nach dem Login kopieren


`

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>
<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>
Nach dem Login kopieren

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

Quelle:php.cn
Vorheriger Artikel:Wie erreicht man sanfte Deckkraftübergänge bei abrupter Änderung der CSS-Anzeige? Nächster Artikel:Warum unterscheiden sich die Browser-ClientHeight- und ClientWidth-Werte?
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!