Как сделать на сайте картинку "по слоям", с выделением элемента при наведении?

Тема в разделе "Верстка", создана пользователем ggnk, 17 янв 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. ggnk

    ggnk

    Регистр.:
    30 ноя 2008
    Сообщения:
    224
    Симпатии:
    20
    Есть картинка (схема техники в psd по слоям), надо сделать так чтоб при наведении на отдельные слои подсвечивался этот слой и всплывала текстовая подсказка. Сейчас смотрю в сторону флеша, но так как я с ним не знаком, хотелось бы узнать все возможные варианты.
     
  2. Красавчег

    Красавчег Завсегдатай

    Регистр.:
    15 мар 2010
    Сообщения:
    902
    Симпатии:
    298
    ggnk, если я вас правильно понял, вам поможет ImageMap. Никакого флеша, только хтмл.

    Здесь конкретно все описано и внизу страницы пример: http://htmlweb.ru/html/imagemap.php
     
    ggnk нравится это.
  3. ggnk

    ggnk

    Регистр.:
    30 ноя 2008
    Сообщения:
    224
    Симпатии:
    20
    Что-то похожее на это я и искал, а может существует какая-то программа-генератор координат, в которую можно загрузить картинку и в графическом интерфейсе кликами указать точки? Ато у меня довольно таки сложная схема, детали придется указывать многоугольниками с количеством вершин до 10-12 штук каждая(напр. изогнутая выхлопная труба, лопасти, внутрикорпусные потоки воздуха). В дримвьювере такой функции не нашел.
    P.S. Онлайн генераторы не подходят, размер картинки слишком большой.
     
  4. Красавчег

    Красавчег Завсегдатай

    Регистр.:
    15 мар 2010
    Сообщения:
    902
    Симпатии:
    298
    Поможет наверное только если WYSIWYG.Web.Builder.6 там есть такая фишка. Только выставляется по координатам.
     
  5. Christ

    Christ Постоялец

    Регистр.:
    24 ноя 2006
    Сообщения:
    62
    Симпатии:
    8
    Есть это в дримвьювере 100%. Правда он у меня древний, но не думаю, что они выкинули эту функцию.
     
  6. Localut

    Localut Деда Мороз

    Регистр.:
    13 фев 2009
    Сообщения:
    224
    Симпатии:
    81
    Вам нужна карта изображения html (тег <area>), т.е. сохраняете картинку в обычном .jpg и смотрите пример на сайте ниже.
    http://htmlbook.ru/content/karty-izobrazheniya
     
  7. Красавчег

    Красавчег Завсегдатай

    Регистр.:
    15 мар 2010
    Сообщения:
    902
    Симпатии:
    298
    Localut, да писали уже про это. Он визуально хочет делать, а не по координатам.
     
  8. Localut

    Localut Деда Мороз

    Регистр.:
    13 фев 2009
    Сообщения:
    224
    Симпатии:
    81
    Тогда прямая дорога в Dreamviewer. Сейчас специально посмотрел, в CS5 точно есть нужный функционал, круг, прямоугольник, многоугольник.
     
  9. mbumba

    mbumba

    Регистр.:
    11 апр 2007
    Сообщения:
    233
    Симпатии:
    36
    Подтверждаю, с достаточно древних версий и вплоть до последней эта фишка присутствует. Работать удобно, выбрал нужную фигурку и вперед. Но в дримвивере не очень удобно работать с уже существующими картами если они на оригинальной странице имеют смещение относительно точки 0.0, так как нужно предварительно сделать это же самое смещение здесь, об этом надо просто помнить чтобы не делать работу 2 раза.
     
  10. Kornor

    Kornor Писатель

    Регистр.:
    19 фев 2012
    Сообщения:
    6
    Симпатии:
    0
    DW CS5, щелкаете по картинке в шаблоне, снизу строка свойства (стиль плашек дизайнер, если брать стандартное расположение), разворачиваете её, снизу слева раздел карта, и три фигуры:квадрат, круг, кривая. Выделяете нужный элемент картинки, координаты определяются автоматом и прописываются внизу кода страницы.