[CSS] Area shape een background color geven*

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
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 ]


Acties:
  • 0 Henk 'm!

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

En laat eens een hele kleine testcase zien :)

Maakt het iets makkelijker om mee te denken.

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
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.

Acties:
  • 0 Henk 'm!

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Dat is dus geen test-case he :)

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

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
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:
1
2
3
4
5
6
7
8
9
10
<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 ]


Acties:
  • 0 Henk 'm!

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

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 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
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/

Acties:
  • 0 Henk 'm!

  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 04-09 08:16

OkkE

CSS influencer :+

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.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
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..

Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 10-09 08:45

Bosmonster

*zucht*

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 ]


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
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/

Acties:
  • 0 Henk 'm!

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

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?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
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..

Acties:
  • 0 Henk 'm!

  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 12:12
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.

Regeren is vooruitschuiven


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
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 ]


Acties:
  • 0 Henk 'm!

  • Ram0n
  • Registratie: Maart 2002
  • Laatst online: 03-07 13:05

Ram0n

Bierbrouwende nerd

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 :)

Eigenaar/brouwer Milky Road Brewery


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
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.

Acties:
  • 0 Henk 'm!

  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 12:12
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.

Regeren is vooruitschuiven


Acties:
  • 0 Henk 'm!

  • R4gnax
  • Registratie: Maart 2009
  • Laatst online: 06-09 17:51
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.)

Acties:
  • 0 Henk 'm!

  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 12:12
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!

Regeren is vooruitschuiven

Pagina: 1