[CSS] Area shape een background color geven*

[Verwijderd]

Ik heb een kaart gemaakt van Europa en deze overtrokken met polygons. Nu wil ik de landen (area shape="poly") allemaal een andere kleur geven. De kleur bepaal ik aan de hand van info uit de database zodat er diverse kleurkaarten kunnen ontstaan. Het is dus niet de bedoeling dat ik de kaarten van te voren al inkleur.

Alles werkt inmiddels, behalve de kleuren op de achtergrond van de poly. Ik dacht dat dit zou kunnen met style="background-color:#kleur", maar dat werkt niet. Daarna dacht ik dat er wel een attribuut voor zou zijn, maar ook dat werkt niet. Ik heb uiteraard gegoogled, maar kan geen oplossing vinden. Het lijkt mij echter stug dat dit niet mogelijk is.

[ Voor 5% gewijzigd door Verwijderd op 14-11-2011 11:38 ]

[BtM909]

En laat eens een hele kleine testcase zien

Maakt het iets makkelijker om mee te denken.

[Verwijderd]

Ik heb mijn domein en hosting nog niet geregeld.. Maar ik kan wel een link sturen van een site die doet wat ik tot dusver ook doe, zie:

http://www.netzgesta.de/mapper/

In al die voorbeelden werken mouse-overs e.d. wel, alleen daar worden alle kleuren bepaald door de afbeelding die achter de poly's ligt. Ik zou graag niet de afbeelding, maar de poly zelf de kleur laten bepalen. Bij voorkeur uiteraard via een CSS klasse.

[BtM909]

Dat is dus geen test-case he

Als je nog geen webstek hebt, dan kan je je case hier neerplempen: http://jsfiddle.net/

[Verwijderd]

Op jsfiddle gaat het PHP / MySQL ook niet werken, JS en CSS zijn niet relevant voor het onderdeel waar ik naar op zoek ben, aangezien ik niets hiervoor voor de kaart gebruik.

Vandaar dat ik hier een stukje HTML van de imagemap en twee poly's paste. Ik zal jullie de 40 andere poly's besparen. Het "enige" dat ik nodig zou hebben is een individuele achtergrondkleur van deze poly's.

HTML:

<img src="images/europa2008.png" width="608" height="521" border="0" alt="" usemap="#europa2008_Map">
<map name="europa2008_Map">
<area shape="poly" alt="NL" coords="187,260, 188,260, 189,260, 190,260, 191,260, 192,260, 193,260, 194,260, 194,261, 195,262, 196,263, 196,264, 196,265, 196,266, 196,267, 195,268, 195,269, 195,270, 194,270, 193,270, 192,271, 192,272, 192,273, 193,274, 194,274, 194,275, 194,276, 194,277, 193,278, 192,279, 192,280, 192,281,
191,281, 190,281, 189,281, 188,281, 187,281, 186,282, 185,283, 186,284, 186,285, 187,286, 187,287, 187,288, 187,289, 186,290, 185,291, 184,291, 183,291, 182,290, 181,290, 180,289, 179,289, 178,288, 177,287, 176,286, 175,286, 174,286, 173,285, 172,286, 171,286, 170,286, 169,286, 168,286, 167,286, 166,286, 165,286, 165,285,
165,284, 166,284, 167,284, 168,284, 169,284, 170,283, 170,282, 170,281, 170,280, 170,279, 170,278, 171,277, 172,276, 173,275, 174,274, 174,273, 175,272, 175,271, 175,270, 176,269, 176,268, 176,267, 177,267, 178,267, 179,267, 179,268, 179,269, 179,270, 179,271, 178,272, 178,273, 178,274, 179,275, 180,275, 181,276, 182,275,
183,274, 184,274, 185,273, 185,272, 184,271, 183,270, 183,269, 182,268, 182,267, 182,266, 182,265, 182,264, 182,263, 182,262, 183,262, 184,261, 185,261, 186,261" href="#">
<area shape="poly" alt="BE" coords="161,287, 162,287, 163,287, 164,288, 165,288, 166,288, 167,289, 168,289, 169,289, 170,288, 171,288, 172,287, 173,287, 174,287, 175,287, 176,287, 177,287, 178,288, 179,289, 180,290, 181,290, 182,290, 183,291, 183,292, 183,293, 182,294, 182,295, 182,296, 183,297, 184,297, 185,297, 186,298,
187,299, 187,300, 187,301, 187,302, 187,303, 186,304, 185,304, 184,305, 183,306, 183,307, 182,308, 182,309, 182,310, 182,311, 182,312, 182,313, 181,313, 180,313, 179,313, 179,312, 178,311, 177,311, 176,310, 175,309, 175,308, 174,307, 173,306, 172,306, 171,306, 170,306, 169,306, 169,305, 169,304, 169,303, 168,302, 167,301,
166,301, 165,301, 164,300, 163,299, 162,299, 162,298, 162,297, 161,296, 161,295, 160,294, 159,294, 158,294, 157,294, 157,293, 157,292, 157,291, 157,290, 157,289, 158,289, 159,288, 160,288" href="#">
</map>

[ Voor 0% gewijzigd door BtM909 op 14-11-2011 12:00 ]

[BtM909]

Even voor de duidelijkheid. Dit is een client-side probleem, dus je kan toch een kleine map aanmaken en daarbij aangeven wat je hebt geprobeerd met CSS?

Je hoeft op jsfiddle niet alles te gebruiken wat je ziet

edit:

Punt is dat het wel moet blijken dat je moeite steekt in je topic. We zijn nu over en weer aan 't "chatten" en we hebben nog steeds geen kleine werkende test-case

[ Voor 29% gewijzigd door BtM909 op 14-11-2011 12:04 ]

[Verwijderd]

Dat wil ik uiteraard, alleen het gene wat ik geprobeerd heb is vrij beperkt, omdat ik simpelweg geen andere oplossingen of mogelijkheden kon vinden / bedenken.

http://jsfiddle.net/pz58Y/1/

[OkkE]

Zo ver ik weet kun je de vlakken van een image map ook niet zomaar inkleuren. Ik zou eens kijken naar de link van die mapper.js, aangezien dat blijkbaar precies is wat je wil.

Of anders zou je zelf iets kunnen doen door juist per land een afbeelding te maken waarbij dat land transparant is, zodat je als nog een background-color kunt gebruiken.

[Verwijderd]

Okke >

Ik ben aan het kijken bij die mapper link idd. Zo ver ik het begrijp lossen zij het op met jQuery, alleen mijn JS en jQuery kennis zijn zeer beperkt, waardoor het een beetje naar een spelt in een hooiberg zoeken is. Wat zij doen is overigens een kleurveranding bij een mouse-over. Ik zou een permanente kleur wijziging nodig hebben.

Deze link: http://davidlynch.org/projects/maphilight/docs/ doet overigens hetzelfde. Kleur bij mouse-over. Er staat daar wel iets onder over een achtergrondkleur (namelijk: <area ... class="{fillColor:'00ff00'}"> ) maar dat krijg ik niet werkend..

[Bosmonster]

Qua afbeeldingen zou je nog iets kunnen automatiseren middels Google Map Charts. Maar die mapper-plugin lijkt me een stuk praktischer.

Dat werkt met SVG overigens, de enige manier om iets crossbrowser te tekenen.

[ Voor 15% gewijzigd door Bosmonster op 14-11-2011 12:59 ]

[Verwijderd]

Bosmonster >

Idd Mapper (of een van de anderen) zou handiger zijn. Ik gebruik namelijk kaarten van diverse jaren waardoor de landgrenzen telkens wijzigen.

Overigens nog een voorbeeld, wederom alleen met mouse-over: http://www.workwithchoice...iting-the-html-image-map/

[BtM909]

Het punt is, en daarom wilde ik je graag even pushen naar een online testcase, dat je met bijvoorbeeld firebug heel snel kan zien waarom je een map niet direct kan stylen

Heb je het element al ge-inspect met bijv. FB?

[Verwijderd]

Ik heb het geinspect met FB en begrijp dat css hiervoor niet zal werken. Dat is inmiddels wel duidelijk. De oplossing ben ik nog niet achter. Klaarblijkelijk kan het wel via JS / jQuery. Ik ben aan het graven, maar met mijn JS kennis is dat niet gemakkelijk. Het heeft iig met fill color en canvas te maken, althans dat denk ik..

[T-MOB]

Ik zou dit eerlijkgezegd server side oplossen. Je kunt de kaart dynamisch inkleuren met behulp van de gd-library. Met imagefill() kun je een flood fill doen. Als dat aan de grenzen niet mooi wordt vanwege antialiasing kun je nog eerst met imagepolygon() je landen tekenen, dat inkleuren en tenslotte de png met mooie grenzen daaroverheen blenden.

[Verwijderd]

T-MOB >

Dat had ik voor elkaar met imagefilltoborder() in PHP. Dit deed ik dan voor wereldkaarten inclusief alle regio's. De kaart werd op 600 dpi ingeladen en ingekleurd, daarna verkleind tot 72dpi zodat het er toch nog mooi uit zag. Dit werkte perfect. De rede dat ik toch wilde overstappen is dat de laadtijden veel te hoog werden. In het verleden kreeg de site (nu dus offline) zo'n 4000 bezoekers per dag die allemaal als een idioot kaarten gingen renderen. Dat kon de server niet aan. Vandaar dat ik het (ondanks mijn zwakke JS kennis) clientside wilde zoeken.

Flash is en was geen optie vanwege de ontbrekende ondersteuning op iOS en het feit dat Adobe besloten heeft het mobiele Flashplatform niet meer verder te ontwikkelen.

[ Voor 12% gewijzigd door Verwijderd op 14-11-2011 15:44 ]

[Ram0n]

Verwijderd schreef op maandag 14 november 2011 @ 15:21:
T-MOB >

Dat had ik voor elkaar met imagefilltoborder() in PHP. Dit deed ik dan voor wereldkaarten inclusief alle regio's. De kaart werd op 600 dpi ingeladen en ingekleurd, daarna verkleind tot 72dpi zodat het er toch nog mooi uit zag. Dit werkte perfect. De rede dat ik toch wilde overstappen is dat de laadtijden veel te hoog werden. In het verleden kreeg de site (nu dus offline) zo'n 4000 bezoekers per dag die allemaal als een idioot kaarten gingen renderen. Dat kon de server niet aan. Vandaar dat ik het (ondanks mijn zwakke JS kennis) clientside wilde zoeken.

Flash is en was geen optie vanwege de ontbrekende ondersteuning op iOS en het feit dat Adobe besloten heeft het mobiele Flashplatform niet meer verder te ontwikkelen.

Zijn die kaarten zo uniek dan? Zijn ze telkens anders als de pagina herladen wordt? Anders moet je uiteraard wel gebruik maken van een cache, dat zal een hoop schelen

[Verwijderd]

Ik denk het wel. Het gaat om pak weg 2000 onderwerpen over verschillende jaren waarvan voor elk land (en vaak regio) data beschikbaar is. Deze data is voor mijn projectje beschikbaar gesteld door diverse onderzoeksinstellingen en universiteiten. Ik kan eens kijken of ik een gedeelte kan cachen en dit benchmarken.

[T-MOB]

Als het echt om zoveel gegevens gaat dan worden alternatieven ineteressanter. Dan kun je je misschien beter in SVG verdiepen en de kaarten/overlays daarin tekenen. Met een klein beetje hulp van google (SVGweb library) werkt dat in praktisch alle browsers.

[R4gnax]

T-MOB schreef op maandag 14 november 2011 @ 15:56:
Als het echt om zoveel gegevens gaat dan worden alternatieven ineteressanter. Dan kun je je misschien beter in SVG verdiepen en de kaarten/overlays daarin tekenen. Met een klein beetje hulp van google (SVGweb library) werkt dat in praktisch alle browsers.

Weet alleen wel waar je aan begint. De SVGWeb library is nl. een enorm stuk rommel die een keur aan kernfuncties van DOM (zoals getElementsByName, getElementById, addEventListener ) 'patcht' om bugs in oude browsers op te lossen.

Dit in tegenstelling tot bijv. jQuery, welke een nette abstractielaag introduceert en de DOM laag zelf met rust laat, zoals het hoort. Eigenlijk meteen een mooi voorbeeld want de combinatie jQuery 1.6.x + SVGWeb 'lurker above' (de meest recente stabiele versie) leidt gelijk tot problemen in Internet Explorer 9. Dit vanwege het patch-gedrag in de native SVG renderer die met z'n fikken aan getElementById gaat zitten.


Voor simpel tekenwerk (bijv. grafieken) gebruik je liever een abstractie laag zoals Raphael, die zowel VML als SVG output. Voor het zwaardere werk zoals geografie in hoog detail is er ironisch genoeg geen beter alternatief dan Flash. Silverlight heeft onvoldoende marktpenetratie en de performance van SVG laat behoorlijk te wensen over. (Je moet in veel gevallen eigenlijk al met de hand LODs aanmaken en server-side je kaarten pre-slicen zodat alleen het in de viewport zichtbare deel behandeld wordt door de renderer.)

[T-MOB]

R4gnax schreef op maandag 14 november 2011 @ 21:43:
[...]
Weet alleen wel waar je aan begint. De SVGWeb library is nl. een enorm stuk rommel die een keur aan kernfuncties van DOM (zoals getElementsByName, getElementById, addEventListener ) 'patcht' om bugs in oude browsers op te lossen.

In hoeverre heeft de TS daar dan last van? Hij hoeft volgens mij helemaal geen interactie te hebben met de plaatjes. Het gaat puur om het maken van oneindig aantal (kleur)variaties op een vaststaand plaatje.

Nu ik dat zo opschrijf schiet me nog een alternatieve methode te binnen om het te doen. Je kunt ook een gif (of indexed png) van de kaart maken en serverside het kleurenpalet van die file te manipuleren. Als je die gif als background-image achter een PNG met de grenzen zet kun je tot 255 landen een aparte kleur geven

Dit in tegenstelling tot bijv. jQuery, welke een nette abstractielaag introduceert en de DOM laag zelf met rust laat, zoals het hoort. Eigenlijk meteen een mooi voorbeeld want de combinatie jQuery 1.6.x + SVGWeb 'lurker above' (de meest recente stabiele versie) leidt gelijk tot problemen in Internet Explorer 9. Dit vanwege het patch-gedrag in de native SVG renderer die met z'n fikken aan getElementById gaat zitten.

Voor simpel tekenwerk (bijv. grafieken) gebruik je liever een abstractie laag zoals Raphael, die zowel VML als SVG output. Voor het zwaardere werk zoals geografie in hoog detail is er ironisch genoeg geen beter alternatief dan Flash. Silverlight heeft onvoldoende marktpenetratie en de performance van SVG laat behoorlijk te wensen over. (Je moet in veel gevallen eigenlijk al met de hand LODs aanmaken en server-side je kaarten pre-slicen zodat alleen het in de viewport zichtbare deel behandeld wordt door de renderer.)

Van Raphael had ik nog nooit gehoord, maar het ziet er zeer interessant uit!