PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Image map mit CSS



Korrix
18-08-2006, 10:29
Hallo,

ich möchte OHNE JavaScript eine Image Map realisieren mit folgenden Eigenschaften:

- Ein Bild mit verweissensitiven Bereichen
- Fährt man mit der Maus über diesen Bereich, erscheint ein anderes Bild (darüberliegend)
- Klickt man darauf, wird man entsprechend verwiesen.

Beipiel: Kontinentkarte; fährt man über Europa, dann soll Europa hervorgehoben werden (grafisch, kein Text). Klickt man auf Europa, dann wird man dem hinterlegten Link entsprechend verwiesen.

Wie gesagt, das ganze ohne JavaScript.

Kann mir da jmd. ein paar Tips geben?

Vielen Dank,
Korrix

undefined
18-08-2006, 11:23
Das geht auf jeden Fall, ABER - der Internet Explorer kann mit definierten Events innerhalb von CSS Dateien nicht richtig umgehen. z.B: #elementID:hover etc. wird bei allen anderen Browsern Funktionieren nur nicht beim IE. Dieser Reagiert nur sauber auf Event Definitionen innerhalb eines HTML Elementes.
PS: Haarspalterei - Events in CSS sind in dem Sinne aber JavaScript Sprachelemente ;)

Pingu
18-08-2006, 11:52
Was funktioniert aber sehr aufwändig ist: Du zerlegst Deine Weltkarte in Quadrate (je genauer es sein soll, desto kleiner werden sie). Als Hintergrundbild (in einem <div>-Element legst Du die Weltkarte mit allen Kontinenten hervorgehoben). Dadrin baust Du Dir jetzt die Weltkarte mit den vielen, kleinen Quadraten auf, wobei jedes Bild ein Link ist (gegebenfalls mit mehreren <DIV>-Elementen als Container arbeiten, die dann in dem übergeordneten <DIV>-Element relativ positioniert werden können. Dann sagst Du einfach, dass bei einem :hover der jeweilige <DIV>-Container auf durchsichtig geschaltet werden soll. Die Links kannst Du ganz normal definieren.

Pingu