Меню "Вкладки"

[Viconte]

Добрый день!
Столкнулся с задачей сверстать меню с вкладками:
menu.png

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

PS. Идея была использовать три картинки меню с разными выбранными вкладками и на картинку просто повесить map, но может проще можно сделать?

[MyLastHit]

map/svg/canvas. Ну и еще встраиваемые плагины типа флеша и сильвы. Других вариантов нет.

[ADSoft]

CSS + JS можно

[Naive]

трансформ и фильтр-матрица

[Viconte]

Благодарю за Ваши ответы, но можно привести маленький пример или на словах алгоритм как сделать это на том же CSS + JS ?

Мой алгоримт таков:
1) Сделать спрайт из трех меню, на каждом меню одна активная кнопка;
2) Сделать три карты ссылок для каждого меню;
3) Создать прозрачное изображение по размеру меню;
4) Поставить bacground первого меню из спрайта;
5) Подключить карту ссылок для первого меню;
6) При клике по вкладке - менять background на соответствующее меню из спрайта и подключать соответствующую карту ссылок;

Мне кажется это далеко не самый лучший вариант.

Сделать спрайт из трех меню, на каждом меню одна активная кнопка, сделать изображение прозрачное и повестить на него background

[MyLastHit]

CSS + JS можно

Это невероятно затратно, если возложить всю логику на JS. Придется вручную описывать возможные положения курсора для абсолютно каждого элемента, а там их будет тьма тьмущая.

трансформ и фильтр-матрица

Как создать трапецию таким образом?

алгоритм как сделать это на том же CSS + JS ?

Ну это мазохизм.

Реально, нарисуйте как svg. Вам опыт будет. тут даже ни одной картинки не понадобится. Еще можно создать один слой с картинкой пункта меню, а поверх него расположить дивы разной высоты с одним именем класса. И ловить потом ховеры по ним. Но это хоть и быстро, но не интересно.

[masax]

можно трапецию сделать с помощью css3

так что css3 + JS для задания состояний - оптимально

[MyLastHit]

можно трапецию сделать с помощью css3

Пример кликабельной трапециедальной области на css3 покажите. Саму трапецию сделать просто, не спорю, а вот чтобы кликабельной была только область трапеции - это не представляю как сделать через трансформации. + не забывать о том что внутри тоже есть текст и его переколбасит.

[masax]

http://demo.guluzade.com/trapezium.html
пойдет?

заменить <div> на <a style="display:block"> в примере

// лень писать свое)

[Naive]

Сообщение от MyLastHit

Пример кликабельной трапециедальной области на css3 покажите. Саму трапецию сделать просто, не спорю, а вот чтобы кликабельной была только область трапеции - это не представляю как сделать через трансформации. + не забывать о том что внутри тоже есть текст и его переколбасит.

Рисовал в фаербаге, поэтому не кроссбраузерно и не оформлено. Сделал для копипаста в фаербаг для проверки.

<div style="overflow: hidden; visibility: hidden; width: 17em;"><div style="overflow: hidden; visibility: hidden; transform: matrix(1, 0, 1, 1, -26, 0);"><div style="background: none repeat scroll 0% 0% rgb(0, 0, 0); color: rgb(255, 255, 255); font-size: 2em; visibility: visible; padding: 10px 10px 10px 30px; transform: matrix(1, 0, -1, 1, 27, 0); cursor: pointer;">
  hello world!  
</div></div></div>

Получите, распишитесь.