"Интересный" сайтик

[Non Stop]

Добрый день.

Поступил заказ сверстать сайт. Не уверен что это возможно средствами html/css.

Посмотрите и скажите свое мнение на этот счет:

Главная

При нажатии должно выделяться:

Мое мнение сделать на флеше.

[Verder]

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

Edited August 24, 2011 by Verder

[SelenIT]

Типовое решение — "слоеный пирог". Нижний слой — единая подложка с дефолтным состоянием, верхний слой — прозрачная картинка с размеченной на ней <map> кликабельных областей, между ними — абсолютно позиционированные подсвеченные фрагменты. По умолчанию они все скрыты, по наведению на соотв. <area> показываются (можно с красивой анимацией прозрачности.

Есть варианты подсветки на canvas, но пока, имхо, это скорее из серии "смотрите, как я еще могу", картинками проще и практичнее.

[Vlad]

На JS всё это можно сделать. Вот посмотрите, практически ваш пример, сделан с Rapha?l.

http://raphaeljs.com/australia.html

[Non Stop]

Спасибо огромное! Попробую реализовать через <area>, как предложил SelenIT.

Со спрайтами не работал.

Понравилось решение, которое предложил Влад. Но к сожалению с javascript не знаком.

[Verder]

Спасибо огромное! Попробую реализовать через <area>, как предложил SelenIT.

Со спрайтами не работал.

Понравилось решение, которое предложил Влад. Но к сожалению с javascript не знаком.

Можешь исходник скинуть? Интересно стало

[Softlink]

Спасибо огромное! Попробую реализовать через <area>, как предложил SelenIT.

Со спрайтами не работал.

Понравилось решение, которое предложил Влад. Но к сожалению с javascript не знаком.

Как решите задачу, дайте ссылку посмотреть пожалуйста

Можешь исходник скинуть? Интересно стало

Вердер, сможешь тоже показать свое решение на спрайтах? Я не совсем представляю как здесь ими можно заверстать.

[Vlad]

Можно нарезать картинку грубо на прямоугольники, объединить их в одно изображение и в CSS фон смещать при наведении курсора. Надо только решить, как их так объединить, чтобы фрагменты не мешали друг другу.

[psywalker]

Softlink

Держи, дружище, зацени http://psywalker.ru/Forum/IMG/map_kiev/map_kiev.html

[rus]

интересные ссылки по теме с примерами, может какой заинтересует:

http://msdn.microsoft.com/ru-ru/library/gg589492%28v=vs.85%29.aspx

http://blogs.msdn.com/b/kichinsky/archive/2011/05/23/html5-canvas-svg.aspx

http://ruseller.com/lessons.php?rub=32&id=952

[psywalker]

Можно нарезать картинку грубо на прямоугольники, объединить их в одно изображение и в CSS фон смещать при наведении курсора. Надо только решить, как их так объединить, чтобы фрагменты не мешали друг другу.

Да? А как ты сделаешь, чтобы наведение было там, где нужно? В плане все эти извилистые линии и закругления чтобы не входили в клик?

[Softlink]

Softlink

Держи, дружище, зацени http://psywalker.ru/Forum/IMG/map_kiev/map_kiev.html

Спасибо. Долго высчитывал координаты?)))

Ну все-таки это карта. Я-то понял сразу, что на голеньких спрайтах нужно(Verder собирается) делать.

[Verder]

Так я и говорю на спрайтах можно. Пусть ТС исходник выложит. Единственное, подсветка будет не плавной (если на чистых спрайтах), а простая подсветка.

Главное порезать правильно, удалить на втором спрайте все лишнее и все.

[Vlad]

Да? А как ты сделаешь, чтобы наведение было там, где нужно? В плане все эти извилистые линии и закругления чтобы не входили в клик?

А никак, предложенный метод очень груб, он не учитывает все изгибы и закругления. Режешь прямоугольниками, чтобы примерно совпало и всё.

[Softlink]

Так я и говорю на спрайтах можно. Пусть ТС исходник выложит. Единственное, подсветка будет не плавной (если на чистых спрайтах), а простая подсветка.

Главное порезать правильно, удалить на втором спрайте все лишнее и все.

Verder, как ты сделаешь спрайт для такого блока http://clip2net.com/s/18aPv ? Чтобы он выделялся, но не налазил на соседний?

В общем, как сделаешь - покажи пожалуйста.

[Verder]

Так я и говорю на спрайтах можно. Пусть ТС исходник выложит. Единственное, подсветка будет не плавной (если на чистых спрайтах), а простая подсветка.

Главное порезать правильно, удалить на втором спрайте все лишнее и все.

Verder, как ты сделаешь спрайт для такого блока http://clip2net.com/s/18aPv ? Чтобы он выделялся, но не налазил на соседний?

В общем, как сделаешь - покажи пожалуйста.

Блин, я ж говорю, исходник в .psd надо. Очень просто делается - верхний спрайт кладется как есть, а нижний прозрачный .PNG на котором нарисована ТОЛЬКО розовая подсветка. Вырезать нужно и обтравливать.

[Non Stop]

Исходников нет, это нам пример показали. Дизайн еще будем рисовать, но принцип тот же.

Softlink

Держи, дружище, зацени http://psywalker.ru/Forum/IMG/map_kiev/map_kiev.html

Отлично сделано!

[psywalker]

SoftlinkДержи, дружище, зацени http://psywalker.ru/Forum/IMG/map_kiev/map_kiev.html

Спасибо. Долго высчитывал координаты?)))

Нет, это не моё творение. Просто показал пример, что такое можно реализовать подобным способом.

Да? А как ты сделаешь, чтобы наведение было там, где нужно? В плане все эти извилистые линии и закругления чтобы не входили в клик?

А никак, предложенный метод очень груб, он не учитывает все изгибы и закругления. Режешь прямоугольниками, чтобы примерно совпало и всё.

Ага, тогда понял.

SoftlinkДержи, дружище, зацени http://psywalker.ru/Forum/IMG/map_kiev/map_kiev.html

Отлично сделано!

Согласен)

[Shift-Web]

sprite - ul - z-index и немного жабакода

[Nekromancer]

Самое интересное на канвасе было бы конечно, надо попробовать как нить