По сути, у меня есть блок-схема с субблоками, показывающая взаимосвязи друг с другом с помощью стрелок. У меня есть SVG и карта изображения (с координатами для каждого субблока) для него (как показано ниже). Это хорошо работает, если щелкать каждый субблок для дальнейшей навигации.
Изображение блок-схемы
Я бы хотел сделать дополнительно:
Всякий раз, когда я наводю указатель мыши на любой подблок (скажем, подблок_1), должен быть выделен не только подблок_1, но также подблок_4 и подблок_9.
При наведении курсора наведя указатель мыши на SubBlock_4, я бы хотел, чтобы SubBlock_3 и Subblock_5 были выделены вместе с SubBlock_4.
Бонусом будет возможность выделить каждый SubBlock другим цветом (например, в 1. SubBlock_4 и SubBlock_9 бывают разных цветов)
<IMG SRC="Block.svg" USEMAP="#Block" />
<map id="Block" name="Block">
<area shape="rect" id="node1" href="SubBlock_1.htm" title="SubBlock_1" alt="" coords="544,13,745,113"/>
<area shape="rect" id="node2" href="SubBlock_2.htm" title="SubBlock_2" alt="" coords="656,168,916,324"/>
<area shape="rect" id="node3" href="SubBlock_3.htm" title="SubBlock_3" alt="" coords="1112,15,1415,111"/>
<area shape="rect" id="node4" href="SubBlock_4.htm" title="SubBlock_4" alt="" coords="1439,19,1663,106"/>
<area shape="rect" id="node5" href="SubBlock_5.htm" title="SubBlock_5" alt="" coords="1436,372,1683,520"/>
<area shape="rect" id="node6" href="SubBlock_6.htm" title="SubBlock_6" alt="" coords="1012,597,1267,749"/>
<area shape="rect" id="node7" href="SubBlock_7.htm" title="SubBlock_7" alt="" coords="259,568,611,779"/>
<area shape="rect" id="node8" href="SubBlock_8.htm" title="SubBlock_8" alt="" coords="1852,598,2104,749"/>
<area shape="rect" id="node9" href="SubBlock_9.htm" title="SubBlock_9" alt="" coords="1645,1496,1925,1664"/>
</map>