Это MWEB.RU

**Василий** Чт дек 20, 2007 23:07

Уважаемые для сайта над было сделать картуизображений, где ссылки даются координатами, код у меня почему то не работает, объясните почему. пожалуйста.

Код: Выделить всё: <!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" lang="en" xml:lang="en"> <head> <title></title> <META name=keywords content="> <META name=description content=""/> <style type="text/css"> </style> </head> <body> <img src=tutor.jpg width=100% height=100% usemap=#tut> <map name=tut> <area shape=poly coords="1,272, 200,351" href=> <area shape=poly coords="14,383, 180,463" href=> <area shape=poly coords="13,479, 180,548" href=> <area shape=poly coords="10,540, 182,632" href=> </map> </body> </html>

**Muerto** Пт дек 21, 2007 11:01

Код: Выделить всё: <!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" lang="en" xml:lang="en"> <head> <title></title> <META name=keywords content=""> <META name=description content=""/> <style type="text/css"> </style> </head> <body> <img src=tutor.jpg width=100% height=100% usemap=#tut> <map name=tut> <area shape="rect" coords="1,272, 200,351" href=""> <area shape="rect" coords="14,383, 180,463" href=""> <area shape="rect" coords="13,479, 180,548" href=""> <area shape="rect" coords="10,540, 182,632" href=""> <area shape="poly" coords="284,89,284,88,351,114,340,137" href="#" alt="" /> </map> </body> </html>

Для poly у тебя координат маловато. Ты, наверное с rect перепутал. Кавычки не закрыл в мета-кейворд. Проверь мой код. За исключением треугольного poly моего - карта соответствует тому, что ты хотел?

**Padonak** Пт дек 21, 2007 12:16

с кавычками у вас напару полный ахтунг... и со слэшами в метах и с размером букв тегов... нельзя было полояльнее доктайп выбрать что ли? ну Муерта я понимаю такой доктайп разумеецо осилит а вот Василий на кой его применяет? -08-

хз..

**Muerto** Пт дек 21, 2007 17:13

2Padonak: Я просто скопировал код, не особо вглядываясь. А доктайп, действительно серьёзный.

**Василий** Пт дек 21, 2007 19:44

2Muerto: Спасибо тебе огромное теперь все работает

**Lucia** Сб дек 22, 2007 21:07

Интересно было бы посмотреть картинку на которой карта. Там две нижние rect пересекаться должны по идее.

**Василий** Сб янв 05, 2008 16:35

а как можно достить эффекта, чтобы при наведении курсора на область, выводилось изображение?

**Muerto** Сб янв 05, 2008 18:44

2Василий: Где бы появлялось? Над областью карты?

**Muerto** Сб янв 05, 2008 19:36

Вообще я сделал бы по принципу. onMouseOver и свойства display.
http://muerto.ru/for_forum/map.html
2Padonak: К сожалению нет времени нормально сделать. -06-

**Padonak** Сб янв 05, 2008 22:39

2Muerto:

надо бы доработать крео а то там толком ничо не видно -02-

**Muerto** Сб янв 05, 2008 23:19

2Padonak: Я о том и говорил! -09-

**Василий** Вс янв 06, 2008 22:46

Можно поподробнее, как такое сотворить?

**Padonak** Вс янв 06, 2008 23:16

кликаешь правой клавишей мыши на странице и смотришь чо покажут -03-

**Muerto** Пн янв 07, 2008 13:58

2Василий: Весь код, который тебе нужен - по ссылке.

Код: Выделить всё: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> </head> <body style="margin:0; padding:0;"> <img src="down.jpg" alt="Наведи мышь в область лица!" width="400" height="600" border="0" usemap="#Map" /> <map name="Map" id="Map"><area shape="rect" coords="57,36,280,228" onmouseover="document.getElementById('oups').style.display='';" href="#" alt="Кто здесь!" /> </map> <img src="up.jpg" alt="Кто здесь?!" width="223" height="192" style="position:absolute; left:57px; top:36px; display:none; cursor:pointer;" id="oups" onmouseout="this.style.display='none'" border="0" onclick="document.location.href='/'" /> </body> </html>

Разберешься?

**Василий** Пн янв 07, 2008 17:57

Код: Выделить всё: style="position:absolute; left:57px; top:36px; display:none; cursor:pointer;" id="oups" onmouseout="this.style.display='none'" border="0" onclick="document.location.href='/'" />

Можно про этои моменты поподробнее пожалуйста

**Muerto** Пн янв 07, 2008 19:32

style="
position:absolute; - Указывает, что элемент абсолютно позиционирован.
left:57px; Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента. В данном случае 57 пикселей.
top:36px; Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента. В данном случае 36 пикселей.
display:none; Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.
cursor:pointer; вид курсора ка по наведению на ссылку.
onmouseout="this.style.display='none'" событие при наведении курсора на объект - скрыть его.
onclick="document.location.href='/'" событие при клике на объекте - перейти на страницу (в данном случае "/", т.е. корень документа)

**ass** Пн янв 07, 2008 21:26

2Muerto: тема сисек не раскрыта -12-

**Muerto** Вт янв 08, 2008 0:57

2ass: http://www.muerto.ru/for_forum/_MG_2630.JPG -06-

в дополнение вопроса!

**Padonak** Вт янв 08, 2008 2:32

**Василий** Вт янв 08, 2008 10:36

вот спасибо Muerto -22-

**Padonak** Вт янв 08, 2008 10:43

раскрывая до конца тему сисек считаю своим священным долгом выложить вот эти:

http://fisioterapiautebo.com/padonak/mweb/boobs.jpg

**Lucia** Вт янв 08, 2008 12:08

Вот какой вопрос не зададут - всё одно сведут на баб! -02-

**Padonak** Вт янв 08, 2008 12:20

2Lucia: да скоты ваще какие-то и падонке -12-

паубивалбы -13-

**Василий** Вт янв 08, 2008 22:42

еще вопрос возможно изображение разместить так, чтобы оно заполняло окно браузера целиком (не оставляя отступов от краев)
Планируется сделать сайт под оптимальное-аксимальное изображение 1280*1024 и использовать процентное соотношение к пользователю, так как сайт основан на одном изображении (нестандартно, зато какие возможности), поэтому и спрашиваю скрипт.

**Muerto** Ср янв 09, 2008 14:55

2Василий: А зачем скрипт? Сделай его бэкграундом с размещением по центру страницы.

**Василий** Ср янв 09, 2008 22:40

попробую, но мне кажется, что карта изо не будет работать, бакграунд то в хеде расположен а не в боди.

**Padonak** Ср янв 09, 2008 22:54

мне кажется что если кортинко растянуть то карта будет врать потому что координаты не будут туда куда нужно уже попадать.

**Skay** Ср янв 09, 2008 23:36

тогда надо рассчитывать координаты динамически в зависимости от размера окна=)) но это извращение какое-то.. и с картинкой и с координатами....

**Muerto** Чт янв 10, 2008 1:10

2Василий: Так ты не написал, что карта на изображении должна быть!
Ну, в таком разе, действительно, формировать карту надо скриптом. Порекомендовать тут нечего - надо писать. В целом, всё просто - в зависимости от размеров окна высчитывать координаты. Дело в математике исключительно. Вычисляешь каждую координату как процент от ширины или высоты изначальной карты. И пересчитываешь при каждой загрузке изображения (или ресайзе).
Например (на скорую руку):

Код: Выделить всё: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Untitled Document</title> <style type="text/css"> * {padding:0; margin:0;} </style> </head> <body> <img src="img/dot.png" alt="тест" width="100%" height="100%" border="0" usemap="#Map" id="im"> <map name="Map"><area shape="rect" coords="0,0,100,50" href="#" id="first"></map> <script type="text/javascript"> //задаем координаты в процентах. Их можно брать и из свойства изначального объекта var coord1 = 0; var coord2 = 0; var coord3 = 100; var coord4 = 50; var x=document.getElementById("im").offsetWidth/100; var y=document.getElementById("im").offsetHeight/100; document.getElementById("first").coords = coord1*x + ", " + coord2*y + ", " + coord3*x + ", " + coord4*y; </script> </body> </html>

**Muerto** Чт янв 10, 2008 11:49

2Василий: Интересно было бы понять всю концепцию проекта. Там контент-то, вообще, будет?

**Muerto** Чт янв 10, 2008 12:04

Вообще, скрипт будет довольно сложный. С афинными преобразованиями (если не только rect использовать в карте. Плюс искажение картинки при нестандартных размерах окна. Тебе ГОРАЗДО проще это будет на флэше осуществить!

**Василий** Чт янв 10, 2008 14:02

Возможно я сделаю проще , сделать сайт на два разрешения 1024*768 (расширение на 15" и 17" мониках) и 1280*1024 (19"21")
И предоставить пользователю право выора на предзагрузочной страничке, какие мнения?

**Muerto** Чт янв 10, 2008 14:17

2Василий: Тогда тебе надо будет фиксировать размеры окна. И тогда проще не масштабировать картинку и карту, а сделать две картинки и две карты.

**Berezkin** Чт янв 10, 2008 14:42

2Василий: ИМХО Муэрто прав... лучше сделать на флэш, так как не надо будет заморачиваться с двумя картами изображений. Да и не все браузер на весь экран разворачивают (особенно пользователи 19 и 21 дюймовых мониторов). А флэш можно сделать резиновым без гемороя с пересчетом координат. Единственный минус - изображение должно быть векторным ну и Action Script придется подучить (может это даже плюс)

**Василий** Чт янв 10, 2008 17:40

мож быть, мне теперь еще надо учить как делать кнопки ссылки в action script.

Эх, Сложен труд программиста. -03-

Это MWEB.RU

Карты изображений

Карты изображений

Кто сейчас на конференции