12.04.2013, 21:59
|
|
Интересующийся
|
|
Регистрация: 08.04.2013
Сообщений: 23
|
|
примерно все понял, вот только начал делать области и возникла проблема
<map id="imgmap2013412143549" name="imgmap2013412143549" style="z-index:2">
<area shape="poly" alt="" title="" coords="180,254,-3,72,74,20,117,5,176,1" href="1" target="" class="someClass"></map>
<map id="imgmap201341220315" name="imgmap201341220315" style="z-index:1">
<area shape="poly" alt="" title="" coords="249,179,1,176,19,78,70,2" href="2" target="">
</map>
при наведении на 2 изображение все прекрасно работает (то есть видны края области, светится ссылка на "2"), а когда наводишь на 1 картинку, то там область работает только сверху, где её не цепляет вторая картинка. Думаю проблема в слоях (z-index). z-index нужно назначать областям (area) или картинкам? Логика подсказывает что областям)) пытался первой картинке назначить z-index="2" а второй z-index="1" и наоборот, но эффекта нуль...
Последний раз редактировалось pagemaster, 12.04.2013 в 22:15.
|
|
12.04.2013, 22:03
|
|
Интересующийся
|
|
Регистрация: 08.04.2013
Сообщений: 23
|
|
Сообщение от tsigel
|
$('.someClass').hover...
|
и эта привязка не работает почему то... |
|
13.04.2013, 08:37
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
Работает, что-то не так пишите.
Пример работы с area.
В данном примере я слушаю событие hover на класс region (который является тегом area).
Последний раз редактировалось tsigel, 13.04.2013 в 08:47.
|
|
13.04.2013, 14:48
|
|
Профессор
|
|
Регистрация: 14.09.2011
Сообщений: 523
|
|
|
Без кода ничего не понятно. Запилите тестовый пример куда-то
|
|
15.04.2013, 10:40
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<div style='background: url("http://tsigel.1gb.ru/my_projects/map/images/rf-map-b.png") no-repeat; width: 830px; height: 560px'>
<canvas id="map" width='830' height='560' style="position: absolute; left: 0; top: 0"></canvas>
<canvas id="map_line" width='830' height='560' style="position: absolute; left: 0; top: 0"></canvas>
<img src="http://tsigel.1gb.ru/my_projects/map/images/rf-map-b.png" width="830" height="560" border="0" alt="" usemap="#rf-map"
class="HoverImg map maphilighted"
style="position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px; opacity: 0">
<map name="rf-map" style="width: 350px; height: 350px">
<area shape="poly" alt="" coords="120,259,120,263,121,268,126,281,129,283,131,286,132,291,135,290,137,287,138,288,141,287,143,286,145,286,146,287,149,287,150,288,150,289,152,291,153,290,154,289,156,287,157,285,157,283,159,283,160,280,157,278,157,275,158,273,160,272,160,271,160,269,161,268,162,269,163,269,164,269,165,267,167,264,165,258,168,256,169,251,171,249,174,248,176,244,176,241,175,240,176,238,176,235,174,235,173,234,171,235,170,233,170,232,171,229,165,224,160,233,158,232,153,235,151,235,151,239,149,240,149,244,146,246,143,246,142,254,142,257,137,259,120,259"
href="#" class="region RU-KR">
</map>
</div>
<script>
$('.region').hover(function() {
showBorder($(this).attr('coords').split(','));
}, function() {
clear(document.getElementById("map_line"));
clear(document.getElementById("map"));
});
function showBorder(coords) {
var canvas, ctx;
function draw(canvas, coords, lineColor, fullColor) {
ctx = canvas.getContext("2d");
ctx.strokeStyle = lineColor;
ctx.fillStyle = fullColor;
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(coords[0], coords[1]);
for (var i = 2; i < coords.length; i = i + 2) {
ctx.lineTo(coords[i], coords[i + 1]);
}
ctx.stroke();
if (fullColor != null) {
ctx.fill();
}
ctx.closePath();
}
draw(document.getElementById("map_line"), coords, "#990066", null);
draw(document.getElementById("map"), coords, "#990066", 'rgba(135, 206, 235, 0.9)');
}
function clear(canvas) {
var ctx = canvas.getContext("2d");
canvas.width = canvas.width;
};
</script>
|
|
15.04.2013, 10:42
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
Сильно упрощенно (реализовано наведение только на 1 регион) и мне лень стили менять (немного разъехаласть область и картинка-фон), но смысл ясен.
|
|
15.04.2013, 17:36
|
|
Интересующийся
|
|
Регистрация: 08.04.2013
Сообщений: 23
|
|
вот пример: http://отличная-вода.рф/page.html
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<head>
<title>Биоэнергетическая вода Лонгавита | Longavita</title>
<!-- Подключаем jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
</head>
<body>
<!-- Подключаем скрипт который двигает наши куски -->
<script src="circle.js"></script>
<!-- Карты кусков -->
<map id="area1" name="area1" style="z-index:6">
<area shape="poly" alt="" title="" coords="180,254,-3,72,74,20,117,5,176,1" href="1" target="" class="image1">
</map>
<map id="area2" name="area2" style="z-index:5">
<area shape="poly" alt="" title="" coords="249,179,1,176,19,78,70,2" href="2" target="" class='image2'>
</map>
<map id="area3" name="area3">
<area shape="poly" alt="" title="" coords="76,174,32,114,9,65,3,2,246,2" href="3" target="">
</map>
<map id="area4" name="area4">
<area shape="poly" alt="" title="" coords="2,178,178,0,214,45,242,109,247,174" href="4" target="">
</map>
<map id="area5" name="area5">
<area shape="poly" alt="" title="" coords="174,174,224,103,245,51,247,-5,0,1" href="5" target="" />
</map>
<map id="area6" name="area6">
<area shape="poly" alt="" title="" coords="0,244,73,233,130,207,171,171,-1,0" href="6" target="" />
</map>
<map id="area7" name="area7">
<area shape="poly" alt="" title="" coords="2,13,65,21,138,53,175,86,2,262" href="7" target="" />
</map>
<map id="area8" name="area8">
<area shape="poly" alt="" title="" coords="173,246,98,232,37,202,0,175,170,9" href="8" target="" />
</map>
<!-- Картинки кусков -->
<div id="1" style="position:absolute; overflow:hidden; left:465px; top:322px; width:180px; height:255px">
<img src="images/1.png" alt="" border=0 width=180 height=255 usemap="#area1">
</div>
<div id="2" style="position:absolute; overflow:hidden; left:393px; top:398px; width:252px; height:180px">
<img src="images/2.png" alt="" border=0 width=252 height=180 usemap="#area2">
</div>
<div id='3'>
<a href='#' style="position:absolute; left:393px; top:579px"><img src="images/3.png" usemap="#area3"></a>
</div>
<div id='4'>
<a href='#' style="position:absolute; left:646px; top:398px"><img src="images/4.png" usemap="#area4"></a>
</div>
<div id='5'>
<a href='#' style="position:absolute; left:647px; top:578px"><img src="images/5.png" usemap="#area5"></a>
</div>
<div id='6'>
<a href='#' style="position:absolute; left:646px; top:579px"><img src="images/6.png" usemap="#area6"></a>
</div>
<div id='7'>
<a href='#' style="position:absolute; left:646px; top:309px"><img src="images/7.png" usemap="#area7"></a>
</div>
<div id='8'>
<a href='#' style="position:absolute; left:469px; top:579px"><img src="images/8.png" usemap="#area8"></a>
</div>
</body>
JS:
$(window).load(function(){
// Используем только этот кусок скрипта для примера привязки области изображения к скрипту
$('.image1').hover(
function () {
$(this).stop().animate({
'left': '465px',
'top': '322px'
}, 300);
},
function () {
$(this).stop().animate({
'left': '431px',
'top': '270px'
}, 300);
}
);
});
// конец области
Вопрос в чем, почему привязка (карты к скрипту по названию класса) не работает? И как прописать (и кому? картам или картинкам?) z-index чтобы слои не накладывались, так как карты созданы но они все равно накладываются...
Последний раз редактировалось pagemaster, 15.04.2013 в 17:48.
|
|
15.04.2013, 17:45
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
Ну во первых map должен быть привязан к чему либо (так у него скорее всего нет высоты), почитайте об этом теге. Во вторых положите все area в 1 map. При этом вам надо слушать событие hover на area, а действие выполнять с картинкой.
Но тут тоже есть неудобства. Дело в том, что при перемещении картинки область будет оставаться на месте.
|
|
15.04.2013, 17:50
|
 |
Студент
|
|
Регистрация: 30.04.2012
Сообщений: 1,113
|
|
|
Координаты центра круга у Вас есть
Координаты мыши тоже
1.Считаем расстояние между точками.
2.Если меньше радиуса то считаем в каком секторе сейчас мышка
|
|
15.04.2013, 18:06
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
vadim5june,
Вы правы. Тут не надо пользоваться в div в котором у вас лежат картинки слушайте mousemove и в зависимости от координат - двигайте сектора.
|
|
|
|
