Как поверх ее расположить 8 div блоков примерно по размеру прямоугольников(чтобы кликать по ним и обрабатывать события) и чтобы при ресайзе эти блоки оставались на месте прямоугольников на картинке?
Судя по примеру вы справились с задачей, осталось только подогнать размеры прямоугольников. Но накладывать на картинку таким образом - не лучший выбор. Вам следует либо рисовать на canvas, либо перенести большую часть в html/css код. Например сделать вот так много времени не займет: https://jsfiddle.net/profesor08/myg4zLo7/
Средний
