95 lines
2.5 KiB
HTML
95 lines
2.5 KiB
HTML
<!DOCTYPE HTML>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<style>
|
||
body {
|
||
height: 2000px; /* подсказка должна работать при прокрутке */
|
||
}
|
||
|
||
#house {
|
||
margin-top: 50px;
|
||
width: 400px;
|
||
border: 1px solid brown;
|
||
}
|
||
|
||
#roof {
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 200px solid transparent;
|
||
border-right: 200px solid transparent;
|
||
|
||
border-bottom: 20px solid brown;
|
||
margin-top: -20px;
|
||
}
|
||
|
||
p {
|
||
text-align: justify;
|
||
margin: 10px 3px;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<div data-tooltip="Это – внутренность дома" id="house">
|
||
<div data-tooltip="Это – крыша" id="roof"></div>
|
||
|
||
<p>Жили-были на свете три поросёнка. Три брата.</p>
|
||
|
||
<p>Все одинакового роста, кругленькие, розовые, с одинаковыми весёлыми хвостиками.</p>
|
||
|
||
<p>Даже имена у них были похожи. Звали поросят Ниф-Ниф, Нуф-Нуф и Наф-Наф. Всё лето они кувыркались в зелёной траве, грелись на солнышке, нежились в лужах.</p>
|
||
|
||
<p>Но вот наступила осень. <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше…">Наведи на меня</a></p>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
|
||
|
||
// --------- вспомогательные функции ---------
|
||
|
||
function getCoords(elem) {
|
||
var box = elem.getBoundingClientRect();
|
||
|
||
var body = document.body;
|
||
var docEl = document.documentElement;
|
||
|
||
var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
|
||
var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
|
||
|
||
var clientTop = docEl.clientTop || body.clientTop || 0;
|
||
var clientLeft = docEl.clientLeft || body.clientLeft || 0;
|
||
|
||
var top = box.top + scrollTop - clientTop;
|
||
var left = box.left + scrollLeft - clientLeft;
|
||
|
||
return { top: Math.round(top), left: Math.round(left) };
|
||
}
|
||
|
||
function getPageScroll() {
|
||
if (window.pageXOffset != undefined) {
|
||
return {
|
||
left: pageXOffset,
|
||
top: pageYOffset
|
||
}
|
||
}
|
||
|
||
var html = document.documentElement;
|
||
var body = document.body;
|
||
|
||
var top = html.scrollTop || body && body.scrollTop || 0;
|
||
top -= html.clientTop;
|
||
|
||
var left = html.scrollLeft || body && body.scrollLeft || 0;
|
||
left -= html.clientLeft;
|
||
|
||
return { top: top, left: left };
|
||
}
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|