Given the following image:
How can I make javascript to select a country and paint it?
Select part of an image
2
asked by anonymous 25.05.2016 / 17:54
2 answers
0
To paint exactly the image I think is not possible, because it is a .gif image.
There are some other options, but laborious ...
Play each country as a separate, backgroundless image by placing it overlapping an image with the blue background. "Cropping" and Positioning these images will be very laborious. You can use GIMP to crop the images. For each record you should save a new image
Name the files as -White. The important part would be the "-white", which should be exactly the same
Create a copy of these color images. By inserting them in the same position as the blank image, with style = 'display: none' to hide it, name them 'Painted', 'Painted' should look exactly the same.
In each of the images, in both white and colored, put the following code:
onclick="pais = this.src.split (-); this.src = (pais [1] ==" Branco "? pais [0] +" - Painted ": pais [0] + '- Branco ')
You can test this with simple images before, such as squares or something, before you risk having all the work of separating the images
Another option would be to use a vector image with, but that would also give you a job.
The option of Vector maps is the most suitable if you do not exactly need this image
20.10.2016 / 15:02
0
I imagine the most effective solution would be to use SVG ; I suggest you look for a map like this in svg, and it is represented in a way that looks similar to the example below:
<svg id="mapa-mundi">
<path id="brasil" d="..." />
<path id="usa" d="..." />
</svg>
And then you could freely manipulate each country using JQuery and color each country independently, based on user interaction ...
<style>
.colored{ fill:lightcoral }
</style>
$("#mapa-mundi > path").on("click",function() {
$(this).toggleClass('colored');
});
20.10.2016 / 16:09