Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Выделение части html (https://javascript.ru/forum/events/21763-vydelenie-chasti-html.html)

yital9 22.09.2011 23:08

Выделение части html
 
Подскажите пожалуйста, может ктото сталкивался и может посоветовать статью или скрипт.

Необходим функционал: выделение части html при наведении курсора в окне браузера (т.е. по верстке)

Точно, как сделано в firebug-e.

Спасибо!

melky 22.09.2011 23:38

сделайте html.скрипт лёгенький будет

yital9 22.09.2011 23:56

Цитата:

Сообщение от melky (Сообщение 127718)
сделайте html.скрипт лёгенький будет

что это значит ?

melky 23.09.2011 03:05

грамотно поставьте вопрос, это значит. :)

то бишь выложите на всеобщее обозрение основу - статический html.

Gvozd 23.09.2011 03:30

melky,
Телепатия подсказывает мне, что ему необходима подсветка элемента над которым находится курсор мыши. Возможно просто цветной жирный бордер, а возможно, и полная подсветка как в фаербаге(отсупы, маргины/падинги)

yital9,
Если я правильно понял вашу задачу, то готовых скриптов или статей посоветовать не могу.
Если решите сами писать, то вам необходимо изучить обработку событий в JS, уметь определять позиции курсора и позицию/z-index/размеры DOM-элементов. Ну, и также модифицировать/создавать DOM-элементы, и стили к ним.
Задача не на 5 минут, даже при необходимых знаниях, так что учитесь и пишите, и да пребудет с вами Сила.

yital9 23.09.2011 09:19

Сорри, что плохо сформулировал, но Gvozd, вы практически правильно меня поняли ) вырезание только необходимо не просто для выделения бордером, а для последующего сохранения. Печально, что нету по этой теме никаких доков или наработак. Есть идея расковырять плагин ФФ...

melky 23.09.2011 10:48

я так и подумал. уже в голове начал её решать, как упёрся в 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>




Цитата:

Сообщение от yital9 (Сообщение 127748)
необходимо не просто для выделения бордером, а для последующего сохранения.

сохранения куда?? в базу?


Цитата:

Сообщение от yital9 (Сообщение 127748)
Есть идея расковырять плагин ФФ...

это плохая идея :)

Gvozd 23.09.2011 14:06

Цитата:

Сообщение от yital9
Печально, что нету по этой теме никаких доков или наработак.

Никто не говорил что нету.
просто я их, например не встречал. так как не искал


Часовой пояс GMT +3, время: 04:35.