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

1. Ändern Sie die Größe des HTML-Bildes beim Hover
2. Verwenden Sie HTML und JavaScript, um das Bild zu vergrößern, wenn der Benutzer auf das Bild klickt

In diesem Artikel lernen wir, das HTML-Bild zu vergrößern, wenn Benutzer auf ein bestimmtes Bild klicken oder den Mauszeiger darüber bewegen.

Als Benutzer der Bildergalerie hätten Sie die Benutzeroberfläche gesehen, auf der sich mehrere Bilder befinden, und wenn Sie mit der Maus über ein einzelnes Bild fahren, wird es vergrößert. Wir werden in diesem Artikel verschiedene Methoden kennenlernen, um Bilder zu vergrößern, indem Sie mit der Maus darüber fahren oder klicken.

Ändern Sie die Größe des HTML-Bildes beim Hover

Wir können ein bestimmtes Bild mit HTML und CSS vergrößern, wenn der Benutzer mit der Maus darüber fährt. Im folgenden Beispiel haben wir fünf img-Elemente mit unterschiedlichen Werten des src-Attributs erstellt.

Hier können Benutzer sehen, dass alle Bilder inline in derselben Zeile angezeigt werden.

Wir haben auch CSS-Styling verwendet, um die Höhe und Breite jedes Bildelements festzulegen. Wir haben jedem Element eine Höhe und Breite von 200 Pixel zugewiesen.

Wir haben auch einen Rand von 10 Pixeln für jedes img-Element festgelegt, um Platz um das Bild herum zu lassen.

Wir haben die CSS-Eigenschaft : hover verwendet, um den Hover-Effekt hinzuzufügen. Innerhalb des CSS-Blocks img: hover haben wir eine Höhe und Breite von 400 Pixel für das Bildelement festgelegt, was bedeutet, dass jedes Mal, wenn Benutzer mit der Maus über das Bild fahren, es um das Zweifache skaliert wird.

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 dieses Bildes zunimmt, wenn wir den Mauszeiger über ein Bild bewegen.

Außerdem können wir die CSS-Eigenschaft transform verwenden, um das HTML-Bild zu vergrößern. Die Eigenschaft transform ermöglicht es uns, jedes HTML-Element zu transformieren, und ein Bild ist eines davon.

Das bedeutet, dass wir das Bild skalieren, drehen, übersetzen usw. können. Hier wenden wir die Skalierung auf das Bild an, um es zu vergrößern.

Im folgenden Beispielcode haben wir den CSS-Stil transform: scale(2) innerhalb des img:hover-Blocks hinzugefügt. Es multipliziert die Höhe und Breite des Bildes mit 2, wenn der Benutzer mit der Maus über das jeweilige Bild fährt.

Die transform: scale(multifactor) nimmt den einzelnen Parameter namens multifactor. Es erhöht also die Größe des Elements um Multifaktor.

In unserem Fall haben wir die 2 als Wert für Multifaktor verwendet, sodass das Bild um das Doppelte vergrößert wird.

Beispielcode:

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

Verwenden Sie HTML und JavaScript, um das Bild zu vergrößern, wenn der Benutzer auf das Bild klickt

Wir können HTML und JavaScript verwenden, um das Bild zu vergrößern, wenn der Benutzer auf das Bild klickt. In diesem Beispiel haben wir fünf HTML-Bilder erstellt und jedem img-Element height und width als Attribut zugewiesen.

In JavaScript haben wir auf alle img-Elemente über den Tag-Namen zugegriffen, der in der Variablen images gespeichert ist. Danach haben wir das Array images durchlaufen und jedem Bild die Methode addEventListener hinzugefügt.

Die Methode addEventListener akzeptiert zwei Argumente; Das erste Argument ist ein Ereignistyp und ein weiteres die Callback-Funktion. Hier haben wir das Ereignis click als erstes Argument verwendet, sodass die Callback-Funktion immer dann ausgeführt wird, wenn Benutzer auf ein beliebiges Bildelement klicken.

Wir können den Stil des Elements img mit der Eigenschaft element.style ändern. Hier haben wir die Eigenschaft image[i].style.transfrom in JavaScript verwendet, um die CSS-Eigenschaft transform auf das Bildelement anzuwenden.

Innerhalb der Callback-Funktion iterieren wir durch das Array images, um die Größe der anderen Bilder mit Ausnahme des angeklickten Bildes zu ändern. Als nächstes ändern wir den transform-Stil für das angeklickte Element in scale(1.3).

Außerdem haben wir dem angeklickten Element für ein besseres Aussehen mit JavaScript einen Rand hinzugefügt.

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 (var 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)';
      }
    }
    this.style.transform = 'scale(1.3)';
    this.style.margin = '40px'
  });
}

Ausgang:

In der obigen Ausgabe können Benutzer beobachten, dass, wenn wir auf das Bild klicken, es vergrößert wird und andere Bilder auf ihre ursprüngliche Größe geändert werden. Es gibt auch keinen Effekt, wenn wir mit der Maus über das Bild fahren.

Wir haben in diesem Artikel drei verschiedene Methoden zum Vergrößern von Bildern kennengelernt. Die ersten beiden Methoden verwenden die CSS-Eigenschaft : hover und die dritte die JavaScript-Methode addEventListener.