div-Inhalt zoomen

Jump to last post
N

nietaL

NGBler
Registriert
8 Sep. 2013
Beiträge
231
Ort
Exilgullianer
Hey Leute,

ich habe einen div-Container, der

- eine Karte beinhaltet, die
- größer als der Div-Bereich selbst ist und
- aus verschiedenen aneinandergelegten PNGs bestehen (Länder), welche wiederum
- von einem großen alles überdeckende durchsichtigen PNG überlagert sind, der auf sich
- klickbare image-maps hat.

Also ein ziemliches Sammelsorium.
Der Container hat z.Z. Scrollbalken. Da die Karte recht groß ist, sieht man überhaupt nicht durch. Gibt es eine Möglichkeit, dieses ganze Gebilde innerhalb des Containers zu zoomen und zu scrollen, ohne dass sich die Abstände zwischen den Elementen verschieben? Es gibt viele schöne Lösungen, die leider aber nur mit einem einfachen Bild (bspw. ein großes jpg) funktionieren.
 
In CSS3 gibt es die transform-Eigenschaft, mit der man auch skalieren kann. Damit müsste sich Dein Vorhaben eigentlich realisieren lassen. Im IE geht das leider erst ab Version 9. Hier gibt es einige Infos:
You do not have permission to view link please Anmelden or Registrieren
 
Vielleicht wird dir es auch helfen, die Bilder als ein Canvas darzustellen. Nur so als Tipp: Mehr müsstest du auch nach googlen.
 
  • Thread Starter Thread Starter
  • #5
Ich habe mich jetzt an die Idee von epiphora herangewagt. Zuerst versuchte ich alle Landesteile an sich zu verkleinern, wobei sie sich aber von einander entfernten, da die Verkleinerung von allen Seiten in die jeweilige Mitte hin geschieht. Also habe ich das gesamt Div mit Scale bearbeitet. Da aber der Ausschnitt gleichgroß bleiben soll und nur der Inhalt sich verkleinern soll, lass ich gleichzeitig Height und Width vergrößern.
Das klappt soweit ganz gut. Einziger Haken ist, dass die Scrollbalken dünner und dicker werden :-D Aber damit kann ich leben.

Aber code-technisch steh ich grad aufm Schlauch...

[src=javascript]
function verkleinern()
{
var divHeight = document.getElementById('map').offsetHeight / 1.5;
document.getElementById('map').style.height = divHeight+'px';

var divWidth = document.getElementById('map').offsetWidth / 1.5;
document.getElementById('map').style.width = divWidth+'px';
}
[/src]

Nach demselben Prinzip möchte ich jetzt den Function-Scale-Wert auslesen und mit 1.5multiplizieren.

[src=javascript]
var divScale = document.getElementById('map').?????????? * 1.5;
document.getElementById('map').????????? = divScale;
[/src]
 
Sofern Du das nicht selbst gemacht hast, wird es keine weitere Skalierung geben, daher kannst Du Dir das Auslesen des aktuellen Wertes eigentlich sparen. Beim Zuweisen musst Du lediglich die Vendor-Prefixes beachten:

[src=javascript]document.getElementById('map').style.WebkitTransform = 'scale(' + divScale + ')';
document.getElementById('map').style.transform = 'scale(' + divScale + ')';[/src]
 
  • Thread Starter Thread Starter
  • #7
nee nee, den aktuellen Wert brauche ich unbedingt, da durch mehrmaliges Klicken immer weiter gezoomt werden soll: jeweils 1,5-mal so groß wie vorher.
 
Machs dir einfacher. Verteile Klassen mit der Zoomstufe und zähle die Klicks. Du brauchst keine großen Rechnereien und kannst den Zommstufen später im CSS anpassen.
 
  • Thread Starter Thread Starter
  • #9
naja, ich habe jetzt feste Zoomstufen. Das geht auch in Ordnung. Aber warum verschiebt sich das Fenster?
 
Zuletzt bearbeitet:
  • Thread Starter Thread Starter
  • #11
Ja, sry, hab's jetzt sein lassen. Ich glaub für sowas kommt nur Java infrage. Aber das beherrsche ich leider nicht in diesem Maße. Trotzdem danke für die Bemühungen.
 
Was spricht denn gegen die Google-Maps-API mit deiner Karte als Overlay? Das ist super dokumentiert, funktioniert und es gibt viele Beispiele im Internet zu finden. Das sollte doch sowas in der Art sein was du suchst:
You do not have permission to view link please Anmelden or Registrieren


Du hast deinen DIV-Container. Darin lädtst du die Google-Karte, auf dieser befindet sich dein Bild an Overlay.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben