Строка таблицы выделяет область изображения

Question

У меня есть таблица с четырьмя рядами, которые выделяются при наведении мыши.У меня также есть изображение с четырьмя областями, которые соответствуют строкам в таблице.Мне нужно, чтобы области на рисунке были выделены так же, как и строки таблицы.

Это изображение иллюстрирует мою проблему: http://projekty.freshynek.cz/table-roll-over-picture-highlight.jpg

Answer 1

Я заменил $ (документ) на jQuery (документ), и он работает.

Answer 2

Один из способов - разделить изображение и назначить разные селекторы для каждой области изображения, соответствующей строкам, и добавить javascript для выделения этих областей при наведении на них строки.

Другой способ - создать области поверхизображение, пример:

function getArea(elm) {
   var index = /row([0-9])/.exec(elm.id)[1];
   //console.log(index);
   return document.querySelector("#area"+index);
}
function highlight(elm) {
   getArea(elm).classList.remove("hidden");
}
function removehighlight(elm) {
   getArea(elm).classList.add("hidden");
}

.row {
  width: 200px;
  background: black;
  border: 1px solid blue;
  color: yellow;
  margin-bottom: 1px;
}
.area {
  opacity: 0.5;
  position: absolute;
}
.hidden {
  display: none;
}
#areas {
  position: absolute;
}
#area1 {
  background: #8b5fff;
  height:50px;
  width: 60px;
  left: 40px;
  top: 100px;
}
#area2 {
  background: #FF8080;
  height:20px;
  width: 30px;
  left: 80px;
  top: 10px;
}
#area3 {
  background: #E1E100;
  height:60px;
  width: 40px;
  left: 120px;
  top: 120px;
}

<div id="row1" class="row" onmouseover="highlight(this)" onmouseout="removehighlight(this)">row 1</div>
<div id="row2" class="row" onmouseover="highlight(this)" onmouseout="removehighlight(this)">row 2</div>
<div id="row3" class="row" onmouseover="highlight(this)" onmouseout="removehighlight(this)">row 3</div>
<div id="areas">
  <div id="area1" class="area hidden">&nbsp;</div>
  <div id="area2" class="area hidden">&nbsp;</div>
  <div id="area3" class="area hidden">&nbsp;</div>
</div>
  <img src="http://gravatar.com/avatar/e4ea437b24f9ddf2bcf52604ceae28e4?s=200">

Пример с несколькими таблицами: http://jsfiddle.net/8mvahL1o/35/

Другой сложный пример: http://jsfiddle.net/urg62cpy/19/

Обратный пример: http://jsfiddle.net/urg62cpy/24/ с кликом по .area с.