Изменение рабочей области изображения
Здравствуйте уважаемые знатоки!)
Возникла следующая проблема: есть скрипт (это часть скрипта):
$(window).load(function(){
$('#1 a').hover(
function () {
$(this).stop().animate({
'left': '431px',
'top': '270px'
}, 300);
},
function () {
$(this).stop().animate({
'left': '465px',
'top': '322px'
}, 300);
}
);
});
и код изображения: <div id='1'> <a href='#' style="position:absolute; left:465px; top:322px"><img src="images/1.png"></a> </div> вот ссылка где все работает ТЫЦ Перейдя по ссылке вы можете заметить что изображения у меня треугольные и при наведении на изображение происходит анимация через скрипт, но загвоздка в том что область изображения квадратная, и изображения цепляют друг друга, в итоге когда наводишь на один кусок - цепляется другой... Как можно решить эту проблему? Может нужно карту изображения как-то сделать и её привязать к скрипту... заранее благодарен! |
попробуйте вместо div использовать map, area
|
Цитата:
|
Цитата:
как на картинке сделать мапу и как её потом в скрипте привязать... я знаю вот есть неплохой сервис для создания мапы |
Цитата:
|
может кто знает?
|
Наложите на дивы map у которого z-index будет больше чем у картинок. Пропишите area с координатами. При наведении на area двигайте нужный див.
|
Цитата:
<map id="imgmap2013412143549" name="imgmap2013412143549" style="z-index:1"> <area shape="poly" alt="Волосы, ногти, зубы" title="" coords="2,76,35,47,100,13,141,4,174,4,175,240" href="phakty.html#bookmark1" target="_self"> </map> <div id="1" style="position:absolute; overflow:hidden; left:465px; top:322px; width:180px; height:255px; z-index:0"> <img src="images/1.png" alt="" border=0 width=180 height=255 usemap="#imgmap2013412143549"></div> </div> а как эту область в скрипте указать? как то так?
$(window).load(function(){
$('#imgmap2013412143549').hover(
function () {
$(this).stop().animate({
'left': '431px',
'top': '270px'
}, 300);
},
function () {
$(this).stop().animate({
'left': '465px',
'top': '322px'
}, 300);
}
);
});
|
Вот создали разметку со всеми картинками. Наложите сверху map в котором прописаны все координаты для наведения. При наведении на area определите какой под ним находится div с рисунком, и потом его и анимируйте.
|
<area shape="poly" alt="Волосы, ногти, зубы" title="" coords="2,76,35,47,100,13,141,4,174,4,175,240" href="phakty.html#bookmark1" target="_self" class="someClass">
$('.someClass').hover...
|
примерно все понял, вот только начал делать области и возникла проблема
<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" и наоборот, но эффекта нуль... |
Цитата:
|
Работает, что-то не так пишите.
Пример работы с area. В данном примере я слушаю событие hover на класс region (который является тегом area). |
Без кода ничего не понятно. Запилите тестовый пример куда-то
|
<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>
|
Сильно упрощенно (реализовано наведение только на 1 регион) и мне лень стили менять (немного разъехаласть область и картинка-фон), но смысл ясен.
|
вот пример: 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 чтобы слои не накладывались, так как карты созданы но они все равно накладываются... |
Ну во первых map должен быть привязан к чему либо (так у него скорее всего нет высоты), почитайте об этом теге. Во вторых положите все area в 1 map. При этом вам надо слушать событие hover на area, а действие выполнять с картинкой.
Но тут тоже есть неудобства. Дело в том, что при перемещении картинки область будет оставаться на месте. |
Координаты центра круга у Вас есть
Координаты мыши тоже 1.Считаем расстояние между точками. 2.Если меньше радиуса то считаем в каком секторе сейчас мышка |
vadim5june,
Вы правы. Тут не надо пользоваться в div в котором у вас лежат картинки слушайте mousemove и в зависимости от координат - двигайте сектора. |
| Часовой пояс GMT +3, время: 01:22. |