0

I'm new in this world and I have just a few concepts about HTML, CSS and JavaScript. I need to know if I could treat an areas map as a divs and give them color and style. My final product is a map world where their countries change color in case I click some buttoms or filters I want to create. For example, If I click on the 'Low cost' buttom I'd like that Spain, France, Portugal, Italy and Germany turn in green colour. I dont even know if this is possible. This is the the code I have made by the moment where I've created a poly area map that belongs to Spain. Thank You in advance¡¡

<section class="bd ilblock">
    <map name="mapeo" id="mapa">
        <area alt="Spain" shape="poly" coords="551.99,169.86 552.70,170.00 556.70,173.14 560.70,171.14 566.70,171.29 573.70,167.70 575.70,162.86 578.70,157.14 582.70,154.14 588.70,147.14 565.70,143.14 546.70,142.00 546.99,149.00
        555.84,149.00 554.84,155.00 550.84,162.00" href="" style="backgroundcolor: #080800">
    </map>

    <img src="../varied/mapas/mapamundiprueba.svg.png" usemap="#mapeo" id="mapamundo">
</section>
Nico O
  • 13,762
  • 9
  • 54
  • 69
David Dsr
  • 327
  • 2
  • 5
  • 19
  • 1
    No, this is not possible, [`area`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area) is an [empty element](https://developer.mozilla.org/en-US/docs/Glossary/empty_element), hence it doesn't have any content to style. Usually an overlying [`canvas`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element is used to "style areas". – Teemu Oct 19 '14 at 10:53
  • 1
    here is an example of an svg image of a world map: http://raphaeljs.com/world/ each element is a single `` which you can alter with js and css. Here is an article of css + svg: http://css-tricks.com/using-svg/ – Nico O Oct 19 '14 at 10:59

0 Answers0