• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Bild nach Zahleneingabe entsprechend ändern?

A

Astraracer87

New member
Bild entsprechend Zahleneingabe ändern?

Hallo,

ich würde gerne per Grad Eingabe mir die Richtung auf einem Kompass anzeigen lassen. Also wenn man zB 0 eigibt zeigt der Zeiger nach Norden, wenn man 45 eingibt nach Osten usw. Kann mir da jemand einen Script nennen?

Grüße und Danke im Voraus

David
 
Zuletzt bearbeitet:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#compass {
	transform-origin: 50%;
}
</style>
</head>
<body>
<img id="compass" src="https://upload.wikimedia.org/wikipedia/de/b/b9/Kompass.jpg" width="200">
<input type="number" id="degree">°
<script type="text/javascript">
document.getElementById("degree").addEventListener("input", function(){
	var alpha = parseFloat(this.value) || 0;
	document.getElementById("compass").style.transform = "rotate(" + alpha + "deg)";
});
</script>
</body>
</html>
 
jetzt finde ich kein bild, was man bei 50 x 50 px noch als kompass erkennen kann. jemand einen geheimtipp?
 
kleine Ergänzung zu kkapsner's code in #5:

und zwar gibt die windrichtung immer an, aus welcher Richtung der wind kommt. daher müssen wir - vorausgesetzt das image zeigt nach oben wie es hier der fall ist - die seiten spiegeln. daher vor dem rotate() einfügen:
alpha += alpha < 180 ? 180 : -180;
dann passt alles.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben