Klicken oder bewegen Sie den Mauszeiger auf das Bild, um es in HTML zu vergrößern

In diesem Artikel lernen wir, wie man das HTML-Bild vergrößert, wenn der Benutzer auf ein bestimmtes Bild klickt oder den Mauszeiger darüber bewegt.

Als Benutzer einer Bildergalerie kennen Sie die Oberfläche, auf der sich mehrere Bilder befinden und sich ein einzelnes Bild vergrößert, wenn man den Mauszeiger darüber bewegt. In diesem Artikel lernen wir verschiedene Methoden kennen, um Bilder durch Darüberbewegen oder Anklicken zu vergrößern.

Die Größe des HTML-Bildes beim Hover ändern

Wir können ein bestimmtes Bild mit HTML und CSS vergrößern, wenn der Benutzer den Mauszeiger darüber bewegt. Im folgenden Beispiel haben wir fünf img-Elemente mit unterschiedlichen Werten des Attributs src erstellt. Alle Bilder werden nebeneinander in derselben Zeile angezeigt.

Außerdem haben wir mit CSS die Höhe und Breite jedes Bildelements festgelegt: eine Höhe und Breite von 200px für jedes Element und einen Abstand (margin) von 10px für jedes img-Element, um Raum um das Bild zu lassen.

Wir verwenden die CSS-Pseudoklasse :hover, um den Hover-Effekt hinzuzufügen. Innerhalb des Blocks img:hover setzen wir eine Höhe und Breite von 400px für das Bildelement, sodass es auf das Doppelte skaliert wird, sobald der Benutzer den Mauszeiger darüber bewegt.

Beispielcode:

<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/DelftStack/logo.png"/>
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/DelftStack/logo.png"/>
<img src="/img/DelftStack/logo.png"/>

img {
    height: 200px;
    width: 200px;
    margin: 10px;
}
img:hover{
    height: 400px;
    width: 400px;
}

In der obigen Ausgabe können Benutzer sehen, dass die Größe eines Bildes zunimmt, wenn man den Mauszeiger darüber bewegt.

Wir können auch die CSS-Eigenschaft transform verwenden, um das HTML-Bild zu vergrößern. Die Eigenschaft transform erlaubt es uns, jedes HTML-Element zu transformieren — zu skalieren, zu drehen, zu verschieben und so weiter — und ein Bild ist eines davon. Hier wenden wir eine Skalierung an, um das Bild zu vergrößern.

Im folgenden Beispielcode fügen wir den CSS-Stil transform: scale(2) innerhalb des Blocks img:hover hinzu. Er multipliziert die Höhe und Breite des Bildes mit 2, wenn der Benutzer den Mauszeiger über das Bild bewegt. Die Funktion transform: scale(factor) nimmt einen einzigen Parameter, den Faktor: Das Element wächst um diesen Faktor, der Wert 2 vergrößert das Bild also auf das Doppelte.

Beispielcode:

img:hover{
    transform:scale(2);
}

HTML und JavaScript verwenden, um das Bild beim Anklicken zu vergrößern

Wir können HTML und JavaScript verwenden, um das Bild zu vergrößern, wenn der Benutzer darauf klickt. In diesem Beispiel haben wir fünf HTML-Bilder erstellt und die Höhe und Breite jedes img-Elements als Attribute festgelegt.

In JavaScript greifen wir über den Tagnamen auf alle img-Elemente zu und speichern sie in der Variablen images. Dann durchlaufen wir die Bilder und fügen jedem mit der Methode addEventListener einen Klick-Handler hinzu. Diese Methode nimmt zwei Argumente: den Ereignistyp (hier click) und die Callback-Funktion, die ausgeführt wird, sobald der Benutzer auf dieses Bild klickt.

Innerhalb des Callbacks durchlaufen wir das Array images erneut und setzen jedes Bild außer dem angeklickten zurück — transform auf scale(1) und den zusätzlichen Abstand entfernt —, sodass immer nur ein Bild vergrößert ist. Dann setzen wir den transform-Stil des angeklickten Bildes über this.style.transform auf scale(1.3) und geben ihm für ein besseres Aussehen einen Abstand von 40px.

Beachten Sie, dass die Schleifenvariable mit let deklariert ist: Mit var würden alle Handler denselben Endwert des Schleifenindex teilen, und das Zurücksetzen würde das angeklickte Bild nicht mehr ausnehmen.

Beispielcode:

<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>

var images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
  images[i].addEventListener('click', function() {
    for (var j = 0; j < images.length; j++) {
      if (i != j) {
        images[j].style.transform = 'scale(1)';
        images[j].style.margin = '';
      }
    }
    this.style.transform = 'scale(1.3)';
    this.style.margin = '40px';
  });
}

Ausgabe:

In der obigen Ausgabe können Benutzer beobachten, dass sich ein Bild beim Anklicken vergrößert und die anderen Bilder auf ihre ursprüngliche Größe zurückkehren. Beim Darüberbewegen des Mauszeigers gibt es keinen Effekt.

Fazit

Wir haben in diesem Artikel drei verschiedene Methoden zum Vergrößern von Bildern kennengelernt. Die ersten beiden Methoden verwenden die CSS-Pseudoklasse :hover — geeignet für Galerien, in denen eine schnelle Vorschau beim Hover ausreicht — und die dritte verwendet die JavaScript-Methode addEventListener, die sich für eine bewusste Klick-zum-Vergrößern-Interaktion eignet, bei der immer nur ein Bild vergrößert bleibt.