<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.note{
position: absolute;
width: 80px;
background-color: #e2d79b;
text-align: center;
}
.num{background-color: #e2d79b;
}
.name{background-color: #9fcdff;
}
.stat{background-color: #b9bbbe;
}
</style>
</head>
<body>
<object data="doc.svg" type="image/svg+xml"></object>
<div class="note" style="left: 40px">
<p class="num">подсказка 1</p>
<p class="name">первый квадрат</p>
<p class="stat">статус 1</p>
</div>
<div class="note" style="left: 140px">
<p class="num">подсказка 2</p>
<p class="name">второй квадрат</p>
<p class="stat">статус 2</p>
</div>
<div class="note" style="left: 240px">
<p class="num">подсказка 3</p>
<p class="name">третий квадрат</p>
<p class="stat">статус 3</p>
</div>
<div class="note" style="left: 340px">
<p class="num">подсказка 4</p>
<p class="name">четвертый квадрат</p>
<p class="stat">статус 4</p>
</div>
<div class="note" style="left: 440px">
<p class="num">подсказка 5</p>
<p class="name">пятый квадрат</p>
<p class="stat">статус 5</p>
</div>
</body>
</html><svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="500" height="70">
<a xlink:href="#" id="arect1" opacity="1"
onmouseover="setAttribute('style', 'opacity: 0.5;');"
onmouseout="setAttribute('style', 'opacity: 1;');" >
<rect id="rect1" x="50" y="10"
width="50" height="50" fill="blue"
onmouseover="evt.target.setAttribute('fill','red');"
onmouseout="evt.target.setAttribute('fill','blue');"/>
</a>
<a xlink:href="#" id="arect2" opacity="1"
onmouseover="setAttribute('style', 'opacity: 0.5;');"
onmouseout="setAttribute('style', 'opacity: 1;');" >
<rect id="rect2" x="150" y="10"
width="50" height="50" fill="blue"
onmouseover="evt.target.setAttribute('fill','red');"
onmouseout="evt.target.setAttribute('fill','blue');"/>
</a>
<a xlink:href="#" id="arect3" opacity="1"
onmouseover="setAttribute('style', 'opacity: 0.5;');"
onmouseout="setAttribute('style', 'opacity: 1;');" >
<rect id="rect3" x="250" y="10"
width="50" height="50" fill="blue"
onmouseover="evt.target.setAttribute('fill','red');"
onmouseout="evt.target.setAttribute('fill','blue');"/>
</a>
<a xlink:href="#" id="arect4" opacity="1"
onmouseover="setAttribute('style', 'opacity: 0.5;');"
onmouseout="setAttribute('style', 'opacity: 1;');" >
<rect id="rect4" x="350" y="10"
width="50" height="50" fill="blue"
onmouseover="evt.target.setAttribute('fill','red');"
onmouseout="evt.target.setAttribute('fill','blue');"/>
</a>
<a xlink:href="#" id="arect5" opacity="1"
onmouseover="setAttribute('style', 'opacity: 0.5;');"
onmouseout="setAttribute('style', 'opacity: 1;');" >
<rect id="rect5" x="450" y="10"
width="50" height="50" fill="blue"
onmouseover="evt.target.setAttribute('fill','red');"
onmouseout="evt.target.setAttribute('fill','blue');"/>
</a>
</svg>
Простой
Средний
Средний
Простой
