nicht angemeldet
Karten Zoom über Button
JürgenBHallo,
ich habe noch wenig Javascript-Kenntnisse und bin auf ein Problem gestoßen, vllt möchte mir jemand dabei helfen:
Ich möchte eine Karte erstellten die insgesamt 10 Zoomstufen hat. Diese Stufen können durch 2 Buttons, In und Out, verädert werden oder über ein Eingabefeld, manuell durch Eingabe des Zoomlevels als Zahl 1-10.
Dabei soll das aktuelle Bild entweder beim Klick oder Eingabe eines anderes Levelwerts durch das neue Bild ersetzt werden.
Zusätzlich soll der Maßstab der anhand der Formel (443744272/2^zoomlevel) berechnet wird eingeblendet werden.
Ich habe schon einiges ausprobiert, allerdings noch nicht erreicht dass die Kartenbilder ausgetauscht werden oder der Maßstab berechnet wird.
Mein Code bisher:
<!DOCTYPE html>
<html lang="de">
<head>
<script type="text/javascript">
var zoomLevel = 5;
function zoom(direct) {
if (direct === 'in') {
if (zoomLevel < 10) {
zoomLevel++;
} else {
alert('Es kann nicht weiter herein gezoomt werden.');
}
} else if (direct === 'out') {
if (zoomLevel > 1) {
zoomLevel--;
} else {
alert('Es kann nicht weiter heraus gezoomt werden.');
}
}
var imgElement = document.getElementById('map');
imgElement.setAttribute("src", "zoom" + zoomLevel + ".png" );
var msgElement = document.getElementById('zoomLevelText');
msgElement.textContent = "Das aktuelle Zoom-Level ist " + zoomLevel;
}
var text = "8";
var textAsNumber = parselnt(text);
function Maßstab() {
var text = document.getElementById("zoom_input").value;
var HochZoomlevel = "zoomlevel";
document.write("2" + HochZoomlevel.sup() + " = " + Math.pow(2, zoomLevel))
var ergebnis = (443744272/Hochzoomlevel * parameter; document.getElementById("id").textContent = ergebnis;
var Ergebnis = document.Formular.Eingabe.value * document.Formular.Eingabe.value;
</script>
</head>
<body>
<h1>Dynamischer Zoom mit Javascript</h1>
<h2> Bitte geben Sie ein Zoomlevel zwischen 1 und 10 ein: </h2>
<form name="Maßstab" action="">
<input type="text" id="zoom_input" size="35">
<input type="button" value="Zoom" onclick="Maßstab">
<br> <br>
<img src="map5.png" id="map" width="500" height="500">
<div id="button">
<button id="zoomIn" onclick="zoom('in')">Zoom in</button>
<button id="zoomOut" onclick="zoom('out')">Zoom out</button>
</div>
<div id="zoomLevelText">Das aktuelle Zoom-Level ist 5.</div>
</body>
</html>
Vielen Dank schonmal im Voraus!
Grüße
-
Erstens sollte dein Javascript Teil einen Fehler werfen, wegen fehlender geschweifter Klammer.
Ansonsten gibt den button-Elementen mal das Attribute "type" mit dem wert "button". Sonst werden diese innerhalb eines Formulars als "submit"-Button interpretiert. Dann wird dein Javascript zwar noch ausgeführt, aber du siehst nichts davon, weil die Seite neu lädt.
-
var Ergebnis = document.Formular.Eingabe.value * document.Formular.Eingabe.value;
Formular.Eingabe?
Und das schließende form-Tag fehlt übrigens auch.
Hast du keine Entwicklertools, die dir solche Fehler anzeigen können? zum Beispiel Firebug
-
Hallo Chelsea,
<form name="Maßstab" action="">
nur zur Info: Wenn Formularelemente nur als GUI für Javascript benötigt werden, kannst/solltest du das form-Element weglassen und dann mit DOM-Methoden arbeiten.
Gruß, Jürgen
-
Schonmal DANKE! Ich habe das ganze nochmal leicht bearbeitet, leider funktioniert es immer noch nicht. Habt ihr noch eine Idee woran es liegen könnte?
<script type="text/javascript"> var zoomLevel = 5; function zoom(direction) { if (direction === 'in') { if (zoomLevel < 10) { zoomLevel++; } else { alert('Es kann nicht weiter herein gezoomt werden.'); } } else if (direction === 'out') { / if (zoomLevel > 1) { zoomLevel--; } else { alert('Es kann nicht weiter heraus gezoomt werden.'); } } var imgElement = document.getElementById('map'); imgElement.setAttribute("src", "zoom" + zoomLevel + ".png" ); var msgElement = document.getElementById('zoomLevelText'); msgElement.textContent = "Das aktuelle Zoom-Level ist " + zoomLevel; } </script> </head> <body> <h1>Dynamischer Zoom mit Javascript</h1> <h2> Bitte geben Sie ein Zoomlevel zwischen 1 und 10 ein: </h2> <input type="text" id="zoom_input" size="35"> <br/><br/> <img src="map5.png" id="map" width="500" height="500"> <div id="button"> <button type="button" id="zoomIn" onclick="zoom('in')">Zoom in</button> <button type="button" id="zoomOut" onclick="zoom('out')">Zoom out</button> </div> <div id="zoomLevelText">Das aktuelle Zoom-Level ist 5</div> <body> </html>-
Hallo Chelsea,
ich würde jetzt als nächstes Kontrollausgaben (z.B. mit alert) einbauen, um zu prüfen, ob z.B. die Bildurl wie erwartet ist. Im FF kannst du dir auch den dynamisch erzeugten/veränderten Quelltext ansehen (Strg A oder Auswahl mit Maus und dann rechte Maustaste). Den Blick in die Javascriptkonsole bzw. Fehlerkonsole hast du hoffentlich schon hinter dir.
Gruß, Jürgen
-
Hallo Jürgen,
das Problem besteht jedoch weiterhin, dass sich zwar die Textausgabe "Akuelles Zoomlevel ist " beim Klick auf die Buttons ändert jedoch das Bild nicht ausgetauscht wird. Diesen Fehler möchte ich beheben bevor ich weitermache.
Danke schonmal
-
Hallo Chelsea,
und was haben deine Debugversuche ergeben? mit <STRG A> und dann <rechte Maustaste> -> "Auswahlquelltext anzeigen" (im Firefox) müsstest du sehen können, ob das src-Attribut vom img geändert wurde.
Gruß, Jürgen
-
Ja das ändert sich aber das alte Bild bleibt.
Seltsam...-
Hallo Chelsea,
Ja das ändert sich aber das alte Bild bleibt.
Seltsam...gibt es ein Onlinebeispiel?
Gruß, Jürgen
-
-
-
-
-