Textelemente durch Bild ersetzen

Demonstration

Wenn sie unten mit der Maus über das Bild fahren, sehen sie die Länder zu den einzelnen Fahnen. Schalten sie den Stil komplett aus (z.B. unter Mozilla Firefox mit [Ansicht] / [Websiten-Stil] / [Kein Stil]) sehen sie lediglich eine Liste der Ländernamen. Sie können die Ländernamen auch auswählen und kopieren.

Bis jetzt gibt es hinter den Ländernamen noch keine Verweise dies ist aber ohne Probleme zu machen. Da es nur regulärer XHTML-Code ist.

Ich habe leider nur Mozilla Firefox zur Verfügung, deshalb ist es nur hier getestet. Ich werde es noch im KDE Konqueror versuchen, ich denke wenn er es korrekt darstellt sollte es auch im Apple Safari funktionieren. Ob es im Microsoft Internet Explorer richtig angezeigt wird weis ich nicht. Aber ich denke auch er müsste es korrekt darstellen. Opera wird es wohl auch können.

Wie es funktioniert

Die Ländernamen sind einfach in einem ul-Element aufgezählt. Jedes Element brauch eine eigene ID ansonst müssen die Koordinaten in einem style-Attribute angegeben werden. Ich verwende europa-style.css ein externes Stylesheet in dem für das ul-Element festgelegt ist, das es relativ positioniert wird, das ist wichtig damit festgelegt ist welchen relativen Bezugspunkt die einzelnen Aufzählungen verwenden. Hier wird auch das Bild als Hintergrundbild festgelegt sowie die Größe spezifiziert. Es muss noch für alle Aufzählungspunkte die Positionierung als fixed gesetzt werden und für alle einzeln die Position im Bild angegeben werden.

Die Auszeichnung :hover wird verwendet um die einzelnen Elemente zu verändern wenn sich die Maus über einem Element befindet.