Всплывающая надпись в конце строк

SergKK · 17 дек 2013

Добрый.

Не подскажете, где можно найти пример / как правильно сгенерировать запрос для поисковика, что-бы реализовать следующую задумку: при наведении на строку (строка - ссылка) в ее конце показывалась надпись.

Пример:

Код (Text):

<div><a href=#>строка номер один</a></div><div id="stroka" style="display: inline;">появляющаяся строка</div>

<div><a href=#>строка номер два</a></div><div id="stroka" style="display: inline;">появляющаяся строка два</div>

Есть примеры, с реализацией типа: onmouse - show, onmouseout - hide.
Это прописывается в JS. Но, при наведении на строку 2 - выскакивает текст в строке 1. На сколько я понимаю, идет действие для 1-й строки, это прописано в JS.
Если в JS писать для каждой строки

Код (Text):

<div id="stroka2">

и т.д., то это в JS будет конструкций, сколько и строк. Как-то не красиво получается и громоздко.

Как можно добиться показывание текста для каждой строки, написав это кратко в JS файле?

YSandro · 17 дек 2013

SergKK сказал(а):

Но, при наведении на строку 2 - выскакивает текст в строке 1.
Нажмите, чтобы раскрыть...

В документе нельзя делать элементы с одним id (у тебя id="stroka"), это Идентификатор.
В обработчик события mouseover и прочих передаётся объект. Его используют для нахождения элемента, на который навели мышью. ID и не нужны.

SergKK сказал(а):

... это прописано в JS.
Есть примеры, с реализацией типа: onmouse - show, onmouseout - hide.
Нажмите, чтобы раскрыть...

Покажи, приведи пример. Может, всё работает на самом деле.

SergKK · 17 дек 2013

YSandro сказал(а):

Покажи, приведи пример. Может, всё работает на самом деле.
Нажмите, чтобы раскрыть...

1) JS

Код (Text):

<script type=\"text/javascript\">

<script type=\"text/javascript\">

function defPosition(event) {

var x = y = 0;

if (document.attachEvent != null) {

x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);

y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

} else if (!document.attachEvent && document.addEventListener) {

x = event.clientX + window.scrollX;

y = event.clientY + window.scrollY;

}

return {x:x, y:y};

}

document.onmousemove = function(event) {

var event = event || window.event;

document.getElementById('hint').style.left = defPosition(event).x + 10 + \"px\";

document.getElementById('hint').style.top = defPosition(event).y - 10 + \"px\";

}

function helpBox_on(title, text) {

document.getElementById('hint_title').innerHTML = title;

document.getElementById('hint').style.width = \"200px\";

document.getElementById('hint').style.border = \"1px solid red\";

document.getElementById('hint_title').style.padding = \"5px\";

}

function helpBox_on2(title, text) {

document.getElementById('hint_title2').innerHTML = title;

document.getElementById('hint').style.width = \"200px\";

document.getElementById('hint').style.border = \"1px solid red\";

document.getElementById('hint_title2').style.padding = \"5px\";

}

function helpBox_off() {

document.getElementById('hint_title').innerHTML = \"\";

document.getElementById('hint').style.width = 0;

document.getElementById('hint').style.border = 0;

document.getElementById('hint_title').style.padding = 0;

}

function helpBox_off2() {

document.getElementById('hint_title2').innerHTML = \"\";

document.getElementById('hint').style.width = 0;

document.getElementById('hint').style.border = 0;

document.getElementById('hint_title2').style.padding = 0;

}

</script>

2) PHP

Код (Text):

<div style=\"display:inline;\">

<a href=\"http://usefulscript.ru\" onMouseOver=\"helpBox_on('hint')\" onMouseOut=\"helpBox_off()\">

хинт

</a>

</div>

<div id=\"hint_title\" style=\"display: inline; background: green; padding: 0px;\">

</div>

<br>

<div style=\"display:inline;\">

<a href=\"http://usefulscript.ru\" onMouseOver=\"helpBox_on2('hint2')\" onMouseOut=\"helpBox_off2()\">

хинт2

</a>

</div>

<div id=\"hint_title2\" style=\"display: inline; background: green; padding: 0px;\">

</div>

3) На сколько я понимаю, нужно "загнать" в цикл "function helpBox_on", что-бы было: function helpBox_on1, function helpBox_on2, function helpBox_on3 и т.д.
И вешаем на каждый новый div: onMouseOver=\"helpBox_on1('hint2')\", onMouseOver=\"helpBox_on2('hint2')\" и т.д.

Правильно ли я поинмаю, что к примеру, если у меня около 500 строк, то JS файлик будет длинный?
Вот в том и вопрос: как это победить и "минимизировать" кол-во кода.

YSandro · 17 дек 2013

А как насчёт jQuery, есть запрет на использование? С этой библиотекой делается на раз-два. Обработчики событий мыши вешаются сразу на группу элементов. Она популярна.

YSandro · 17 дек 2013

Можно химичить, писать своё.

Код (PHP):

<!DOCTYPE html>

<html>

<head>

<title>трудный путь</title>

<meta charset="UTF-8">

<style>

.hint{display:none;}

</style>

<script>

function mouseOverCallback(e){//обработчик события mouseover

    var hintSpan = e.target.getElementsByTagName('span');//выбираем скрытый элемент span

    if(hintSpan[0]){

        hintSpan[0].style.display = 'inline';

        hintSpan[0].style.backgroundColor = 'green';

    }

}

function mouseOutCallback(e){//обработчик события mouseout

    var hintSpan = e.target.getElementsByTagName('span');//выбираем скрытый элемент

    if(hintSpan[0]) hintSpan[0].style.display = 'none';

}

function init(){

    var hrefsDiv = document.getElementsByClassName('hrefs');//контейнер для ссылок

    for (var n=0; n<hrefsDiv.length; n++){//по всем контейнерам

        var nodeList = hrefsDiv.item(n).getElementsByTagName('a');//все ссылки в контейнере

        for (var i=0; i<nodeList.length; i++){//по всем ссылкам

            var elA = nodeList.item(i);//элемент - ссылка

            elA.addEventListener("mouseover", mouseOverCallback, false);//слушаем событие mouseover

            elA.addEventListener("mouseout", mouseOutCallback, false);//слушаем событие mouseout

        }

    }

}

</script>

</head>

<body onload="init()">

<div class="hrefs">

    <ul>

        <li>[url="http://href1.ru"]подсказка к ссылке 1</span>[/url]</li>

        <li>[url="http://href2.ru"]подсказка к ссылке 2</span>[/url]</li>

        <li>[url="http://href3.ru"]подсказка к ссылке 3</span>[/url]</li>

    </ul>

</div>

</html>

Но я не могу дать гарантию, что это будет работать на всех браузерах, особенно в старых IE.

Можно в каждой ссылке прописывать onMouseOver="mouseOver(1)", передавать какой-нибудь номер или ещё чего для последующего поиска элемента с нужными хинтом. Но это тоже не удобно.

А вот так можно сделать на jQuery

Код (PHP):

<!DOCTYPE html>

<html>

<head>

<title>лёгкий путь</title>

<meta charset="UTF-8">

<style>

.hint{

    display:none;

    background:#0f0;

}

</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $('.hrefs a').hover(

        function(){$('span', this).show()},

        function(){$('span', this).hide()}

    );

});

</script>

</head>

<body>

<div class="hrefs">

    <ul>

        <li>[url="http://href1.ru"]подсказка к ссылке 1</span>[/url]</li>

        <li>[url="http://href2.ru"]подсказка к ссылке 2</span>[/url]</li>

        <li>[url="http://href3.ru"]подсказка к ссылке 3</span>[/url]</li>

    </ul>

</div>

</body>

</html>

Всплывающая надпись в конце строк

SergKK Новичок

YSandro Старожил

SergKK Новичок

YSandro Старожил

YSandro Старожил

Быстрый поиск

Всплывающая надпись в конце строк

SergKK Новичок

YSandro Старожил

SergKK Новичок

YSandro Старожил

YSandro Старожил