Добрый день!
Сталкнулась с такой проблемой. Есть картинка, мне эту картинку нужно разделить на несколько частей, которые при наведении мышки должны изменять цвет на более яркий, а при клике на определенную часть должна открываться форма, где дается описание что это такое. Вот пример такой картинки.

Как это можно сделать в javascript css может кто то сталкивался с подобным, у кото то есть готовые решения?
 Спасибо.

Присоединённый файл ( Кол-во скачиваний: 19 )
 2.gif 47,04 Kb

Ни сss, ни javascripts.
Это нужно делать с помощью карт изображений. Делается это HTML-разметкой.

Для тега area можно задавать атрибут href, то есть делать заданные части изображения ссылками.

В случае полигона (shape="poly") тег coords содержит координаты вершин в формате "X1, Y1, X2, Y2, ...". Таким образом можно задавать фигуры почти любой сложности, если их можно представить в виде полинома.

Про другие атрибуты map и area можно почитать в любом справочнике по HTML

Это сообщение отредактировал(а) Arantir - 14.12.2012, 16:39

А такое как решить без javascript?

ksnk, хе-хе, ну это только половина вопроса. Но без карт js все равно не поможет.

На счет подсвечивания выход тоже есть, как ни странно. Есть плагин для jQuery "maphilight" (пример, сорсы).

Раскрасить area, к сожалению, невозможно. На этом теге стили не работают. 
jQuery maphilight использует динамическое рисование через canvas для достижения желаемого результата.

Спасибо боьшое за помощь! 

Порезать на эти area, составить мозаикой табличку (с правильными ссылками для каждой ячейки), в табличке правильные ссылки поместить в <a href=""><img src=...></a>, а подсвеченные варианты -- в background. В CSS по :hover включать opacity, чтобы фоновое изображэние просвечивало.

Насчет map и картинки - можно такое предложить (мой давний проект)




в качестве пояснения - #cover - хранилище для картинок img/r_X.gif, которые выводятся по наведению на нужную область. Они устанавливаются абсолютно над этой областью.

#map - это грубая нарезка исходной картинки на кусочки, чтобы определять какую картинку показывать. Номер в href - это порядковый номер картинки в #cover. Я делал исходную нарезку арей в Dreamweaver, вероятно, сейчас есть уже  более удобные средства.

#flag - изображение флажка, который выставляется по центру выделяемой области. 

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

В принципе, на dklab есть пример подобной прорисовки, использующий canvas и рисующий области по разметке в maparea. Этот пример требует очень точной разметки области в map/area, зато довольно компактен и эффектен ;)

Это сообщение отредактировал(а) ksnk - 14.12.2012, 20:32

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

Нарезались картинки обычным образом - с помощью фотошопа. Кусочки вырезались руками, на картинки навешивались тени-детали-красивости и они сохранялись в png-24.

Возможно, более удобным окажется вот такой вариант. 

Добрый день!
Карту я сделала, коряво получилась, но сама. Теперь столкнулась с такой проблемой: моя карта должна менять масштаб  при прокрутке колесика мыши. Нашла d3js фреймворк похожий пример : http://bl.ocks.org/2206340
но мне не понятны две вещи:
1. Что значит projection = d3.geo.albersUsa() 
albersUsa - если это название самой карты, то можно ее заменить на произвольное название, например d3.geo.skelet_celoveka(), или эти карты уже находятся гдето в библиотеки d3js ?
2. В этом примере пути по которым чертятся границы штатов помещены в файл .json


 у меня же прописаны эти пути просто в .js
 Мне здесь просто надо поменять типы файлов или это записывается как то по другому, например d3.js("skelet_celoveka.js, function(js)")
Может кто работал с этим фреймворком, сможет что то подсказать.
Ну или учитывая, что я совсем новичек, какой способ наиболее простой для изменения масштаба при прокрутки колесика мышки?


Это сообщение отредактировал(а) Karta - 24.12.2012, 12:18