Не работает <map> в XHTML 1.1

RulezZz · February 8, 2010

Потребовалось сделать карту-изображение... вот код:

<img src="images/header.gif" width="999" height="222" alt="" usemap="#header_map" />
<map name="header_map">
<area shape="rect" coords="78,45,312,119" href="#" alt="" />
<area shape="poly" coords="670,87,719,78,727,123,677,130" href="#" alt="" />
<area shape="poly" coords="776,124,818,152,793,189,751,160" href="#" alt="" />
<area shape="poly" coords="834,52,885,61,878,105,828,96" href="#" alt="" />
</map>

Так как использую XHTML 1.1, то код в этом виде не проходит валидацию. Для валидации убираю "#" из usemap и меняю "name" на id, как это требует стандарт.

Результат: ни в одном браузере не работает <map>.

Пробовал сначала убирать #, потом name.... без # или name не хочет работать.

Браузеры: ei6, ff3.5, opera10

Подскажите решение проблемы пожалуйста, чтобы код был валиден и всё работало нормально, а то я сам не справлюсь

p.s. посоветовали использовать //<![CDATA[, но не хочется прибегать к этому, если есть другое решение.

RulezZz · February 9, 2010

Ни кто не даст совет как с этим разобраться? Или я не в том форуме создал тему?

rus · February 9, 2010

Ни кто не даст совет как с этим разобраться? Или я не в том форуме создал тему?

Да нет, в том форуме. Просто я с этим например не сталкивался и по сему могу посоветовать либо использовать флеш, либо cvg и vml.

psywalker · February 9, 2010

Да нет, в том форуме. Просто я с этим например не сталкивался и по сему могу посоветовать либо использовать флеш, либо cvg и vml.

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

RulezZz · February 9, 2010

Да нет, в том форуме. Просто я с этим например не сталкивался и по сему могу посоветовать либо использовать флеш, либо cvg и vml.

Спасибо, что ответили.

Возникали мысли насчёт флеш, но усложнять всё дело не хочется...

Читал где-то, что могут возникнуть проблемы с <map>, если под стандарт XHTML 1.1 переделать, но чтобы вообще не работало - такого не ожидал... а может я где-то что-то не то прописал.

Начал только вчера верстать страничку, вот полный код того, где <map> стоит:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Second page - Home page</title>
<meta content="" name="description" />
<meta content="" name="keywords" />
<meta name="language" content="russian" />
<meta http-equiv="Content-Language" content="ru" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="alternate" href="http://mysite.ucoz.ru/news/rss" type="application/rss+xml" title="RSS" />
<link rel="alternate" href="http://mysite.ucoz.ru/forum/0-0-0-37" type="application/rss+xml" title="RSS forum" />
<style type="text/css">
* {
border : 0;
margin : 0;
outline : none;
padding : 0;
}
ul, ol {
list-style : none;
}
html {
background : #f3f1e9;
font-size : 100.01%;
height : 100%;
}
body {
color : #464646;
height : 100%;
line-height : 1.5em;
text-align : center;
}
#wrapper {
min-height : 100%;
height : auto !important;
height : 100%;
margin : 0 0 -142px 0;
text-align : left;
}
#header {
background : url(images/header_bg.gif) repeat-x;
height : 222px;
}
#header_inside {
margin : 0 auto;
width : 999px;
}
#container {
margin : 0 auto;
width : 999px;
}
#footer_spacer {
height : 142px;
}
#footer {
background : url(images/footer_bg.gif) repeat-x;
height : 142px;
text-align : left;
}
#footer_inside {
background : url(images/telephone.gif) 100% 0% no-repeat;
height : 142px;
margin : 0 auto;
width : 999px;
}
.floatLeft {
float : left;
}
.floatRight {
float : right;
}
.alignLeft {
text-align : left;
}
.alignRight {
text-align : right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header_inside">
<img src="images/header.gif" width="999" height="222" alt="" usemap="header_map" />
<map id="header_map">
<area shape="rect" coords="78,45,312,119" href="index.html" alt="" />
<area shape="poly" coords="670,87,719,78,727,123,677,130" href="#" alt="" />
<area shape="poly" coords="776,124,818,152,793,189,751,160" href="#" alt="" />
<area shape="poly" coords="834,52,885,61,878,105,828,96" href="#" alt="" />
</map>
</div>
</div>
<div id="container">
<div id="content"><p>right</p></div>
<div id="left"><p>left</p></div>
</div>
<div id="footer_spacer"></div>
</div>
<div id="footer">
<div id="footer_inside">
<p>footer</p>
</div>
</div>
</body>
</html>

Документ проходит валидацию в данном виде, но не работает навигация по картинке...

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

Не знаю даже... как то удобнее.

psywalker · February 9, 2010

1) Ещё как вариант, сделай блок, в него картинку, блоку релатив, а ещё в него уже ссылки на абсолюте, и раскидать их по нужным местам.

2)

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

Заметно, был бы он удобнее, ты бы сюда не пришёл.

Sign In

Не работает <map> в XHTML 1.1

Question

RulezZz

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

RulezZz

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

RulezZz

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information