Работа с <area>, или "Дурдом для новичка"

[Spooch]

Здравствуйте, уважаемые пользователи данного форума!

У меня возникли трудности при написании сайта, потому прошу у вас помощи и совета.

Собственно, задача передо мной такая:

На странице висит квадратное изображение (1000х1000), разбитое через <map> и <area> на 25 областей (тоже квадраты, 196х196). Каждый фрагмент "заякорен", то есть на него ведет ссылка вида www.site.ru/index.html#a20

Нужно сделать так, чтобы после перехода по такой ссылке, нужный фрагмент выделялся (любым образом).

Пример - карта луны, разделенная на участки для покупки. Клиенту дается ссылка на его участок, после перехода он на карте видит свой участок подсвеченным.

Я начинал с разреки оригинала на куски, но мне посоветовали сделать спрайт. После посоветовали пойти путем <map> и <area>. Тут я не могу заставить работать события с <area>.

Если со статичной картинкой <img> те же onfocus или onmouseover работают спокойно, то применительно к <area> не фурычит вообще ничего! Или у меня руки кривые.. или они не совместимы, хотя куча материала, что я перелопатил, говорит об обратном.

Хотя, применительно к оnfocus, якорные ссылки не работают, я правильно понял?

Пробовал разные варианты, вроде такого:

<area name="border25" shape="rect" coords="802,802,998,998" onfocus="document.border25.src = 'images/border.jpg';" href="http://test.com" alt="">

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

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

Мне уже кажется, что придется вернуться к первому варианту с кучей мелких картинок - там вроде бы геморроя меньше с этим, но загрузка сервера бешенная!

Вобщем, надеюсь, что тут получу совет по решению траблы..

[Kray Storm]

Подсветка территории для высадки космодесанта?

Интерактивная карта по-научному. Вот тут как раз такое.

[Spooch]

Подсветка территории для высадки космодесанта?

Интерактивная карта по-научному. Вот тут как раз такое.

Не совсем такое, мне нужна подсветка не при hover, а при onfocus или аналоге. Хотя базу, думаю, можно взять оттуда, если её реально переделать под мои нужды, естественно. Сейчас - спать, а днем посмотрю-покопаюсь!

Спасибо!

[Spooch]

Интерактивная карта по-научному. Вот тут как раз такое.

Попробовал сделать как в той статье написано - не получается. У меня базовое изображение - картинка. При сохранении в SVG (через Inkscape) в коде нужных строк просто нет. Воспользовался онлайн-сервисом по конверту изображений в SVG - получилась черно-белая тень от оригинала. Похоже, этот вариант все-таки не подойдет..

Edited February 9, 2013 by Spooch

[Spooch]

Опять я в ступоре! Помогите советом, товарищи!!

[sigma77]

Подсвечиваемая область квадратная? В чем проблема сделать отдельной картинкой или спрайтом?

[Spooch]

Да, квадратная. Проблема с отдельными картинками в том, что их будет много (пара сотен на странице и несколько таких страниц) - я боюсь представить, что тогда будет с загрузкой

Насчет спрайта - пробовал, не получилось, после чего мне посоветовали перейти на текущий вариант. Только и тут застрял

[sigma77]

А что именно не получилось со спрайтами, по мне самый оптимальный вариант...

[Spooch]

А что именно не получилось со спрайтами, по мне самый оптимальный вариант...

Сейчас, вот что тогда получилось:

Сначала вышла какая-то белиберда - позиции фрагментов перепутались и картинка в паззл превратилась. Подредактировал код и все встало на места (правда, так и не понял, почему косяк такой).

Код CSS

.awki {
		height:200px;
		width:200px;
		background:url(../images/a.jpg)
}

/* awki */
.awki.a1 {background-position:0px 0px;}
.awki.a2 {background-position:200px 0px;}
.awki.a3 {background-position:400px 0px;}
.awki.a4 {background-position:600px 0px;}
.awki.a5 {background-position:800px 0px;}
.awki.a6 {background-position:0px 200px;}
.awki.a7 {background-position:200px 200px;}
.awki.a8 {background-position:400px 200px;}
.awki.a9 {background-position:600px 200px;}
.awki.a10 {background-position:800px 200px;}
.awki.a11 {background-position:0px 400px;}
.awki.a12 {background-position:200px 400px;}
.awki.a13 {background-position:400px 400px;}
.awki.a14 {background-position:600px 400px;}
.awki.a15 {background-position:800px 400px;}
.awki.a16 {background-position:0px 600px;}
.awki.a17 {background-position:200px 600px;}
.awki.a18 {background-position:400px 600px;}
.awki.a19 {background-position:600px 600px;}
.awki.a20 {background-position:800px 600px;}
.awki.a21 {background-position:0px 800px;}
.awki.a22 {background-position:200px 800px;}
.awki.a23 {background-position:400px 800px;}
.awki.a24 {background-position:600px 800px;}
.awki.a25 {background-position:800px 800px;}

Вот часть кода, отвечающего за вывод фрагмента.

<td>
<a href="www.mysite.net/gallery/a25.html"> /* здесь линк, куда ссылается фрагмент */
<div id="a25"><img src="images/blank.gif" class="awki a7" alt=""></a></td></div></a></td>

Далее немного покопал код и стала работать версия:

<style>
a25:target {
	 visibility: hidden;
}
</style>

<a href="www.mysite.net/gallery/a25.html">
<a25 id="a25"><img src="images/blank.gif" width="200" height="200" border="0" alt=""></a25></a>

Правда, то, что мне надо - border, либо не фурычит, либо криво встает.

Полагаю, это из-за того, что:

1) у самого фрагмента border="0", и все фрагменты стыкованы вплотную, образуя единую картинку

2) использован спрайт с 1х1px гифкой в основе

Edited February 10, 2013 by Spooch

[sigma77]

Перемудрили что-то... http://jsfiddle.net/fainz777/sSFx5/

У меня только здесь :hover, вы же можете свою функцию подставить.

[Spooch]

Перемудрили что-то... http://jsfiddle.net/fainz777/sSFx5/

У меня только здесь :hover, вы же можете свою функцию подставить.

Теоретически, вместо Hover, focus будет работать? Чтоб "по наводке" закладочной все происходило?

В любом случае, спасибо, чуть позже буду работать с вашим вариантом!!!

[Kray Storm]

Да, квадратная.

Правда, то, что мне надо - border, либо не фурычит, либо криво встает.

Полагаю, это из-за того, что:

1) у самого фрагмента border="0", и все фрагменты стыкованы вплотную, образуя единую картинку

А что тогда насчет outline? Он-то в формировании габаритов не участвует, в отличие от border.

Или box-shadow?

Edited February 10, 2013 by Kray Storm

[Spooch]

Kray Storm, sigma77,

outline или opacity (из примера выше) - оба в принципе подходят, спасибо, а то с этим border'ом намаялся..

Тут встает основной косяк - я менял в примере у sigma77 hover на focus - при TAB'ировании все как надо, а вот при переходе на закладку, фокус переносится на фрагмент, но не срабатывает.

Самое интересное, что когда я раньше сам пробовал вариант со спрайтом - у меня получилось через закладку заставить его исчезать (через style.display="none")

а тут - вообще не работает по закладке. Хотя метод по сути один и тот же. В чем косяк, понять не могу!

Заменил псевдокласс на :target - и заработало, похоже!

Сейчас протестирую на сайте и отпишусь!

Кстати, вопрос про спрайты - в примере я не увидел никакой прозрачной гифки 1Х1 - я сам смотрел несколько мануалов и везде они указывались как musthave. Получается, совсем не обязательно их использовать?

Edited February 10, 2013 by Spooch

[Spooch]

Сделал по шаблону, любезно предоставленному sigma77 и с параметром от Kray Storm! Спасибо вам огромное, выручили!!!

У меня есть еще пара вопросов, можно их задать тут же?

Первый - долго и упорно гуглил вопрос о "прибивании футера к низу страницы" и нашел следующее универсальное решение:

в теле страницы основная часть и футер берутся в отдельные контейнеры

<html>
<body>
<div id="wrap">
	   <div id="main">
	    </div>
</div>
<div id="footer">
</div>
</body>
</html>

а в CSS пишется для них стиль

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
padding-bottom: 70px;} /* must be same height as the footer */

#footer {position: fixed;
margin-top: -70px; /* negative value of footer height */
height: 70px;
clear:both;}

/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}

Так вот, как только я сделал - все работало нормально (у меня там только 2 строчки текста по центру были), однако, в какой-то момент вдруг футер начал шалить! Мало того, что по центру он не отображается (слева стоит), так еще, если контента на странице много - уходит под него ( в моем случае - прячется под картинкой, т.е. его вообще не видно). Почему и как он поломался, ума не приложу! Может есть иной способ "прибить" его???

Edited February 10, 2013 by Spooch

[Kray Storm]

Мало того, что по центру он не отображается (слева стоит), так еще, если контента на странице много - уходит под него

Да уж. Очень странно, если учесть, что у самого футера зачем-то отрицательный margin со стороны контента и нет выравнивания по горизонтали

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

В общем, html похоже, а css какое-то слишком "универсальное".

Есть вот такой способ. Содержимое должно находиться внутри <div id="content">. И никаких clear:both футеру не нужно. Если есть плавающие блоки, то они будут удерживаться в #content за счет overflow. Естественно, всю схему можно еще обернуть, чтобы было удобно задавать min-/max-width и центрирование.

Насчет Opera Fix не знаю, но для старых IE "фиксы" нужны (там у них всякий hasLayout и все такое...).

В условный коммент для IE нужно добавить:

#main{height:100%;}

[Spooch]

Kray Storm, спасибо!

Еще один вопрос. Хочу сделать нечто вроде этого - http://www.thebloggerseotips.org/2012/08/slightly-thicker-box-for-blogger.html

Попробовал подстроить под себя - не работает. Похоже, дело в том, что там клик идет по картинке, а у меня - по активной области. Мне же надо, чтобы при клике по области вылезало окошко с картинкой.

Как такое можно намудрить?