JavaScript - Bild mit dem Mausrad vergrößern
<style>
img#bild {
display: Block;
margin: Auto;
width: 444px;
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