| |
 34.2 Кб |
|
| | Есть план этажа (схема) - картинка. При наведении на квартиру, например, она выделяется красными линиями (используется блок <div> с красными границами, и позиционируется абсолютно при помощи скрипта)
Для этого используется <map> и OnMouseOver.
<script language="javascript">
function test(f,x,y,x2,y2)
{
if (f==1)
{
h = y2 - y;
w = x2 - x;
vis('block');
document.getElementById('in').style.left = x + 'px';
document.getElementById('in').style.top = y + 'px';
document.getElementById('in').style.width = w + 'px';
document.getElementById('in').style.height = h + 'px';
}
else
{
/* setTimeout("vis('none')", 500); */
vis('none');
}
}
function vis(v)
{
document.getElementById('in').style.display = v;
}
</script>
<div style="position:relative;">
<div id="in" style="position:absolute;border:3px solid red;display:none;cursor:pointer;"></div>
<img src="plan_2.gif" width="549" height="438" alt="" style="border:0px;" usemap="#map" />
<map name="map">
<area coords="0,0,99,99" OnMouseOver="test(1,0,0,99,99)" href="link4.html">
<area coords="50,200,100,250" OnMouseOver="test(1,50,200,100,250)" href="link4.html">
<area coords="415,100,540,200" OnMouseOver="test(1,415,100,540,200)" href="link4.html">
</map>
</div>
|
Проблема в том, что он работает корректно только при выравнивании картинки слева (так как отсчет координаты X идет слева). Мне же нужно выровнить картинку посередине...
В приложенном архиве есть исходник. | |
| |
|
|
| |
|
|
| |
для: fix
(27.10.2008 в 13:08)
| | | Предложу иной подход - при нём картинка может быть размещена где угодно и как угодно:
<html>
<head>
<script>
function test (area1)
{
var obj = document.getElementById ('myPic');
var obj_left = obj_top = 0;
while (obj.offsetParent)
{
obj_left += obj.offsetLeft;
obj_top += obj.offsetTop;
obj = obj.offsetParent;
}
var k = area1.coords.split (',');
with (document.getElementById ('in').style)
{
top = (obj_top + k [1] * 1 - 3) + 'px';
left = (obj_left + k [0] * 1 - 3) + 'px'
width = (k [2] * 1 - k [0] * 1 + 6) + 'px';
height = (k [3] * 1 - k [1] * 1 + 6) + 'px';
display = 'block';
}
}
</script>
</head>
<body>
<div id="in" style="z-index: 99; position: absolute; border: 3px solid red; display: none; cursor: pointer"></div>
План этажа<br><br>
<map name="map">
<area shape="rect" coords="0,0,99,99" onmouseover="test (this)" href="link4.html">
<area shape="rect" coords="50,200,100,250" onmouseover="test (this)" href="link4.html">
<area shape="rect" coords="415,100,540,200" onmouseover="test (this)" href="link4.html">
</map>
<img id="myPic" src="plan_2.gif" width="549" height="438" alt="" style="position: relative; border: 0" usemap="#map" />
</body>
</html>
|
* Выделенное жирно - ВАЖНО. | |
| |
|
|
| |
|
|
| |
для: PAT
(28.10.2008 в 09:53)
| | | Большое спасибо, все работает!!!
Спасибо, PAT, ты настоящий маг :) | |
| |
|
|
