Map met coordinates

Status
Niet open voor verdere reacties.
R

raymond88

Gebruiker
Lid geworden
24 feb 2010
Berichten
287
Ik heb een mapje van nederland, met bijhorende provincies gemaakt. Echter, soms doet 'ie het helemaal, dan half, dan weer helemaal niet bij de mouse-over. Ik vraag me dus af waar het probleem zit. Zal even uitleggen wat ik gedaan heb;

- Een divje met het plaatje, die float links
- Alle provincies apart gemaakt als pngtje, en die komen dus over de float van het divje (op deze manier hoef ik niet telkens HEEL de map opnieuw te laden, maar enkel de provincie)
- Met dreamweaver wat getekend, om zo de coordinaten te weten

Wat doe ik fout, en hoe kan ik dit oplossen? Dacht dat ik al tamelijk creatief geweest ben, maar het wil niet lukken.

HTML: 
<div style="float: left; position: absolute; z-index: 2;">
    <a href="zoekoplocatie-nederland.html">Heel Nederland</a>
</div>
<div style="height: 220px; width: 182px; margin: 0 auto;">
    <div style="float: left; position: absolute; z-index: 0;"><img src="<?php $domein; ?>images/other/nederlandkaartje.png" alt="nederland" border="0" /></div>
    <div style="float: left; position: absolute; z-index: 1"><img src="<?php $domein; ?>images/other/nederlandnepkaartje.png" alt="nederland" border="0" name="mapje" usemap="#Map" />
        <map name="Map" id="Map">
            <area shape="poly" coords="106,185,118,188,110,198,112,202,108,210,109,217,119,217,128,217,128,209,127,203,120,198,133,188,133,183,127,186,127,180,136,173,136,159,129,153,129,147,121,143,121,155,117,159,117,166,111,172,109,178,107,184" href="zoekoplocatie-limburg.html" onmouseover="mapje.src='<?php $domein; ?>images/other/limburgselected.png';" onmouseout="mapje.src='<?php $domein; ?>images/other/nederlandnepkaartje.png';" />

            <area shape="poly" coords="42,171,43,164,40,150,48,150,51,146,57,148,63,146,68,144,67,140,75,135,80,139,86,141,87,146,93,144,96,137,106,139,113,142,123,144,121,157,118,157,117,163,111,174,107,184,103,177,94,182,86,175,80,170,80,165,77,171,68,170,68,164,61,169,56,169,55,164,50,169,49,172,43,172" href="zoekoplocatie-brabant.html" onmouseover="mapje.src='<?php $domein; ?>images/other/noordbrabantselected.png';" onmouseout="mapje.src='<?php $domein; ?>images/other/nederlandnepkaartje.png';" />

            <area shape="poly" coords="43,174,32,182,19,182,19,180,10,175,9,182,3,180,4,168,10,165,4,159,10,153,18,151,18,145,25,142,35,149,42,151,44,174" href="zoekoplocatie-zeeland.html" onmouseover="mapje.src='<?php $domein; ?>images/other/zeelandselected.png';" onmouseout="mapje.src='<?php $domein; ?>images/other/nederlandnepkaartje.png';" />

            <area shape="poly" coords="25,144,24,139,31,136,35,136,31,124,37,124,53,102,59,102,59,109,64,108,70,110,73,115,67,116,71,121,67,125,70,125,71,130,76,127,80,125,86,128,78,138,67,141,71,146,61,146,58,149,52,149,45,148,42,151,29,148" href="zoekoplocatie-zuid-holland.html" onmouseover="mapje.src='<?php $domein; ?>images/other/zuidhollandselected.png';" onmouseout="mapje.src='<?php $domein; ?>images/other/nederlandnepkaartje.png';" />

            <area shape="poly" coords="83,129,92,129,97,128,107,130,102,119,99,114,96,108,96,104,88,104,83,112,78,101,63,108,66,116,71,120,70,117,70,125,73,132,77,126,82,129" href="zoekoplocatie-utrecht.html" onmouseover="mapje.src='<?php $domein; ?>images/other/utrechtselected.png';" onmouseout="mapje.src='<?php $domein; ?>images/other/nederlandnepkaartje.png';" />

            <area shape="poly" coords="96,107,102,102,109,93,116,85,120,89,124,87,129,95,125,97,131,105,138,107,139,105,144,110,153,111,161,117,156,120,162,124,160,133,153,131,145,135,142,138,133,134,124,138,125,144,115,144,97,139,90,147,85,140,78,137,87,129,97,128,106,128,103,119,97,108" href="zoekoplocatie-gelderland.html" onmouseover="mapje.src='<?php $domein; ?>images/other/gelderlandselected.png';" onmouseout="mapje.src='<?php $domein; ?>images/other/nederlandnepkaartje.png';" />

            <area shape="poly" coords="99,105,117,86,116,78,121,78,117,65,110,63,105,67,105,81,95,84,84,97,100,106" href="zoekoplocatie-flevoland.html" onmouseover="mapje.src='<?php $domein; ?>images/other/flevolandselected.png';" onmouseout="mapje.src='<?php $domein; ?>images/other/nederlandnepkaartje.png';" />

            <area shape="poly" coords="159,116,171,105,172,96,170,87,166,90,155,86,156,75,150,74,146,78,138,77,138,72,128,71,128,65,120,62,116,66,124,76,117,78,117,87,127,88,130,95,128,97,128,105,136,105,144,106,144,110,157,116,150,112" href="zoekoplocatie-overijssel.html" onmouseover="mapje.src='<?php $domein; ?>images/other/overijsselselected.png';" onmouseout="mapje.src='<?php $domein; ?>images/other/nederlandnepkaartje.png';" />

            <area shape="poly" coords="52,104,59,84,61,66,64,50,68,34,75,43,69,57,80,53,91,63,93,72,84,97,88,101,84,111,78,101,65,108,60,110" href="zoekoplocatie-noord-holland.html" onmouseover="mapje.src='<?php $domein; ?>images/other/noordhollandselected.png';" onmouseout="mapje.src='<?php $domein; ?>images/other/nederlandnepkaartje.png';" />

            <area shape="poly" coords="93,62,105,63,111,63,123,63,132,61,136,55,141,55,141,49,135,43,128,40,135,28,134,24,128,19,116,21,105,26,95,38" href="zoekoplocatie-friesland.html" onmouseover="mapje.src='<?php $domein; ?>images/other/frieslandselected.png';" onmouseout="mapje.src='<?php $domein; ?>images/other/nederlandnepkaartje.png';" />

            <area shape="poly" coords="125,64,137,55,141,54,141,46,138,43,143,34,149,41,157,41,169,57,172,63,171,76,159,76,147,75,145,80,140,78,128,69,131,72,131,64" href="zoekoplocatie-drenthe.html" onmouseover="mapje.src='<?php $domein; ?>images/other/drentheselected.png';" onmouseout="mapje.src='<?php $domein; ?>images/other/nederlandnepkaartje.png';" />

            <area shape="poly" coords="128,18,139,18,148,16,154,13,162,14,166,21,168,26,175,25,178,35,176,40,177,52,173,59,156,40,150,42,146,34,138,44,129,41,133,34,133,26,128,19" href="zoekoplocatie-groningen.html" onmouseover="mapje.src='<?php $domein; ?>images/other/groningenselected.png';" onmouseout="mapje.src='<?php $domein; ?>images/other/nederlandnepkaartje.png';" />

            <area shape="poly" coords="70,31,81,24,87,19,105,15,118,13,136,12,129,16,110,17,93,22,83,27,75,34" href="zoekoplocatie-friesland.html" onmouseover="mapje.src='<?php $domein; ?>images/other/frieslandselected.png';" onmouseout="mapje.src='<?php $domein; ?>images/other/nederlandnepkaartje.png';" />
        </map>
    </div>
</div>
 
Hoi raymond88,
Je bent er al bijna, geloof ik. Ik heb 't idee dat het zit in de twee afbeeldingen die over elkaar heen zijn geplaatst. Je hebt de kaart van Nederland, en de "nep-kaart" (= ik neem aan een transparantje). Als je over het transparantje heen hovert, wordt dat vervangen door de provincie-van-hover, is de bedoeling denk ik.
En bij een mouseout moet het weer het "transparante kaartje" van NL worden, staat in de code. Maar intussen hover je waarschijnlijk net over een andere provincie, en moet die gaan verschijnen!
In elk geval, het komt er nu op neer, dat je "blind" over een provincie hovert op zoek naar een andere provincie (want het kaartje van NL komt niet terug, tenzij je de hele kaart verlaat). En soms gaat ie wipwapperen, als je net op een kiertje tussen de area's zit (dan komt wel even het NL-plaatje tevoorschijn flitsen - en weer weg).
Dat is tenminste wat mijn reconstructie met eigen (via Google geleende) plaatjes doet:
Ik denk dat je het beste het NL-kaartje (met de hover-areas) en het provinciekaartje naast elkaar kunt zetten in plaats van over elkaar heen. Dan heb je van al deze verschijnselen geen last. En als je niet over de NL-kaart hovert, blijft het provinciekaart-vakje gewoon leeg.
Komt dat in de richting?

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Het nepkaartje, is gewoon heel Nederland. De andere, zijn de provincies zelf. De provincies zelf bevat dus enkel en alleen de provincie zelf en komt over het nepkaartje heen. Stel het nepkaartje is grijs, en de provincies hovered zijn roze. Dan als ik over een provincie ga, is heel Nederland grijs, behalve de provincie, want die is roze. Nou heb ik alt's toegevoegd, en nou lijkt het beter te gaan. Echter, heel soms deed 'ie het nog niet. Toen bleef ik erop staan, en toen na 500ms ofzo kwam dan toch het plaatje (terwijl dit pngtje 2kB is ofzo...). Ik test gewoon op localhost, verder doet alles het wel. Vind het een beetje raar dat het zo gaat.
 
Aha, I see. - Dan is ie te vergelijken met bv.:
Daar zijn er allemaal verschillende kaartdelen gebruikt voor de hovers, maar nu gaan we het anders doen:
We bouwen het gedoe op met 3 "lagen":
  • Een <div> van het formaat van de NL-kaart, met de grijze NL-kaart als achtergrond.
  • In die <div> een transparant <img> op de voorgrond, met hetzelfde formaat, waarop de te behoveren <area>'s gezet kunnen worden.
  • Maar ertussenin een background van het transparante <img>, waarin de provincies getoond kunnen worden.
Nu hebben we maar twee images nodig: :)
  • Het transparantje.
  • Een strook met de grijze kaart plus alle provincies (steeds een provincie in kleur op de goede plek, de rest eromheen transparant - om de grijze kaart in het laagje eronder te kunnen zien, die hoeft dan niet herhaald te worden; terwijl voor de grijze kaart het eerste stukje van dezelfde strook gebruikt wordt):
nl-hoverkaartje.gif

(hier alleen de eerste 3 provincies ingetekend, de rest kan er gewoon achteraan)

Van deze strook kunnen we d.m.v. de background-position steeds het goede stukje laten zien. Dit heeft als voordeel: er hoeft maar één plaatje voor èn heel NL, èn voor alle provincies ingeladen te worden.
In het begin moet heel NL in het grijs getoond worden > en daarmee is het hele plaatje gewdownload bij de bezoeker. Als er gehoverd wordt voor een bepaalde provincie, hoeft er voor deze wissel geen nieuw plaatje gedownload te worden, want het is er al. De browser hoeft alleen maar de goede bg-positie te gebruiken. Betekent: er kan nooit een mini-pauze of een flitsje te zien zijn bij het hoveren. Ook het downloaden van dat ene grote gifje gaat sneller dan 12x een losse.
Niemand die iets ziet van het recyclen van de strook! :D

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan