Bilderwechsel mit CSS aber nur Teilbereich

Guten Morgen,

ich habe eine Grafik mit den Grenzen 16 Bundesländern, wenn man auf eine Land klickt bekommt man Informationen zu dem Land.
Bei Mouseover über einen Land möchte ich gerne das die Grafik ausgetauscht wird und zwar gegen eine wo das “Mouseover Land” farbig hinterlegt ist.

Ich bekomme den Grafikwechsel mit einer Grafik und CSS hin.
Mein Ziel ist es, ist die Mouse über Bayern wird die Grafik mit den Grenzen gegen die ausgetauscht wo Bayern farbig ist, ist die Mouse über Berlin wird die Grafik gegen jene ausgetauscht wo Berelin farbig ist usw.

Ist das mit CSS machbar?
Danke

Da die Bundesländer keine rechteckigen Grenzen haben, ist das nur näherungsweise
mit CSS2 machbar - und je genauer man es haben will, desto komplexer und umfangreicher wird
die (X)HTML-Datei, die man dafür verwenden müßte.

Recht einfach ist das hingegen mit SVG (optional +CSS) realisierbar. Das eignet sich deshalb
recht gut, weil man da einfach Objekte mit beliebiger Form darstellen kann, also auch Landkarten
und diese Objekte dann auch selbst als Ziel von Ereignissen verwenden kann, um dann
deklarativ eine Aktion auszulösen - also entweder eine interaktive SVG-Animation oder auch
ohne Animation mit CSS :hover und dergleichen Eigenschaften des Objektes ändern.

In deinem Falle würde man dann also einfach in der SVG-Datei für jedes Bundesland die Grenzen
als einen Pfad notieren und dann den Strich oder die Füllung ändern, wenn das Zeigergerät über
dem Bundesland ist - und entsprechend eben Textinformation an geeigneter Stelle einblenden.
Bei längeren Fließtexten ist die Umsetzung der Textdarstellung mit SVG derzeit allerdings noch
etwas arbeitsaufwendig, weil man da Zeilenumbrüche selber angeben muß (in SVGT1.2 muß
man das nicht, das kann unter den bekannteren browsers bislang aber nur Opera umsetzen).

Da SVG von Microsoft nur vom IE 9 unterstützt wird ist es nicht zu empfehlen trotz der Vorteile die SVG bietet,die restlichen Browser FF/Safari/Opera/ Chrome setzen das besser um.
Alle Smartphones setzen dieses Format nicht um.

Deshalb ist der Einsatz von SVG zum jetzigen Zeitpunkt eher nicht empfehlenswert.

http://www.computerwoche.de/netzwerke/web/2359851/index4.html

Nun gut und Danke fürs erste, ich werde mich noch ein wenig umsehen.

Wobei die Variante mit dem Rechteck wenn es im Schwerpunkt liegt mir ausreichen würde.

Beste Grüße

[quote]
Wobei die Variante mit dem Rechteck wenn es im Schwerpunkt liegt mir ausreichen würde.[/quote]
Tutorial dazu:
http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/

Vielen Dank

ich finde das ist ausreichend.

Beste Grüße

Camou - veraltete Versionen des MSIE können vieles nicht.
Aber es wird ja niemand gezwungen, den alten Kram zu verwenden und wenn man das
mit object in (X)HTML einbindet, kann man ja funktionierende Alternativen, etwa eine einfache
Auswahlliste mit Text anbieten.
Da es ja aber genug Alternativen gibt und es bei microsoft genug Personal und Mittel gibt, um
das Teil zu verbessern, ist das ja kein Argument, einen internationalen Standard nicht zu
verwenden. Mit den Alternativen sieht (X)HTML ja explizit eine elegante Lösung für antike Programme vor.
Die älteren Versionen des MSIE können auch kein XHTML, haben große Probleme mit CSS,
mit PNG - da ist Ersatz teils viel schwieriger als bei dieser Anwendung einer Karte als
Repräsentation einer Auswahlliste.

Selbst bei HTML4 gibt es diverse nützliche Sachen, die von den gängigen browsern keiner richtig
interpretiert. Es wäre trotzdem unangemessen, nur Klartext-Dateien zu verwenden, zumal es
da wohl auch wieder bei einen Versionen von WebKit Probleme gibt, weswegen man besser
gar keine irgendwie kodierten Texte verwenden sollte, also besser bis zum nächsten Jahrhundert
erstmal abwarten, ob irgendwas mal komplett interpretiert wird.

Auch für Mobiltelephone gibt es diverse Darstellungsprogramme, die SVG gut darstellen können.
Einige davon sogar besser als die gängigen browser. Und wenn es da Telephone gibt, die was
nicht können, was man braucht, ist das ja auch nicht so schlimm, denn telephonieren kann man
damit ja immer noch, was ja der Hauptsinn des Gerätes ist ;o)
Mobiltelephone können in der Tat eher SVG tiny 1.2 statt SVG 1.1 - teils ist das fortgeschrittener
als SVG 1.1, teils wurde auch einiges ausgespart, was sich für Mobiltelephone nicht besonders
eignet. Wer für beiden was anbieten will, verwendet einfach nur die Schnittmenge, im Zwefelsfalle
nur SVG tiny 1.1, eine echte Untermenge von SVG 1.1.

Zu der von dir referenzierten Seite - die bringen bereits HTML5 mit SVG durcheinander, da
drängt sich die Vermutung auf, daß die nicht viel verstanden haben. Während SVG ein
internationaler Standard ist, vergleichbar alt mit XHTML1.1, ist HTML5 ein halbfertiger
Arbeitsentwurf, wo man von der Nutzung für ernsthafte Anwendungen auf jeden Fall absehen
kann, weil sich jeglicher Inhalt eines solchen Arbeitsentwurfes täglich wieder ändern kann.
Der Artikel ist ziemlich gruselig und verkauft mehr als 10 Jahre etablierte Sachen als
Neuigkeiten, nur weil sie offenbar der Autor selbst zum ersten mal gesehen hat ;o)

guckstdu - realisierbar ist das, aber auch etwas knifflig, deutlich einfacher ist dabei ein
Rechteck außen drum herum als innen drin. Aber ich denke, da kann man mit verschachtelten
Elementen, z-index, absoluter Positionierung, teilweise transparenten Graphiken tricksen.
Also ist das jedenfalls mit CSS nichts für ungeduldige Anfänger und eventuell im Endresultat
weniger praxistauglich als die SVG-Variante, weil zu komplex und weil in CSS einige Sache wie
:hover auch nicht wirklich präzise definiert sind.