Anzeige:
Ergebnis 1 bis 3 von 3

Thema: Image map mit CSS

  1. #1
    Registrierter Benutzer
    Registriert seit
    25.08.2004
    Beiträge
    72

    Image map mit CSS

    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

  2. #2
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    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
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  3. #3
    Registrierter Benutzer
    Registriert seit
    22.08.2002
    Ort
    Nürnberg
    Beiträge
    638
    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
    Homepage: www.pingu.info

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •