как сделать изображение-карту? - HTML и CSS

незнайка_на_земле · 17.11.2011, 20:11

столкнулся с проблемой !
Подскажите пожалуйста как в Html сделать изображение - карту при помощи только Html без всяких скриптов, с использованием тегов <MAP> и <AREA>.
например дана картинка и нужно выделить в ней объекты при нажатии на которых всплывает текстовое сообщение выше или ссылка на другую страничку ??

незнайка_на_земле · 18.11.2011, 15:07

где ошибка в коде ??
теги мап и эрия не работают

Код:

<!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>
<link href="../../Documents/progress-world/Templates/oneColLiqCtrHdr.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.стиль1 {
        font-size: xx-large;
        color: #FF0000;
}
.стиль2 {color: #5500AA}
-->
</style>
</head>
 
<body class="oneColLiqCtrHdr">
 
<div id="container">
  <div id="header">
    <div align="center" class="стиль1">
    
   <MARQUEE BEHAVIOR="ALTERNATE" SCROLLAMOUNT="30" SCROLLDELAY="300">
   <p>Добро пожаловать на страничку!</p>
   <p>&nbsp; </p>
   </MARQUEE> 
       
       <blink>УГАТУ!!!</blink> 
     
    </div>
  </div>
  <div id="mainContent">
    <h1 align="center"><img src="../../Documents/progress-world/2749372_w640_h640_new1.jpg" width="600" height="450" usemap = '#main_map'  /> <map name='main_map' id='main_map'>
<area shape="poly" coords="0,0,0,37..." alt='' href="Безымянный-52.html" />
<area shape="poly" coords="1,10,30,60..." alt='' href="file:///C|/Users/user/Desktop/page2.html" />                                                                   
</map></h1>
  
 
  <!-- end #mainContent --></div>
  <div id="footer">
    <p>&nbsp;</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

Naive · 18.11.2011, 19:39

Возможно в том, что "usemap = '#main_map'" написано с одинарными кавычками. Вручную делать карты изображений всегда считал занятием глупым и бесполезным, для этого существует Adobe Image Ready.

незнайка_на_земле · 18.11.2011, 19:48

Цитата:

Сообщение от Naive

Возможно в том, что "usemap = '#main_map'" написано с одинарными кавычками. Вручную делать карты изображений всегда считал занятием глупым и бесполезным, для этого существует Adobe Image Ready.

как сделать мап карту средствами Adobe Image Ready ? с чего начать?
расскажит если вам нетрудно =)

Lesha · 18.11.2011, 19:52

а еще лучше карту сделать в DreamWeaver

Naive · 18.11.2011, 21:15

В Image ready, вставляем картинку, под обычными для фотошопа инструментами есть дополнительные, среди них — средство рисования эрий (элипс, прямоугольник и полигон), им обводим необходимую область, внизу выбираем действие, можно даже настроить события типа "ховер", далее сохраняем как хтмл + изображения. Имидж-карта готова.
П.с. "добавление слоев" при наведении создает новые картинки размером с исходный, что есть отстой, причем не кэширует их зарание, причем, независимо от размеров, в гифе... (это я про Image Ready 3.0, который был в поставке с шестым фотошопом)
П.п.с. Дримвивером не пользуюсь, возможно он как инструмент намного удобнее)

незнайка_на_земле · 18.11.2011, 21:34

Цитата:

Сообщение от Lesha

а еще лучше карту сделать в DreamWeaver

а как в дримвивере это делается?

17.11.2011, 20:11	#1
незнайка_на_земле Пользователь Регистрация: 26.12.2010 Сообщений: 93	как сделать изображение-карту? столкнулся с проблемой ! Подскажите пожалуйста как в Html сделать изображение - карту при помощи только Html без всяких скриптов, с использованием тегов <MAP> и <AREA>. например дана картинка и нужно выделить в ней объекты при нажатии на которых всплывает текстовое сообщение выше или ссылка на другую страничку ??

18.11.2011, 19:39	#3
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Возможно в том, что "usemap = '#main_map'" написано с одинарными кавычками. Вручную делать карты изображений всегда считал занятием глупым и бесполезным, для этого существует Adobe Image Ready. Alar, верни репу!

18.11.2011, 21:15	#6
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	В Image ready, вставляем картинку, под обычными для фотошопа инструментами есть дополнительные, среди них — средство рисования эрий (элипс, прямоугольник и полигон), им обводим необходимую область, внизу выбираем действие, можно даже настроить события типа "ховер", далее сохраняем как хтмл + изображения. Имидж-карта готова. П.с. "добавление слоев" при наведении создает новые картинки размером с исходный, что есть отстой, причем не кэширует их зарание, причем, независимо от размеров, в гифе... (это я про Image Ready 3.0, который был в поставке с шестым фотошопом) П.п.с. Дримвивером не пользуюсь, возможно он как инструмент намного удобнее) Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как сделать что-бы отображалось изображение в стоке адреса	opljaa	HTML и CSS	3	18.08.2011 19:42
Как сделать чтбо изображение уменьшалось?	seo-romka	HTML и CSS	4	21.02.2011 21:01
Как сделать так чтобы изображение было поверх таблицы	otenova	HTML и CSS	2	29.09.2010 18:00
как сделать изображение рядом с TITLE	subbota	HTML и CSS	1	14.07.2010 14:08
Как сделать изображение резиновым	Diman2008	HTML и CSS	4	16.10.2008 23:46

18.11.2011, 19:52	#5
Lesha Форумчанин Регистрация: 30.01.2009 Сообщений: 418	а еще лучше карту сделать в DreamWeaver