Версия для печати темы
Нажмите сюда для просмотра этой темы в обычном формате
Форум о web-дизайне, графике - RusForumz _ Web-программирование: JavaScript _ Как сделать выделение части рисунка?
Автор: Boo 25.3.2008, 1:54
Посоветуйте, пожалуйста!
На странице есть блок, в который на бекграунд грузится большая картинка, а в сам блок - прозрачная гифка 1х1 к которой привязывается МАР с несколькими AREA (типа карта).
Хочу сделать чтобы области выделялись рамкой при наведении.
Можно ли сделать это при помощи только CSS, типа :
a:hover { BORDER-RIGHT: ...; BORDER-TOP: ...; BORDER-LEFT: ...; BORDER-BOTTOM: ...;}
или придётся писать скрипт типа onmouseover() и, например, позиционировать прозрачный .gif с рамкой по периметру в нужном месте ?
Не хочу использовать готовые скрипты (видел тему тут... ) хочу разобраться сам.
Прошу пнуть меня в нужном направлении . 
Автор: Ejik-Kurgan 3.4.2008, 6:34
Сделать с помощью css можно! Но все равно понадобиться другая картинка!
Смотри здесь!
http://www.htmlbook.ru/content/?id=110
Автор: Boo 4.4.2008, 9:35
Сделать с помощью css можно! Но все равно понадобиться другая картинка!
Смотри здесь!
http://www.htmlbook.ru/content/?id=110
Ага, спасибо! Но дело в том что поменять всю картинку я могу, это не проблема.
проблема в том что мне надо выделить только одну <AREA> с рисунка.
Вот примерный код:
<script type="text/javascript">
function showrect(x1,y1,x2,y2)
{
item=document.getElementById("pic");
item.style.offsetLeft = x1;
item.style.offsetTop = y1;
item.style.height = y2-y1;
item.style.width = x2-x1;
}
</script>
<BODY>
<IMG id="pic" src="null.gif" HEIGHT="480" WIDTH="640" BORDER="2" style="position: absolute; top: 0px; left: 0px; z-index: 1">
<MAP NAME="ImageMap">
<AREA HREF="1.html" SHAPE="rect" COORDS="11,11,45,45" ALT="" onMouseOver="showrect(11,11,45,45)" onMouseOut="showrect(1,1,640,480)">
<AREA HREF="2.html" SHAPE="rect" COORDS="111,111,145,145" ALT="" onMouseOver="showrect(111,111,45,45)" onMouseOut="showrect(1,1,640,480)">
</MAP>
<DIV style='BACKGROUND: url(map.jpg) no-repeat top left;'>
<IMG src="null.gif" HEIGHT="480" WIDTH="640" USEMAP="#ImageMap" border='0' style="position: relative; top: 0px; left: 0px; z-index: 2">
</DIV>
</BODY>
Это если яваскриптом...
Скрипт должен бы перемещать ДИВ с "position: absolute" в нужное место
Только не работает...
А с помощью CSS, я нинаю куда привязать a:hover.
Автор: Ejik-Kurgan 4.4.2008, 10:58
Если это весь код то в нем чего то не хватает!
например слова var в строке item=document.getElementById("pic");!
Попробуй написать! Может что-то и зашевелится!
Автор: Boo 4.4.2008, 12:23
Если это весь код то в нем чего то не хватает!
например слова var в строке item=document.getElementById("pic");!
Попробуй написать! Может что-то и зашевелится!
Спасибо!
кое что зашевелилось
Теперь стало подавать признаки жизни и в IE.
В общем вижу порблему в следующем:
item.style.height = y2-y1;
item.style.width = x2-x1;
работает, то есть рамка изменяет размеры
item.style.offsetTop = y1;
а вот это - не хочет.
Помогите выяснить, как с помощью DOM обратиться и поменять
то бишь значения топ и лефт, а то я подозреваю что offsetTop и offsetLeft не совсем правильно.
Автор: Ejik-Kurgan 4.4.2008, 12:39
Я JavaScript еще не до изучал!
А тему про аргументы function name(аргумент, аргумент, аргумент, аргумент){} не понял!
Поэтому не стоит ли прописать через var прописать x1,y1,x2,y2?
Помогите выяснить, как с помощью DOM обратиться и поменять
Код
style="position: absolute; top: 0px; left: 0px;
обратиться и поменять не выйдет а обратиться и поставить другий стиль можно (тока сёня не скажу, читать надо)!
Автор: krest 4.4.2008, 13:12
item.style.left = x1;
item.style.top = y1;
offsetTop и offsetLeft используются так
..=item.offsetLeft;
alert (item.offsetTop);
то есть используется только для чтения
Автор: Boo 4.4.2008, 13:24
Ejik-Kurgan
А тему про аргументы function name(аргумент, аргумент, аргумент, аргумент){} не понял!
Поэтому не стоит ли прописать через var прописать x1,y1,x2,y2?
Что ты не понял? тут-то вроде как раз всё правильно. при наведении на область <AREA>, вызывается функция в которую передаются координаты этой области, которую надо выделить.
krest!
Всё заработало, спасибо огромное.
Автор: Ejik-Kurgan 4.4.2008, 13:27
Я не про эту тему говорил! я книжку читаю!
Русская версия Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)