JavaScript - Bild mit dem Mausrad vergrößern


<style>

img#bild {
 
displayBlock;
 
marginAuto;
 
width444px;
 cursor: n-resize;
}
</
style>

<
script>
// Bild mit dem Mausrad vergrößern

var max 1;
var 
mor 1;

function 
zoom(event) {
 
event.preventDefault();
 var 
wert Math.floor(event.deltaY);

// Verringern
 
if (wert 0) {
  
mor -= 1;
  if (
mor 0) {
   
mor 9;
   
max--;
  }
 }

// Erhöhen
 
if (wert 0) {
  
mor += 1;
  if (
mor 9) {
   
mor 0;
   
max++;
  }
 }


 if (
max <= 0) {
  
max 1;
  
mor 0;
 }

 
document.getElementById("bild").style.transform="scale(" max "." mor ", " max "." mor ")";
}
</
script>

<
img src="bild.png" id="bild" onwheel="zoom(event)">

Siehe auch: JavaScript - Zahl in einem Eingabefeld mit dem Mausrad verändern

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<h1>-<h6> Überschrift

CSS - Tooltip per CSS anzeigen

PHP - Bild und Bildinformation anzeigen

JavaScript - Sicherheitsabfrage bevor die Formulardaten zurücksetzt werden

MySQL - Spalte umbenennen

Hintergründe
Der Hintergrund sollte nicht zu grell sein. Grelle Hintergründe belasten das Auge stark und machen Text schwer lesbar. Falls man ein Hintergrundbild verwendet, sollte es den Besucher nicht zu stark ablenken (keinesfalls: Steinkacheln, 3D-Reliefs, Holzmaserungen, Linienmuster... verwenden). Wichtig ist ein ausreichender Kontrast zwischen Text und Hintergrund. Gut ist zum Beispiel schwarze Schrift auf einem weißen oder pastellfarbenen Hintergrund. Hellgrün auf Gelb ist indiskutabel.