Выделение части html
Подскажите пожалуйста, может ктото сталкивался и может посоветовать статью или скрипт.
Необходим функционал: выделение части html при наведении курсора в окне браузера (т.е. по верстке) Точно, как сделано в firebug-e. Спасибо! |
сделайте html.скрипт лёгенький будет
|
Цитата:
|
грамотно поставьте вопрос, это значит. :)
то бишь выложите на всеобщее обозрение основу - статический html. |
melky,
Телепатия подсказывает мне, что ему необходима подсветка элемента над которым находится курсор мыши. Возможно просто цветной жирный бордер, а возможно, и полная подсветка как в фаербаге(отсупы, маргины/падинги) yital9, Если я правильно понял вашу задачу, то готовых скриптов или статей посоветовать не могу. Если решите сами писать, то вам необходимо изучить обработку событий в JS, уметь определять позиции курсора и позицию/z-index/размеры DOM-элементов. Ну, и также модифицировать/создавать DOM-элементы, и стили к ним. Задача не на 5 минут, даже при необходимых знаниях, так что учитесь и пишите, и да пребудет с вами Сила. |
Сорри, что плохо сформулировал, но Gvozd, вы практически правильно меня поняли ) вырезание только необходимо не просто для выделения бордером, а для последующего сохранения. Печально, что нету по этой теме никаких доков или наработак. Есть идея расковырять плагин ФФ...
|
я так и подумал. уже в голове начал её решать, как упёрся в html.
в принципе, утро вечера мудренее, так что я придумал, как и чо покажу код с комментами, может кто-нибудь допилит его // контейнер, где будет произведена работа. var container = document.getElementById('block'), //в какой тег будут обёрнуты слова в контейнере span = 'span', // "резерв". можно было использовать documentFragment. s = document.createElement(span); /* обходим все слова в контейнере каждое слово обёртываем в указанный сверху элемент(тег) и добавляем в "резерву" */ for(var i=0,a,b=container.innerHTML.split(' ');b[i];i++) (a=document.createElement(span)), (a.innerHTML = ' '+b[i]+' '), s.appendChild( a ); //для чего я не использовал documentFragment container.innerHTML=s.innerHTML; // легкий детект ie var ie = /*@cc_on!@*/0; //универсальный обработчик (один для 2х событий) var mvrhndlr = function(e){ // фиксим ивент для ie ie && ((e=event).target=e.srcElement); // если навели на span (слово) e.target.tagName=="SPAN" && //меняем класс. (e.target.className=e.type=='mouseover'?'overed':''); }; //без addEventLisneter и attachEvent container.onmouseover=container.onmouseout=mvrhndlr; ну и живой пример : <style> .overed { border:2px red solid; } </style> <div id="block">Это мой весёлый блок. Тут я могу выделять подводкой мыши к слову. Уху-ху!</div> <script> var container = document.getElementById('block'), span = 'span', s = document.createElement(span); for(var i=0,a,b=container.innerHTML.split(' ');b[i];i++) (a=document.createElement(span)), (a.innerHTML = ' '+b[i]+' '), s.appendChild( a ); container.innerHTML=s.innerHTML; var ie = /*@cc_on!@*/0; var mvrhndlr = function(e){ // фиксим ивент для ie ie && ((e=event).target=e.srcElement); // если навели на span (слово) e.target.tagName=="SPAN" && //меняем класс. (e.target.className=e.type=='mouseover'?'overed':''); }; //без addEventLisneter и attachEvent container.onmouseover=container.onmouseout=mvrhndlr; </script> Цитата:
Цитата:
|
Цитата:
просто я их, например не встречал. так как не искал |
Часовой пояс GMT +3, время: 04:35. |