Toon posts:

3 divs op elkaar, op 2 divs image map met onmouseover

Pagina: 1
Acties:

Verwijderd

Topicstarter
Beste Tweakers,

Ik ben bezig met het maken van een plattegrond voor op een website. De plattegrond kan op twee manieren benaderd/gebruikt worden:
- vanaf een index met locaties: je klikt op de locatie en de locatie wordt op de plattegrond in een andere kleur weergegeven (div a)
- door met de muis over de plattegrond te bewegen, de locatie waar je overheen gaat licht op in een andere kleur (div b)

De kleuren van de actieve locatie worden weergegeven door een doorzichtig plaatje wat over de plattegrond heengelegd wordt op een <div> met een gekleurd vlak ter hoogte van de actieve locatie.

De twee genoemde onmouseovers werken afzonderlijk prima maar helaas niet als ik ze wil combineren. Ik heb de indruk dat het in de volgorde van de divs zit (z-index) maar de oplossing heb ik nog niet gevonden. Ik staar er een beetje blind op, ik hoop dat iemand me een nieuw aanknopingspunt kan geven.

Hieronder een korte samenvatting van wat ik heb geprobeerd en de onvolkomenheid ervan:

Het plaatje met de plattegrond = z-index:0
Optie 1:
div a: z-index:1
div b: z-index:2
Resultaat:
De locatie die aangeklikt is vanuit de index wordt niet gekleurd weergegeven. Als ik met mijn muis over een andere locatie ga dan wordt zowel de aangeklikte locatie uit de index en de locatie waar ik met mijn muis over heen ga gekleurd weergegeven. Verlaat mijn muis de onmouseover dan verdwijnen alle kleuren (dus ook van de locatie aangeklikt uit de index) weer totdat weer met mijn muis over een nieuwe locatie heenga: dan verschijnen er weer 2 gekleurde locaties.

Optie 2:
div a: z-index:2
div b: z-index:1
Resultaat:
De locatie die aangeklikt is vanuit de index wordt gekleurd weergegeven. De andere onmouseovers zijn niet actief (er verschijnt geen handje, en dus ook geen gekleurde vlakjes)