Capture a state name (Uf) and an image

Question

Good night to you all.

I have an image of Brazil with its states:

How do I, if I click on the image of the state of São Paulo, fill this name in a text field.

<input type="text" name="uf" id="uf"  value="">

Thanks in advance help.

Answer 1

To know where you click the best is to have an SVG that has elements for each region and Javascript can know where the click occurred.

For caprat you can do so, for example:

The structure of the SVG (example of SVG copied from here):

 <g>
    <a xlink:href="#tocantins">
    ... etc

and the jQuery

$('svg a').on('click', function(e) {
    e.preventDefault();
    var id = this.getAttributeNS('http://www.w3.org/1999/xlink', 'href').slice(1);
    $('input').val(id);
});

Online example: https://jsfiddle.net/jaxzw33k/1