Map image and save array to database

Question

I have an image of the human dental arch. I want to display it and when clicked on a given tooth, the value was filling in an input text field.

Example:

[13,12,11]

The image I’m going to use is this:

The idea is to click on tooth 11, 12 and 13 your values be filled in the form field to be inserted in the bank.

I believe this is with javascript, but I’m lost in it. Could you help me?

Answer 1

On wikipedia there is an SVG which may be adapted to have numbers. I made this adaptation and with a loop you can join event headphones and an input that does what you want. Javascript could be like this:

var paths = [].slice.call(document.querySelectorAll('path.selectable'));
var text = [].slice.call(document.querySelectorAll('text'));
var input = document.querySelector('input');
var selecionados = [];

for (var i = 0; i < paths.length; i++) {
    paths[i].addEventListener('click', handler(text[i].innerHTML));
}

function handler(nr) {
    return function() {
        var selected = this.classList.toggle('selected');
        if (selected) selecionados.push(nr);
        else selecionados = selecionados.filter(function(_nr){ return _nr != nr; });
        input.value = selecionados.join(', ');
    }
}

What this does is select/de-select teeth, and join the selected tooth number in the input.

jsFiddle: https://jsfiddle.net/4o0q7sc8/