Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 12.12.2010, 11:36   #1
Necare
Форумчанин
 
Аватар для Necare
 
Регистрация: 22.10.2010
Сообщений: 145
По умолчанию Активное изображение.

Есть картинка - "Три Богатыря".

Нужно чтобы при наведении курсором например на Алёшу Поповича, всплывала подсказка что это Алёша Попович, и Подсвечивало его контур(контур изображения) типо вот он.

Проблема как сделать подсветку контура.

Реализация HTML. Знаю что на яве можно заюзать 2 волшебных свойства, но нужно исключительно на HTML.

Вот код того, что сделал:
Код:
<!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=utf-8" />
<title>Документ без названия</title>
</head>

<body>
<img src="1.jpg" width="880" height="580" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="poly" coords="666,108,610,35,565,82,514,356,613,208,695,334"Href="#" Title="Алеша Попович" />
  <area shape="poly" coords="451,133,398,39,325,12,277,57,285,134,288,349,381,167"Href="#" Title="Добрыня Никитич" /> 
  <area shape="poly" coords="180,134,275,160,195,17,140,77,61,166,120,345" Href="#" Title="Илья Муромец" />
  
  <area shape="poly" coords="183,145,127,327,148,512,235,457,254,265,237,158" Href="#" Title="Конь Ильи Муромца" />
  <area shape="poly" coords="388,170,483,123,523,246,466,412,348,492,298,337" Href="#" Title="Конь Добрыни Никитича" />
  <area shape="poly" coords="281,323,283,458,244,391,262,315,258,220,277,186" Href="#" Title="Конь Добрыни Никитича" />
  <area shape="poly" coords="612,218,525,352,562,490,641,473,676,416,689,334" Href="#" Title="Конь Алёши Поповича" />
  <area shape="poly" coords="390,541,441,458,481,430,528,456,533,528,476,571" Href="#" Title="Сосны" />
  <area shape="poly" coords="694,401,622,500,669,556,697,522,730,500,713,441" Href="#" Title="Сосны" />
  <area shape="poly" coords="89,271,53,283,28,310,3,346,14,382,122,361" Href="#" Title="Хвост коня Ильи Муромца" />
  <area shape="poly" coords="772,405,751,440,746,472,772,497,791,492,797,450" Href="#" Title="Сосна" />
  <area shape="poly" coords="741,502,708,535,722,569,764,570,791,570,773,536" Href="#" Title="Сосны" />
 
  <area shape="poly" coords="96,5,11,9,4,50,7,109,53,135,96,63" Href="#" Title="Небо" />
  <area shape="poly" coords="13,403,123,378,131,473,134,542,68,574,9,511" Href="#" Title="Трава" />
  <area shape="poly" coords="146,535,267,471,320,461,393,569,342,576,91,574" Href="#" Title="Земля" />
  <area shape="poly" coords="614,494,552,501,512,569,574,569,654,573,634,544" Href="#" Title="Земля" />
  <area shape="poly" coords="837,444,823,430,809,447,809,471,820,488,833,482" Href="#" Title="Сосна" />
  <area shape="poly" coords="807,497,869,472,871,570,810,571,757,508,784,503" Href="#" Title="Трава" />

  <area shape="poly" coords="874,248,697,254,695,389,757,415,865,395,869,311" Href="#" Title="Поле" />
  <area shape="poly" coords="13,136,51,184,77,241,43,284,13,314,3,234" Href="#" Title="Лес" />
  <area shape="poly" coords="686,119,875,124,869,214,780,219,687,232,687,190" Href="#" Title="Лес" />
  <area shape="poly" coords="869,11,639,4,636,53,685,113,822,115,875,117" Href="#" Title="Небо и Облака" />
  <area shape="poly" coords="409,8,498,3,633,15,607,26,506,123,456,113" Href="#" Title="Небо и Облака" />
  <area shape="poly" coords="487,363,471,423,509,436,543,457,534,403,525,376" Href="#" Title="Трава" />
  <area shape="poly" coords="290,9,197,4,220,43,237,76,250,101,266,73" Href="#" Title="Небо и Облака" />
  <area shape="poly" coords="109,49,182,11,157,44,137,72,112,95,55,154" Href="#" Title="Небо и Облака" />
</map>
</body>
</html>
Где 1.jpg есть сама картинка.
До последней точки с запятой в коде...
Necare вне форума Ответить с цитированием
Старый 12.12.2010, 12:01   #2
Necare
Форумчанин
 
Аватар для Necare
 
Регистрация: 22.10.2010
Сообщений: 145
По умолчанию

Или быть может при помощи onmouseover при наведении на "Алешу Поповича", можно закрасить его контур( который выделял в DreamWeawer'e, чтобы получить все координаты его изображения).
До последней точки с запятой в коде...
Necare вне форума Ответить с цитированием
Старый 12.12.2010, 13:06   #3
Марат05
Пользователь
 
Регистрация: 07.12.2010
Сообщений: 72
По умолчанию попробуй

попробуйте вот так:
<td><div align="right"><img src="Картинка.jpg" width="170" height="150" alt="Текст любой " title="Алеша">&nbsp;</div></td>
Марат05 вне форума Ответить с цитированием
Старый 12.12.2010, 13:26   #4
Necare
Форумчанин
 
Аватар для Necare
 
Регистрация: 22.10.2010
Сообщений: 145
По умолчанию

Э не совсем понял куда этот код засовывать? и не понял к чему он?

Сдалал:
Код:
<HTML>
<head>
<title>Три Богатыря</title>
<style>
a:link {background-image:url("1.jpg");}
a:hover {background-image:url("3.jpg");}
</style>
</head>

<body>
<img src="1.jpg" name="TB" width="880" height="580" border="0" usemap="#Map"  />

<map name="Map" id="Map">

  <area shape="poly" coords="666,108,610,35,565,82,514,356,613,208,695,334"Href="#"Title="Алеша Попович" />
Но картинка не меняется. Что не так?
До последней точки с запятой в коде...

Последний раз редактировалось Necare; 12.12.2010 в 13:51.
Necare вне форума Ответить с цитированием
Старый 12.12.2010, 15:46   #5
Necare
Форумчанин
 
Аватар для Necare
 
Регистрация: 22.10.2010
Сообщений: 145
По умолчанию

Проблема решена:
Код:
<HTML>
<head>
<title>Три Богатыря</title>

</head>

<body>
<a  onMouseOver="document.suk.src='3.jpg'" onMouseOut="document.suk.src='1.jpg'">


<img src="1.jpg" name ="suk" width="880" height="580" border="0" usemap="#Map" ></a>

<map name="Map" id="Map">

 <area shape="poly" coords="666,108,610,35,565,82,514,356,613,208,695,334" Title="Алеша Попович" />
До последней точки с запятой в коде...
Necare вне форума Ответить с цитированием
Старый 12.12.2010, 19:48   #6
Виталий Желтяков
Старожил
 
Аватар для Виталий Желтяков
 
Регистрация: 19.04.2010
Сообщений: 2,702
По умолчанию

Я предлагал уже решение на форуме.
Решение:
Код:
<map name="map">
<area shape="poly" alt="xxx" title="xxx" coords="145,448, 182,448, 200,412, 205,448" href="#" onmouseover="$(\'#xxx\').show();" onmouseout="$(\'#xxx\').hide();">
</map>
<img src="images/fon.jpg" alt="">
<img id="xxx" src="images/xxx.png" alt="" style="display:none;">
<img id="xxx_mapimage" src="images/blank.gif"  usemap="#map">
xxx.png - рисунок свечения,
blank.gif - пустое изображение
Виталий Желтяков вне форума Ответить с цитированием
Старый 21.03.2011, 19:51   #7
Necare
Форумчанин
 
Аватар для Necare
 
Регистрация: 22.10.2010
Сообщений: 145
По умолчанию

Собсно вот: решение в том, что при наведении на "активную область" т.е. Алёшу, Добрыню, простую сосну, картинка заменялась на другую, где в пэйнте контуры подрисованы и получается эффект подсветки, собсно код:
Код:
<HTML>
<head>
<title>Три Богатыря</title>

</head>

<body>
<a  onMouseOver="document.suka.src='3.jpg'" onMouseOut="document.suka.src='1.jpg'">


<img src="1.jpg" name ="suka" width="880" height="580" border="0" usemap="#Map" ></a>

<map name="Map" id="Map">

 <area shape="poly" coords="666,108,610,35,565,82,514,356,613,208,695,334"Href="#"Title="Алеша Попович" />
   
  <area shape="poly" coords="451,133,398,39,325,12,277,57,285,134,288,349,381,167"Href="#" Title="Добрыня Никитич" /> 
  <area shape="poly" coords="180,134,275,160,195,17,140,77,61,166,120,345" Href="#" Title="Илья Муромец" />
  
  <area shape="poly" coords="183,145,127,327,148,512,235,457,254,265,237,158" Href="#" Title="Конь Ильи Муромца"  />
  <area shape="poly" coords="388,170,483,123,523,246,466,412,348,492,298,337" Href="#" Title="Конь Добрыни Никитича" />
  <area shape="poly" coords="281,323,283,458,244,391,262,315,258,220,277,186" Href="#" Title="Конь Добрыни Никитича" />
  <area shape="poly" coords="612,218,525,352,562,490,641,473,676,416,689,334" Href="#" Title="Конь Алёши Поповича" />
  <area shape="poly" coords="390,541,441,458,481,430,528,456,533,528,476,571" Href="#" Title="Сосны" />
  <area shape="poly" coords="694,401,622,500,669,556,697,522,730,500,713,441" Href="#" Title="Сосны" />
  <area shape="poly" coords="89,271,53,283,28,310,3,346,14,382,122,361" Href="#" Title="Хвост коня Ильи Муромца" />
  <area shape="poly" coords="772,405,751,440,746,472,772,497,791,492,797,450" Href="#" Title="Сосна" />
  <area shape="poly" coords="741,502,708,535,722,569,764,570,791,570,773,536" Href="#" Title="Сосны" />
 
  <area shape="poly" coords="96,5,11,9,4,50,7,109,53,135,96,63" Href="#" Title="Небо" />
  <area shape="poly" coords="13,403,123,378,131,473,134,542,68,574,9,511" Href="#" Title="Трава" />
  <area shape="poly" coords="146,535,267,471,320,461,393,569,342,576,91,574" Href="#" Title="Земля" />
  <area shape="poly" coords="614,494,552,501,512,569,574,569,654,573,634,544" Href="#" Title="Земля" />
  <area shape="poly" coords="837,444,823,430,809,447,809,471,820,488,833,482" Href="#" Title="Сосна" />
  <area shape="poly" coords="807,497,869,472,871,570,810,571,757,508,784,503" Href="#" Title="Трава" />

  <area shape="poly" coords="874,248,697,254,695,389,757,415,865,395,869,311" Href="#" Title="Поле" />
  <area shape="poly" coords="13,136,51,184,77,241,43,284,13,314,3,234" Href="#" Title="Лес" />
  <area shape="poly" coords="686,119,875,124,869,214,780,219,687,232,687,190" Href="#" Title="Лес" />
  <area shape="poly" coords="869,11,639,4,636,53,685,113,822,115,875,117" Href="#" Title="Небо и Облака" />
  <area shape="poly" coords="409,8,498,3,633,15,607,26,506,123,456,113" Href="#" Title="Небо и Облака" />
  <area shape="poly" coords="487,363,471,423,509,436,543,457,534,403,525,376" Href="#" Title="Трава" />
  <area shape="poly" coords="290,9,197,4,220,43,237,76,250,101,266,73" Href="#" Title="Небо и Облака" />
  <area shape="poly" coords="109,49,182,11,157,44,137,72,112,95,55,154" Href="#" Title="Небо и Облака" />

</map>
</body>
</html>
До последней точки с запятой в коде...
Necare вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Активное меню неизвестный HTML и CSS 4 20.07.2009 14:59
Активное время в ячейку Gadar Microsoft Office Excel 3 19.07.2008 20:09
Активное окно Messir_Leonard Win Api 4 22.04.2008 19:25
Активное окно MadReason Win Api 12 10.01.2008 17:44
активное приложение Toxa Общие вопросы Delphi 1 28.12.2006 09:41