Website-Lupe - (6) Bilder zoomen

  • Um ein Bild zu zoomen, können Sie einfach Hover verwenden. Damit werden die width- und height-Parameter auf höhere Werte gesetzt. Doch dieses Verfahren hat einen Haken. Schon bei geringer Vergrößerung werden die Bilder pixelig. Besser in solchen Fällen ist die bewährte Javascript-Methode: Originalbild und Vergrößerung vor der Darstellung der Seite laden und mit einem onMouse0ver die Bilder austauschen.

    Ansonsten habe ich hier noch eine Menge Text - Mit new Image() erzeugen Sie jeweils ein neues Bildobjekt und weisen dessen Eigenschaft .src den Namen des Bildes zu. Dabei wird das Bild zum Client übertragen. Im HTML-Dokument selbst hat man eine Bilddatei mit dem Namen infopic und mit den notwendigen Events. Schließlich sorgt noch eine weitere Zeile Javascript dafür, dass das Bild infopic bereits beim Laden der Seite das richtige Bild zugewiesen bekommt. Sobald Sie den Mauszeiger über das Bild führen, wird das Bild gegen das größere Exemplar getauscht. Das Layout im Browser passt sich automatisch an. Verschwindet die Maus wieder vom Bild, erscheint die kleinere Variante.