[HTML/CSS/JS]onMouseOver/Out - image knippert!

[Spooksel]

Verschillende topics gevonden met soortgelijke problemen, maar niet echt contrecte oplossingen.

Probleem:
http://ekkersrijt.digital-channel.nl/plattegrond.html (onderste witte gebouw op de img heeft mouseovers)
Je zult het gelijk zien wanneer je er met de muis overheen gaat.

Hieronder een overzichtje van de simpele code:

code:

<style>
#plattegrond {
position        : absolute;
top             : 50px;
left            : 50px;
width           : 550px;
height          : 241px;
}

#gigant {
position        : absolute;
top             : 0px;
left            : 0px;
visibility      : hidden;
z-index         : 5;
}

#lodewijks {
position        : absolute;
top             : 0px;
left            : 0px;
visibility      : hidden;
}
</style>

<div id="plattegrond">
    <map name="pgrond">
        <area shape="poly" name="gigant" href="#" onmouseover="document.getElementById('gigant').style.visibility='visible';" onmouseout="document.getElementById('gigant').style.visibility='hidden';" coords="341,100,394,133,395,148,291,167,293,150,257,124,296,118,296,108,341,100">
        <area shape="poly" name="gigant" href="#" onmouseover="document.getElementById('lodewijks').style.visibility='visible';" onmouseout="document.getElementById('lodewijks').style.visibility='hidden';" coords="146,145,257,124,292,151,292,167,183,191,146,160">
    </map>
    <img src="images/content/plattegrond/plattegrond_basis.png" usemap="#pgrond" border=0>
    <span id="gigant"><img src="images/content/plattegrond/overlay_gigant.png"></span>
    <span id="lodewijks"><img src="images/content/plattegrond/overlay_lodewijks.png"></span>
</div>

Dingen geprobeerd:
DIV & SPAN gebruikt. Klooien met z-index. Beide helpen niet

Mogelijke oplossing:
image-swap, nadeel... 15x groot plaatje ipv 1x groot & 14x klein.

Iemand ideetjes?

[Kvn]

Ik weet niet zo gauw een goede oplossing met je huidige code, maar misschien is een Javascript library met effecten iets, Scriptaculous of Moo.fx bijvoorbeeld?

[crisp]

Bekent probleem met area's. Iig ga je het met 'overlays' niet aan de praat krijgen aangezien die de events op je area's obscuren (er wordt nog wel een mousout gefired en dat veroorzaakt uiteindelijk het knipper-effect).

Beste is om een imageswap te doen van de image met de usemap property.

[RuudBurger]

weet niet hoe ver je bent met css, maar het beste kan je die hele imagemap skippen en ongeveer hetvolgende doen:

divje met het gebouw erop.
dan maak je voor elke hover een <a> aan.
deze <a>'s positioneer en scale je met css
je stopt op de <a>'s de hover background, op no-repeat. en bijvoorbeeld "position" op 1000 1000
op de a:hover zet je de background position op 0 0

op deze manier zijn de hovers al geladen, zodat je daar niet op hoeft te wachten.
en je hoeft geen javascript te gebruiken.

edit:
misschien nog goede uitleg voor je..
http://alistapart.com/articles/sprites/

[ Voor 8% gewijzigd door RuudBurger op 04-12-2006 23:38 ]

[crisp]

Sillymidget: dan kan je niet met poly-shaped 'hotspots' werken

[RuudBurger]

de gebouwen overlappen elkaar niet al te veel, dus dat lijkt me geen probleem hier.
zijn geen organische vormen..

[Verwijderd]

Ja dit is gewoon normaal gedrag.

Die eerste image gebruikt de map. Zodra je boven het gebied komt show je die span. Nu zit je muis niet meer op die eerste image en komt er een mouseout de hem dus weer hide (snap je het nog )

Beste is denk ik gewoon de src aan te passen zodat je op dezelfde image blijft

[Verwijderd]

Heb even wat getest en als je

usemap="#pgrond" border=0

toevoegd aan de twee overlay images dan werkt het gewoon!

[Spooksel]

Bedankt voor de reacties mensen. Ik nog niet eerder gereageerd omdat ik tijdelijk ff met een ander project aan de slag moet. Maar ik pik deze zo snel mogelijk weer op

Voor de geinterreseerden is er op de site uit de TS het geheel te zien nu.

edit:
DotHack, bedankt. Dit werkt prima

[ Voor 27% gewijzigd door Spooksel op 06-12-2006 11:59 . Reden: Fixed! ]