Курилка.co.ua
Orphus RSS kurilka.co.ua

Category

Archives

Контактная информация/карта проезда в стиле веб 2.0

Author wmas wmas | Category Category Вебмастеру, Дизайн

На многих сайтах «контактная информация» и «карта проезда» находятся на отдельных страницах. Возможно, это как-то связано связанно с нюансами SEO или еще с какими-то действительно разумными причинами. Однако, «контактной информации» зачастую – пару строк, а «карта проезда» не очень может дать представление, где действительно находится то или иное место.

На мой взгляд, здесь весьма удобно использовать простое решение в виде двух объектов, отображающихся в зависимости от того что интересует посетителя, и давать ссылку на тот же сервис Яндекс.Карты, который позволяет получить ссылку на необходимый участок карты. Конечно, можно придумать множество вариантов на эту тему или вообще ничего не менять, но я приведу свой пример, а вы решайте сами.

Возьмем, к примеру, компанию «Phone Line», офис которой расположен по адресу: г.Киев, ул. Васильковская, 14. Идем на сайт Яндекс.Карты. Выбираем интересующую нас карту того или ногов города, в нашем случае это Киев. В строке поиска вводим запрос: «Васильковская». Если название улицы указано правильно, то будет выведена ссылка на ул. Васильковская и адреса, кликаем второе. Перед нами список адресов, находим дом №14 — кликаем и получаем карту с отметкой интересующего нас адреса. Чтобы получить ссылку на этот участок карты найдите пункт «Ссылка на это место» и кликните его. В открывшемся окне Вам будет дана как ссылка, так и html-код (к сожалению) не содержащий «кусочек карты», который можно было бы поместить на страницу сайта.

Получение ссылки на сервисе Яндекс.Карты

Если Вы все-таки желаете разместить «кусочек карты» на своем сайте – придется поработать. Делаем Print Screen и открываем имеющийся графический редактор… Остальное думаю пояснять не надо. Обрабатывайте картинку на свое усмотрение и идем дальше.

У нас есть «контактная информация» и «карта проекзда» с ссылкой на сервис Яндекс.Карты. Создадим два слоя (или объекта, называйте как Вам будет удобней):

<div id="contacts">
Адрес: г. Киев, ул. Васильковская, 14<br>
Телефоны: (044) 494-26-48, 496-09-27<br>
E-mail: <a href="mailto:phoneline@bigmir.net">PhoneLine@bigmir.net</a><br>
ICQ: 279740460<br>
см. <a onclick="contacts_map(); return false;" href="#">карту проезда</a>
</div>
<div id="map" style="display: none;">
<a href="http://maps.yandex.ua/map.xml?mapID=1600&mapX=3395410&mapY=6482165
&scale=9&slices=1&descx=3395410&descy=6482165"><img
src="/images/map.png" border="0"></a><br>
см. <a onclick="contacts_map(); return false;"
href="#">контактную информацию</a>
</div>

Первый слой contacts содержит отображаемую контактную информацию и ссылку «см. карту проезда». Второй слой map содержит «кусочек карты» и ссылку «см. контактную информацию». По умолчанию первый слой отображается, а второй скрыт за счет style="display: none;". Именно благодаря этой фишке, управление которой будет осуществляться через JavaScript, мы и будем отображать необходимый слой. Сам JavaScript может иметь следующий вид:

<script language="JavaScript">
function contacts_map() {
  var contacts_obj = document.getElementById('contacts');
  var map_obj = document.getElementById('map');
  if ( contacts_obj.style.display == '' ) {
    contacts_obj.style.display = 'none';
    map_obj.style.display = '';
  } else {
    contacts_obj.style.display = '';
    map_obj.style.display = 'none';
  }
}
</script>

Этот скрипт скрывает один из слоев и отображает другой ориентируясь по значению style.display для одного из слоев, в моем примере это contacts. Визуально это может выглядеть следующим образом:

Надеюсь, данное решение будет кому-то полезно, а быть может, Вы сможете предложить что-то действительно веб 2.0 ориентированное. Признаюсь честно, приставку «веб 2.0» я впихнул в название этой заметки просто так, для привлечения внимания. Хотя, как я понимаю, четкого определение, а что такое «веб 2.0» пока не существует, так что может и сойдет. Спасибо за внимание

Publish: Четверг Мар 6, 2008

8 Responses for "Контактная информация/карта проезда в стиле веб 2.0"

feed for comments on this post

  • Комментарий #1409 author: delaf Reply (subscribed to comments)
    publish: Пятница Мар 7, 2008 at 3:59 дп

    А можно пример в конце поста делать наглядый! в виде урла
    спасибо

  • Комментарий #1410 author: wmas Reply
    publish: Пятница Мар 7, 2008 at 12:42 пп

    2delaf: hi! я думаю, что здесь и нет особой нужды что-то демонстрировать тем более что в конце заметки есть графическое отображение результата работы скрипта. Но наверное подумаю и о возможности с примерами ;-)

  • Комментарий #1411 author: Саша Reply
    publish: Пятница Мар 7, 2008 at 1:12 пп

    Интересно надо будет попробывать использовать на своём сайте

  • Комментарий #1412 author: wmas Reply
    publish: Пятница Мар 7, 2008 at 3:33 пп

    2Саша: hi! да вариантов тут много… тему можно развивать… :mrgreen:

  • Комментарий #1459 author: Салат Reply
    publish: Воскресенье Мар 9, 2008 at 5:53 дп

    Наверное эти карты нужны,если тот или иной офис часто принимает гостей!

  • Комментарий #1462 author: wmas Reply
    publish: Понедельник Мар 10, 2008 at 3:21 дп

    2Салат: hi! Никто и не говорит, что «карты» не нужны. Просто способ их оформления и совмещения с «контактной информацией» может иметь варианты ;-)

  • Комментарий #1495 author: dig Reply
    publish: Вторник Мар 18, 2008 at 1:02 дп

    Конечно это все круто, но мелким и средним городам до этого еще ой как далеко. Гугль до моего города, надеюсь, скоро доберется. Есть конечно еще варианты с геофизическими (или как их там) институтами. Видел где-то готовое решение карты любого города, плюс возможность отмечать всяческие объекты, но покупка такого комплекса стоит денег у них, при чем не полная выкупаемость движка+карты, а ежемесячная аренда :)

  • Комментарий #1497 author: wmas Reply
    publish: Вторник Мар 18, 2008 at 2:57 дп

    2dig: hi! Да, тут я с тобой согласен, не на все города есть карты, но те что есть можно юзать ;-)


Popular links

Copyright © since 2006 Курилка.co.ua,
powered by WordPress