{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всем доброго времени суток! Одному из подписчиков обещал рассказать про карты-изображения. Сегодня покажу на конкретном примере.","type":"unstyled","key":"96fu7"},{"data":{"image":{"id":"5d874555e3062c00ad636c5d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Уроки HTML5","type":"atomic:image","key":"2tnuh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":32,"style":"BOLD"},{"length":26,"offset":32,"style":"ITALIC"}],"text":"Для создания карты-изображения вам необходимо изображение (гений :D). ","type":"unstyled","key":"d86in"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":58,"style":"BOLD"},{"length":5,"offset":92,"style":"BOLD"},{"length":5,"offset":136,"style":"BOLD"},{"length":6,"offset":178,"style":"BOLD"},{"length":5,"offset":188,"style":"BOLD"},{"length":4,"offset":228,"style":"BOLD"},{"length":6,"offset":274,"style":"BOLD"}],"text":"Его мы будем разбивать на составные части с помощью тега . Сначала указываем элемент с адресом картинки. Далее ставим тег . В который помещаем несколько тегов . В обязательно нужно указать атрибут name. Его значение нужно поместить в атрибут usemap вашего изображения.\n","type":"unstyled","key":"a0qq7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И сразу к делу:\n","type":"header-three","key":"basvs"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":4,"offset":40}],"inlineStyleRanges":[{"length":203,"offset":0,"style":"BOLD"}],"text":"

\n\n \n\n","type":"unstyled","key":"eumj1"},{"data":{"image":{"id":"5d874623118d7f00b47c092d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Более подробный код","type":"atomic:image","key":"5nqad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"},{"length":7,"offset":16,"style":"BOLD"},{"length":5,"offset":96,"style":"BOLD"},{"length":5,"offset":195,"style":"BOLD"},{"length":17,"offset":221,"style":"ITALIC"}],"text":"И все! Элементы разбивают часть картинки на области. За форму области отвечает атрибут shape. Можно сделать область прямоугольной или круглой. А можно и любой формы с помощью значения poly. Координаты областей довольно условные. Вы можете играть с ними в зависимости от размеров изображения. При клике на области вызываются разные переходы по ссылкам. \n","type":"unstyled","key":"chb7q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Метод довольно древний, но некоторым нравится. Можете брать на вооружение ;)\n ","type":"header-three","key":"fdoac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"PHhApdx4ltNcMeKe0p6u"}],"entityMap":{"0":{"data":{"href":"https://vk.com/im?sel=401262508&st=%23map","url":"https://vk.com/im?sel=401262508&st=%23map"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}