Hallo Forum,

Wenn alle Browser so könnten wie FF wär's wohl kein Problem, tun sie aber nicht - ist ja nichts Neues. Ich habe die Wahl zwischen Pest und Cholera: Gewünscht wird eine anklickbare Grafik mit Texteinblendungen.

Wenn ich es hinbekomme, dass die imagemap auch im IE6 und IE7 einwandfrei funktioniert, würde ich die CSS Lösung vorziehen, ansonsten bleibt wohl doch nur eine Realisierung mit Flash.

Nun aber zu meinem Problem und hier das bisherige Ergebnis:
css-imagemap testcase

Problem ist, dass im IE7 und IE6 nicht alle Felder hovern und die Texteinblendungen rechts anzeigen. Der Grund ist die fehlende Hintergrundfarbe bzw. background-color: transparent; - Bei den Kreissegmenten kann ich aber #fff nicht gebrauchen, da dann die Überlappungen zu sehen wären.

Erstens ist mir nicht klar, auf welchen Bug dieses Phänomen zurückzuführen ist und zweitens weiß ich mir keinen Rat, ob und wenn ja das Problem zu beheben wäre.

Bevor ich nun die ganze Sache streiche und doch auf Flash zurückgreife hier mein letzter Versuch und Frage, ob vielleicht jemand von euch eine Lösung weiß.

Viele Grüße
Evoli

Ich habe mir Deinen Quellcode nur flüchtig angeschaut (muss schlafen gehen), daher kurz nur folgendes:
Dein IE Problem – nimm die „id“ bei den Links weg und gib sie den entsprechenden „li“-s. Positioniere dann die „li“-s „absolute“ und nicht die Links. Bei den Links kannst Du meinetwegen die Breiten- und Höhenangaben bei behalten – „position“, „top“ und „left“ geht zu den „li“-s.
Die Bilder – Du brauchst keine transparente Bilder. Du kannst in jedem Bildchen, was den Hover-Zustand darstellt, auch die Teile von den benachbarten Segmenten, die in dem gehoverten Link sichtbar sind, mit aufnehmen. Die überlagern sich dann so zu sagen selbst, stellen aber nach bevor den Ungehoverten Zustand dar... Ne, ich kann es Dir so nicht erklären. Ich hoffe Du findest was darüber im Netz. Keine Ahnung wie die Technik heißt und wo ich sie her kenne.
Grüße: Emil

Hallo Emil,

vielen Dank für den Tipp - ich werde das dann mal umsetzen und schauen ob's klappt.

Viele Grüße
Evoli

Warum sollte es nicht? So müde war ich heute Nacht auch wieder nicht.
Ich habe die ersten Paar Zeilen geändert. Den Rest bitte dann entsprechend.
Damit es auch in IE 5.0 funktioniert ist noch eine Zeile dazu gekommen (ist auch gezeichnet, s.u.).
Grüße: Emil

Ich glaub ich bin noch ein bisschen müder und muss erst warten, bis ich wieder denken kann, darum - melde mich wieder, bis dahin hab' vielen lieben Dank !!

So, dann habe ich mal noch was geändert. Das mit der id für li anstatt a war schon gut, aber das ist es nicht allein. Man muss wohl auch ein Mini blank.gif als Hintergrund einbinden. Nun geht die map im FF, IE7, Opera aber im IE6 werden immer noch nicht alle Texte im span angezeigt.

Werde noch ein bisschen tüfteln, googeln ... mal sehen, ob ich es noch besser hin bekomme.

Ansonsten - hm, vielleicht werde ich die map für die ie6 via ccm einfach auf display:none; setzen. Die ganze map ist eh redundant, die Informationen sind auch über die normale Naviagtion erreichbar.

Viele Grüße
Evoli

Nur was? Na dann kann es ja auch nicht gehen.
Ich würde nur ungern dazu beitragen, dass Du Dich noch mehr über müdest, aber etwas genauer muss Du das lesen, was ich geschrieben habe, schon. Habe Dir sogar für #extern den Code vorgegeben. Und es sind (bei #extern) vier Zeilen. Bei Dir – drei. Ob Du nicht was übersiehst?

Ja, hab ich schon übersehen - aber im Ergebnis kann ich im IE6 trotzdem keine Veränderung sehen. (IE5 kann mich mal) Der seitliche Informationstext wird nur bei zwei Feldern angezeigt, bei den anderen nicht. Und das ist ja das Seltsame: Warum funktioniert das bei den beiden Feldern und bei den übrigen nicht? Ich habe haarklein kontrolliert ob ich Fehler im code oder sonstwelche Abweichungen habe - nichts gefunden

Wie schon gesagt, es hängt auch mit der Hintergrundfarbe zusammen. Da gibt es (ich weiß leider nicht mehr wo ich es gelesen habe) so ein ähnliches Teil und dort war es auch bg transparent oder eben keine Farbe angegeben. Der IE6 will hier aber mindestens #fff haben. Evtl. kann ich es umgehen, wenn ich für a alle Bilder in weiß als Hintergrund einbinde. Dann kann ich bg #fff verwenden. Sonst ja nicht.

Viele Grüße
Evoli

Es geschehen noch Zeichen und Wunder: die css-hovermap funktioniert nun auch im IE6 !! Vielen Dank für die Hilfe !