Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.09.2011, 23:08
Новичок на форуме
Отправить личное сообщение для yital9 Посмотреть профиль Найти все сообщения от yital9
 
Регистрация: 13.02.2011
Сообщений: 6

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

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

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

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 22.09.2011, 23:38
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

сделайте html.скрипт лёгенький будет
Ответить с цитированием
  #3 (permalink)  
Старый 22.09.2011, 23:56
Новичок на форуме
Отправить личное сообщение для yital9 Посмотреть профиль Найти все сообщения от yital9
 
Регистрация: 13.02.2011
Сообщений: 6

Сообщение от melky Посмотреть сообщение
сделайте html.скрипт лёгенький будет
что это значит ?
Ответить с цитированием
  #4 (permalink)  
Старый 23.09.2011, 03:05
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

то бишь выложите на всеобщее обозрение основу - статический html.
Ответить с цитированием
  #5 (permalink)  
Старый 23.09.2011, 03:30
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

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

yital9,
Если я правильно понял вашу задачу, то готовых скриптов или статей посоветовать не могу.
Если решите сами писать, то вам необходимо изучить обработку событий в JS, уметь определять позиции курсора и позицию/z-index/размеры DOM-элементов. Ну, и также модифицировать/создавать DOM-элементы, и стили к ним.
Задача не на 5 минут, даже при необходимых знаниях, так что учитесь и пишите, и да пребудет с вами Сила.
Ответить с цитированием
  #6 (permalink)  
Старый 23.09.2011, 09:19
Новичок на форуме
Отправить личное сообщение для yital9 Посмотреть профиль Найти все сообщения от yital9
 
Регистрация: 13.02.2011
Сообщений: 6

Сорри, что плохо сформулировал, но Gvozd, вы практически правильно меня поняли ) вырезание только необходимо не просто для выделения бордером, а для последующего сохранения. Печально, что нету по этой теме никаких доков или наработак. Есть идея расковырять плагин ФФ...
Ответить с цитированием
  #7 (permalink)  
Старый 23.09.2011, 10:48
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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


Сообщение от yital9 Посмотреть сообщение
Есть идея расковырять плагин ФФ...
это плохая идея
Ответить с цитированием
  #8 (permalink)  
Старый 23.09.2011, 14:06
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
обновление части страницы в html ivshof Элементы интерфейса 4 30.05.2016 21:40
Выделение HTML кода в Jquery Rinas jQuery 1 22.06.2011 09:35
Динамические html элементы sky Элементы интерфейса 2 07.03.2010 11:58
Выделение одиночных тэгов Pattern Events/DOM/Window 7 26.05.2009 23:29
Визуальное выделение части изображения Гость Общие вопросы Javascript 0 25.02.2008 19:44