Hier habe ich einmal vieles des Gelernten zusammengefasst.
Es geht darum, ein kleines Bild zu vergrößern und wieder zu verkleinern.

Dazu verwende ich diesmal onClick und onDblClick.

Außerdem soll das Bild selbst der "Schalter" sein.

Klicke einmal auf das Bild. Mit Doppelklick wird es wieder kleiner.

Wie funktioniert's?

Diesmal findest du im img-TAG 2 Event-Handler: mit onClick wird die Funktion groesse() aufgerufen und ihr wird ein Wert an die Variablen 'h' (=Höhe) übergeben. =>: Das Bild wird größer.

Durch onDblClick wird die alte Größe wieder hergestellt.

Da sich die Eventhandler (onClick/onDblClick) in dem Tag befinden, der reagieren soll, nämich <img>, können wir die Variable this verwenden.
this steht als zweite Variable in den Rundklammern des Funktionsaufrufs durch
onClick="groesse('300',this)" und onDblClick="groesse('148',this)".

Dann heißt der gesamte img-TAG:
<img src="DOG.JPG" onClick="groesse('300',this)" onDblClick="groesse('148',this)">

Das ist alles, was du für jedes Bild einer Galerie brauchst! Schön, dass es this gibt!

Hier der Vollständigkeit halber der Code der Funktion. Ich hab ihn diesmal ganz eng zusammengerückt, um zu zeigen, wie klein ein Programm sein kann.

function groesse(h,dieses){dieses.style.height=h}

Ach ja, hab ich vergessen:
Du brauchst für die Größenänderung nur einen Wert angeben - entweder height oder width.
Das Bild ändert sich dann proportional, d. h, Höhe und Breite ändern sich gleichmäßig.
Willst du das Bild verzerren, musst du beide Größen angeben.

Kurztest:
Welches Style-Attibut ändert die Höhe eines Bildes?
(.style.????=''
Welches Style-Attribut ändert die Breite eines Bildes?
(.style.????=''