Изменить цвет для части прозрачного изображения

Question

У меня есть это прозрачное изображение:

1

и этот скрипт для изменения цвета с выделением:

<script>
function colorDiv(){
    var selection = document.getElementById('bgcolor').value;
    var div = document.getElementById('change1');

    //echo the value
    document.getElementById("demo").innerHTML = selection;

    switch (selection) {
        case "1":
            div.style.backgroundColor = 'grey';
            break;
        case "2":
            div.style.backgroundColor = 'white';
            break;
        case "3":
            div.style.backgroundColor = 'blue';
            break;
        case "4":
            div.style.backgroundColor = 'cyan';
            break;
        case "5":
            div.style.backgroundColor = 'green';
            break;
    }
}

Сценарии работают хорошо, но я хочу изменить цвет левой стороны изображения, что мне делать? Должен ли я отделить часть изображения или есть какой-либо метод для изменения цвета изображения на основе координат пикселей, например, imagemap?