• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Karte Zoomen

Status
Für weitere Antworten geschlossen.
K

Knowledge

Neues Mitglied
Hallo,
ich habe folgendes Problem, ich bin gerade für unseren Informatikkurs mit Freunden dabei ein Browsergame zu programmieren. Es gibt aber folgendes Problem:
Wir haben eine Karte als Bild genommen 100x100 Felder groß, was in unseren Maßen 900px x 500px entspricht. Die Koordinatenlinks sind nun aber sehr sehr klein und mit einer "<map>" realisiert, jetzt wäre es praktisch wenn man mit der Maus über die Bildfläche fahren könnte und somit einfach nur das Bild an jener Stelle wo sich der Mauscursor befindet vergrößter wird und die Koordinate eventuell noch angezeigt wird. Ich hab noch kaum Erfahrung mit Javascript und brauche dringend hilfe.

Mit freundlichem Gruß
Dirk Hornung
 
Ich weiss nicht wie lang euer Informatikkurs ist, aber ein Browsergame ist eigebtlich nicht so schnell fertig :D
Naja. Richtig zoomen kannst du mit Browsern ja nicht.
Du kannst dem browser höchstens sagen er soll die Bilder größer anzeigen, als sie sind.
Das Image-Tag hat die Attribute: height und width (Welche nicht im Style definiert sind).
Schau dir mal folgenden Testquelltext an. Das ist jedoch nur ein erster Lösungsansatz.

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script type="text/javascript">
            window.onload = function() {
                
                document.getElementById("plusButton").onclick = function() {
                    var bild = document.getElementById("zoomer").getElementsByTagName("img")[0];
                    bild.height = "100";
                    bild.width = "500";
                    bild.style.marginLeft = "-200px";
                };
                
            };
            
        </script>
        
        
        <style>
            #zoomer {
                border: 1px solid black;
                width: 250px;
                height: 50px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="zoomer">
            <img src="bild.jpg" />
        </div>
        
        <input type="button" id="plusButton" value="+" />
        
    </body>
</html>

Bei euch müsst ihr natürlich auf jede Mapkoordinate einen Listener legen, der ein Event beim hovern ausführt. Falls ihr Punkte in eurer Map habt, könnt ihr diese natürlich auch gut für das zoomen benutzen (wichtig für das margin)
Sollte jedoch ein Stükchen arbeit sein. :) Als Neuling wirst du da schon eine 3/4 Stunde dran schreiben :)
Wenn du Fragen hast einfach fragen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben