О карте изображения. Должна быть одна карта, та что показана первой, вторая это нечто.... У вас четыре ската на изображении, значит и столько же областей на карте:
<map name="Map" id="Map">
<area id="rect-1" title="скат 1" shape="poly" coords="13,10,238,9,239,55,60,55" />
<area id="rect-2" title="скат 2" shape="poly" coords="60,55,239,54,239,100,104,100" />
<area id="rect-3" title="скат 3" shape="poly" coords="60,55,103,97,104,160,60,160" />
<area id="rect-4" title="скат 4" shape="poly" coords="13,10,60,55,60,160,13,160" />
</map>
Атрибут href им совсем не нужен, переходов по ним же вы не планируете. Имя ската нужно помещать в title, а не в alt, назначение alt иное. Если связывать области со скриптом (объектом описывающем введенные размеры и т.п.), то задать им идентификаторы. Добавьте в секцию $(function() { }); такой код:
$('#Map area').click(function() {
alert(this.id)
}).mouseenter(function() {
alert('Показать введенные размеры')
});
и щелчок по области отобразит ее ID. А в реалии это показать форму и заполнить ее данными из связанного объекта, если размеры уже вводились, а также просчитать площадь (можно при вводе просчитанную запоминать, а не просчитывать постоянно).
Сложнее будет с маркированием, то есть окрасить, так как это изображение (но сделать можно), но на первых порах (для освоения) достаточно при наведении на область отображать уже введенные значения (как показано в коде). Можно над областями такими их прописать, что и будет являться признаком заполнения параметров ската.
Более гибкое решение, это SVG.