nicht angemeldet
Animierte Karte
0 0 0 4 
Matthias Apsel
0 0
Animierte Karte
Hallo,
ich wollte fragen, wie so eine Deutschland-Karte erstellt worden ist:
http://www.foederal-erneuerbar.de/landesinfo/bundesland/D/kategorie/bioenergie
Wenn man mit der Maus über die Länder fäht, heben sich die Länder farblich vor. Was für Techniken sind dahinter und was sollte ich mir genauer ansehen? Ich denke mal CSS, aber welche Befehle usw.?
-
Moin,
Guck dir mal den Abschnitt über <http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=verweissensitive Grafiken> an.
Grüße Marco
-
Guck dir mal den Abschnitt über <http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=verweissensitive Grafiken> an.
Und wieder war ein anderer schneller ;)
-
-
Wenn man mit der Maus über die Länder fäht, heben sich die Länder farblich vor. Was für Techniken sind dahinter und was sollte ich mir genauer ansehen? Ich denke mal CSS, aber welche Befehle usw.?
Wie sie den hover-Effekt umgesetzt haben kann ich dir auf die Schnelle nicht sagen, aber es werden http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=Image-Maps verwendet.
-
Moin,
Der Hover-Effekt wird durch ein Skript gehandelt ( http://foederal-erneuerbar.de/plugins/zafe_map/js/zafe_maps.js ).
Das Hintergrundbild ist nur das Outline der Map, die URL grauen Elemente sind in einem globalen Objekt gespeichert (window.__map_saver). Die URL wiederum verweist auf ein Skript, welches je nach Parametrierung eine Grafik mit bestimmten Bundesland in einer bestimmten Farbe zurückgibt. Die Farbe wird innerhalb des Skripts mit folgendem Befehl geändert:
mSmall.setStyle('background-image', window.__map_saver['bg_'+mId].split('CCCCCC').join('FE9901'));Schlussendlich wird alles über entsprechende Handler verwurstet, die das Ding funktionieren lassen. Guck dir einfach mal das Skript an.
Grüße Marco
-
Om nah hoo pez nyeetz, porki!
ich wollte fragen, wie so eine Deutschland-Karte erstellt worden ist:
http://www.foederal-erneuerbar.de/landesinfo/bundesland/D/kategorie/bioenergieDu darfst abschreiben: http://www.billiger-im-urlaub.de/austria/austria_map.html, Original: http://www.pseliger.de/testCases/federalStatesOfGermany.html, Forumsdiskussion: http://forum.de.selfhtml.org/archiv/2005/4/t105405/
Matthias
--
1/z ist kein Blatt Papier.
-
Dank,
ich werde mich daran mal versuchen und später wohl weitere Fragen stellen.Om nah hoo pez nyeetz, porki!
ich wollte fragen, wie so eine Deutschland-Karte erstellt worden ist:
http://www.foederal-erneuerbar.de/landesinfo/bundesland/D/kategorie/bioenergieDu darfst abschreiben: http://www.billiger-im-urlaub.de/austria/austria_map.html, Original: http://www.pseliger.de/testCases/federalStatesOfGermany.html, Forumsdiskussion: http://forum.de.selfhtml.org/archiv/2005/4/t105405/
Matthias
-
Hallo,
ich versuche das Script zu verstehen, habe aber schon im CSS-Abschnitt Probleme die folgende Zeile zu verstehen:
img.states.script.deNI {background-position: 0 -399px;}Woher kommt dieses states bei css und das .script?
Was für eine Wirkung hat es auf das img?
Das habe ich bei css noch nicht gesehen.Om nah hoo pez nyeetz, porki!
ich wollte fragen, wie so eine Deutschland-Karte erstellt worden ist:
http://www.foederal-erneuerbar.de/landesinfo/bundesland/D/kategorie/bioenergieDu darfst abschreiben: http://www.billiger-im-urlaub.de/austria/austria_map.html, Original: http://www.pseliger.de/testCases/federalStatesOfGermany.html, Forumsdiskussion: http://forum.de.selfhtml.org/archiv/2005/4/t105405/
Matthias
-
Om nah hoo pez nyeetz, porki!
Es ist nicht notwendig, das gesamte Vorposting zu zitieren. Dies ist im Sinne der Lesbarkeit sogar kontraproduktiv. Nach einer Anmeldung könntest du dir das Forum so einstellen, dass du sämtliche Antworten untereinander sehen kannst.
ich versuche das Script zu verstehen,
Der Grundgedanke:
* Es wird eine Grafik angezeigt mit dem Namen austria_gif, welche der Klasse "States" angehört. Diese Grafik enthält nur die Ländergrenzen.
* Wenn JS eingeschaltet ist, bekommt die Grafik zusätzlich die Klasse "script".
* Das Hintergrundbild für diese Grafik besteht aus vielen Teilen, die jedes Bundesland einmal eingefärbt haben.
* Je nach dem an, welcher Stelle man hovert, wird dieses Hintergrundbild verschoben, indem eine weitere Klasse zugewiesen wird, etwa wi für Wien 250px nach links und 393px nach oben, was einer Kartenbreite nach links und drei Kartenbreiten nach oben entspricht.Dieses Beispiel stammt aus der Deutschlandkarte.
img.states.script.deNI {background-position: 0 -399px;}
Selektiert img-Elemente (img),
die der Klasse states angehören (.states),
und der Klasse script angehören (.script)
und der Klasse deNI angehören (.deNI)Schau dich im Wiki um: unter anderem Klassenselektor
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
Wenn man mit der Maus über die Länder fäht, heben sich die Länder farblich vor. Was für Techniken sind dahinter und was sollte ich mir genauer ansehen? Ich denke mal CSS, aber welche Befehle usw.?
http://nachhaltigkeitsbericht.coca-cola.de/gemeinwesen/gesellschaft/regionale-projekte/
Hier wurde es auf Basis von http://raphaeljs.com umgesetzt. In Illustrator gesetzt und mittels http://readysetraphael.com konvertiert.
Die Tooltips sind http://craigsworks.com/projects/qtip2/.Viele Grüße
_Dirk -
Hallo porki.
Wenn man mit der Maus über die Länder fäht, heben sich die Länder farblich vor. Was für Techniken sind dahinter und was sollte ich mir genauer ansehen? Ich denke mal CSS, aber welche Befehle usw.?
Eine Alternative zu den bereits vorgeschlagenen Ideen:
Verwende LeafletJS um eine interaktive Karte zu erstellen.Servus,
Flo