Select on the map / img

-1

After I trimmed this image into states, how could I put it together?

    
asked by anonymous 16.01.2018 / 00:53

1 answer

1

The question is not clear enough, but responding to your comment

  

I want to put them together and relate to a link, that is .. even   add a javascript / css functions to upload the image and in the   display a text box or similar.

If you want more freedom, you'll need a map in SVG format to be able to interact with javascript and apply CSS to it.

To manipulate svg more easily, you can use the D3 library. Here are useful links and a small example of how to paint the map with css and javascript.

Map of Brazil in SVG

link

D3 Library

link

Functional example

link

Code

HTML

<div id="map">
    <!-- svg goes here -->
</div>

Javascript

d3.select('#map>svg')
  .selectAll('path')
  .classed('land',true)
  .on('click', () => window.open('http://www.google.com.br/search?q=' + d3.event.target.id))

CSS

.land {
  fill: #33aa33;
  fill-opacity: 1;
  stroke: white;
  stroke-opacity: 1;
  stroke-width: 0.5;
  cursor:pointer;
}

.land:nth-child(2n) {
  fill: #ff3333;
}

.land:hover{
  opacity: 0.5;
}
    
16.01.2018 / 12:57