Ответы об обмене изображениями будут работать. Тем не менее, делая это в изображениях, вы в конечном итоге используете большую полосу пропускания, чем вам действительно нужно использовать для этого. Произойдет одно из двух: либо люди загрузят кучу изображений, которые они никогда не загрузят, либо им придется ждать загрузки нового изображения при каждом нажатии. Для пользователей с высокоскоростным соединением это не будет проблемой, но пользователи медленных соединений (или, возможно, мобильных устройств) определенно могут испытать это как негатив.
Лучше было бы иметь только одну версию изображения, как это выглядит при первой загрузке. Хитрость заключается в том, чтобы сделать цифры на изображении прозрачными. Тогда вы можете просто сделать так, чтобы браузер пользователя изменил цвет фона при нажатии. И в качестве бонуса, если вы когда-нибудь захотите добавить другие цвета для обозначения других вещей, это тоже просто! И вы можете выделить любую комбинацию чисел.
После некоторых экспериментов я обнаружил, что атрибут style в <area> не может быть использован для установки цветов фона, поэтому вам нужно что-то еще для принудительного применения цветов. Я предлагаю <div>, расположенный в том же месте, что и каждый круг, через что-то вроде:
<div id='div1' style='position:relative; top:-400px; left:5px; height:30px; width:30px; z-index:-1'> </div> где вы бы отрегулировали верхние / левые значения, чтобы разместить их там, где вам это нужно. Значение z-index:-1 важно, чтобы оно отображалось за изображением. Чтобы поэкспериментировать с размещением этих элементов, вы можете захотеть установить цвет фона на что-нибудь, чтобы вы могли их видеть.
Как только у вас появится прозрачное изображение и все элементы div будут размещены, вам просто понадобится немного jQuery для его активации. Примерно так:
$('area').click(function(){
var number = $(this).attr('title');
$('#div'+number).css('background-color', 'red');
})