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

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

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

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

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

Ответ
 
Опции темы Поиск в этой теме
Старый 17.11.2011, 20:11   #1
незнайка_на_земле
Пользователь
 
Аватар для незнайка_на_земле
 
Регистрация: 26.12.2010
Сообщений: 93
Вопрос как сделать изображение-карту?

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

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

Код:
<!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>
незнайка_на_земле вне форума Ответить с цитированием
Старый 18.11.2011, 19:39   #3
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Возможно в том, что "usemap = '#main_map'" написано с одинарными кавычками. Вручную делать карты изображений всегда считал занятием глупым и бесполезным, для этого существует Adobe Image Ready.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 18.11.2011, 19:48   #4
незнайка_на_земле
Пользователь
 
Аватар для незнайка_на_земле
 
Регистрация: 26.12.2010
Сообщений: 93
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Возможно в том, что "usemap = '#main_map'" написано с одинарными кавычками. Вручную делать карты изображений всегда считал занятием глупым и бесполезным, для этого существует Adobe Image Ready.
как сделать мап карту средствами Adobe Image Ready ? с чего начать?
расскажит если вам нетрудно =)
незнайка_на_земле вне форума Ответить с цитированием
Старый 18.11.2011, 19:52   #5
Lesha
Форумчанин
 
Аватар для Lesha
 
Регистрация: 30.01.2009
Сообщений: 418
По умолчанию

а еще лучше карту сделать в DreamWeaver
Lesha вне форума Ответить с цитированием
Старый 18.11.2011, 21:15   #6
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

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

Цитата:
Сообщение от Lesha Посмотреть сообщение
а еще лучше карту сделать в DreamWeaver
а как в дримвивере это делается?
незнайка_на_земле вне форума Ответить с цитированием
Ответ


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

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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать что-бы отображалось изображение в стоке адреса 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