ボタンのクリックで画像の特定の部分の色を変更する

Question

私が持っているものは、ランダムに配置された多くのボールの画像です。
色を表すボタンがいくつかあります。ボタンをクリックすると、選択した内容に応じて色が変わります。
ボールは3つのカテゴリに分割され、常に同じ色に変更され、10種類の色から選択できます。
たとえば、ボールが9個ある場合、1,3,5,2,4,9および8,7,6のボールには、選択された1番目、2番目および3番目の色（ボタン）が表示されます。しかし、それらのボールは、もう一方のボールの隣にはありません。イメージの異なる部分にあります。
私は多くを検索しましたが、その方法を見つけることができませんでした。方法はありますか？複数の画像などを使用する必要がありますか？私は何も考えることができません。

Answer 1

各ボールがHTML要素（divなど）である方が良いです。 背景画像を設定することができ、各ボールはhtml要素になります。

次に、ボールのクリックを処理するイベントを設定できます。 例えば：

$('.ball-green').click(function(){ 
    $(this).removeClass('ball-green').addClass('ball-red'); 
}); 

Answer 2

あなたは間違いなく、各画像に異なるIDを持つ複数の画像を使用する必要があります。

ボタンのクリックに応じて、必要な画像のIDを取得し、変更する各ボールの背景画像を変更します。