Выделение части 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, время: 08:10. |