 Как сделать выделение части рисунка?, CSS или JavaScript |
На этом месте находится расчудесная шапка. Включите flash - не пожалеете!
Здравствуйте, гость ( Вход | Регистрация )
  |
| Boo |
 25.3.2008, 1:54
Сообщение
#1
|
 Только зарегистрировавшийся Группа: Пользователи Сообщений: 9 Регистрация: 25.3.2008 Пользователь №: 12 376 Репутация:  1   |
Посоветуйте, пожалуйста!
На странице есть блок, в который на бекграунд грузится большая картинка, а в сам блок - прозрачная гифка 1х1 к которой привязывается МАР с несколькими AREA (типа карта). Хочу сделать чтобы области выделялись рамкой при наведении. Можно ли сделать это при помощи только CSS, типа : a:hover { BORDER-RIGHT: ...; BORDER-TOP: ...; BORDER-LEFT: ...; BORDER-BOTTOM: ...;} или придётся писать скрипт типа onmouseover() и, например, позиционировать прозрачный .gif с рамкой по периметру в нужном месте ? Не хочу использовать готовые скрипты (видел тему тут... ) хочу разобраться сам. Прошу пнуть меня в нужном направлении .  |
   |
 
|
| Ejik-Kurgan |
3.4.2008, 6:34
Сообщение
#2
|
|
Поселенец  Группа: Пользователи Сообщений: 116 Регистрация: 31.3.2008 Пользователь №: 12 673 Репутация: 1 |
Сделать с помощью css можно! Но все равно понадобиться другая картинка!
Смотри здесь! http://www.htmlbook.ru/content/?id=110 |
|
|
|
| Boo |
4.4.2008, 9:35
Сообщение
#3
|
|
Только зарегистрировавшийся Группа: Пользователи Сообщений: 9 Регистрация: 25.3.2008 Пользователь №: 12 376 Репутация: 1 |
Цитата(Ejik-Kurgan @ 3.4.2008, 7:34)  Сделать с помощью 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
Сообщение
#4
|
|
Поселенец Группа: Пользователи Сообщений: 116 Регистрация: 31.3.2008 Пользователь №: 12 673 Репутация: 1 |
Если это весь код то в нем чего то не хватает!
например слова var в строке item=document.getElementById("pic");! Попробуй написать! Может что-то и зашевелится! |
|
|
|
| Boo |
4.4.2008, 12:23
Сообщение
#5
|
|
Только зарегистрировавшийся Группа: Пользователи Сообщений: 9 Регистрация: 25.3.2008 Пользователь №: 12 376 Репутация: 1 |
Цитата(Ejik-Kurgan @ 4.4.2008, 11:58) Если это весь код то в нем чего то не хватает! например слова var в строке item=document.getElementById("pic");! Попробуй написать! Может что-то и зашевелится! Спасибо! кое что зашевелилось  Теперь стало подавать признаки жизни и в IE. В общем вижу порблему в следующем: Код item.style.height = y2-y1; item.style.width = x2-x1; работает, то есть рамка изменяет размеры Код item.style.offsetLeft = x1; item.style.offsetTop = y1; а вот это - не хочет. Помогите выяснить, как с помощью DOM обратиться и поменять Код style="position: absolute; top: 0px; left: 0px; то бишь значения топ и лефт, а то я подозреваю что offsetTop и offsetLeft не совсем правильно. |
|
|
|
| Ejik-Kurgan |
4.4.2008, 12:39
Сообщение
#6
|
|
Поселенец Группа: Пользователи Сообщений: 116 Регистрация: 31.3.2008 Пользователь №: 12 673 Репутация: 1 |
Я JavaScript еще не до изучал!
А тему про аргументы function name(аргумент, аргумент, аргумент, аргумент){} не понял! Поэтому не стоит ли прописать через var прописать x1,y1,x2,y2? Цитата Помогите выяснить, как с помощью DOM обратиться и поменять Код style="position: absolute; top: 0px; left: 0px; обратиться и поменять не выйдет а обратиться и поставить другий стиль можно (тока сёня не скажу, читать надо)! |
|
|
|
| krest |
4.4.2008, 13:12
Сообщение
#7
|
 Житель Группа: Пользователи Сообщений: 229 Регистрация: 12.11.2007 Из: Краснодарский край Пользователь №: 7 096 Репутация: 8 |
Код item.style.left = x1; item.style.top = y1; offsetTop и offsetLeft используются так Код ..=item.offsetLeft; alert (item.offsetTop); то есть используется только для чтения -------------------- |
|
|
|
| Boo |
4.4.2008, 13:24
Сообщение
#8
|
|
Только зарегистрировавшийся Группа: Пользователи Сообщений: 9 Регистрация: 25.3.2008 Пользователь №: 12 376 Репутация: 1 |
Ejik-Kurgan
Цитата А тему про аргументы function name(аргумент, аргумент, аргумент, аргумент){} не понял! Поэтому не стоит ли прописать через var прописать x1,y1,x2,y2? Что ты не понял? тут-то вроде как раз всё правильно. при наведении на область <AREA>, вызывается функция в которую передаются координаты этой области, которую надо выделить. krest! Всё заработало, спасибо огромное.  |
|
|
|
| Ejik-Kurgan |
4.4.2008, 13:27
Сообщение
#9
|
|
Поселенец Группа: Пользователи Сообщений: 116 Регистрация: 31.3.2008 Пользователь №: 12 673 Репутация: 1 |
Цитата Что ты не понял? тут-то вроде как раз всё правильно. при наведении на область <AREA>, вызывается функция в которую передаются координаты этой области, которую надо выделить. Я не про эту тему говорил! я книжку читаю! |
|
|
|
|
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0
|
Текстовая версия | Сейчас: 2.12.2008, 23:21 |
|
|