Подсказка пр инаведении курсора міши

people2010 · April 22, 2010

Смотрю видеоурок, и там переписал вот такой код.

Должно при наведении на текст ,как там говорится повится должна подсказка.

Вот исходник, но почему-то вообще ничего не происходит, как исправить проблемму?

<html>

<head>

<style type="text/css">

background-color: blue;

padding:10px;

border:1px solid black;

position:absolute;

</style>

<script type="text/javascript">

function podskazka() {

this.show = function(text,x,y) {

var div = document.createElement('div');

div.className = 'podskazka';

div.id = 'metka';

div.innerHTML = text;

var koordx = x + 10;

var koordy = y + 20;

div.style.left = koordx + 'px';

div.style.top = koordy + 'px';

document.body.appendChild(div);

}

this.hide = function() {

var metka = document.getElementById('metka');

metka.parentNode.removeChild(metka);

}

  var vsplil = new podskazka();

</script>

</head>



<body>

<p onmouseover='vsplil.show('Первый абзац', this.offsetLeft, this.offsetTop)'

onmouseout='vsplil.hide()'>

Текст абзаца

</p>

</body>

</html>

psywalker · April 22, 2010

Что за видео-урок? Я давно уже ищу видео-уроки по JS, расскажи поподробнее.

people2010 · April 22, 2010

http://www.sdelaysite.com/javascript/javascript-video-3

Great Rash · April 22, 2010

Какой-то бред написан в стилях и в скрипте тоже...

people2010 · April 22, 2010

Вот так сработало.

<html>
<head>
<style type="text/css">
.podskazka{
background-color: blue;
padding:10px;
border:1px solid black;
position:absolute;
}
</style>

<script type="text/javascript">
function podskazka() {
this.show = function(text,x,y) {
var div = document.createElement('div');
div.className = 'podskazka';
div.id = 'metka';
div.innerHTML = text;
var koordx = x + 10;
var koordy = y + 20;
div.style.left = koordx + 'px';
div.style.top = koordy + 'px';
document.body.appendChild(div);
}
this.hide = function() {
var metka = document.getElementById('metka');
metka.parentNode.removeChild(metka);
}
}
  var vsplil = new podskazka();
</script>
</head>
<body>
<p onmouseover="vsplil.show('Первый абзац', this.offsetLeft, this.offsetTop);"
onmouseout='vsplil.hide()'>
Первый абзац
</p>
</body>
</html>

Если кто может прокоментируйте в каждой строке этот код, как он рабоатет. Заранее благодарю.

psywalker · April 23, 2010

Смотри дружище:

1) Ты создал класс-конструктор(функцию)

function podskazka() {

2) В ней ты создал функцию, которая будет содержать в себе всё нужные нам методы.

this.show = function(text,x,y) {

this - будет ссылаться на объект, который вызывает эту функцию, который мы создадим позже.

3) В общем в этой функции создаётся элемент, далее ему прописываются координаты, фигаты и прочая фигня. А в конце он будет вставляться в конец нашего документа. Т.е. в конец body

document.body.appendChild(div);

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

this.hide = function() {
var metka = document.getElementById('metka');
metka.parentNode.removeChild(metka);}

5) Вот это и есть наш главный объект var vsplil = new podskazka();

6) А вот это уже наш абзац, где вот этот обработчик onmouseover походу значит, что при наведении на абзац будет вызов нашего метода из конструктора функции, с передачей параметра, где первый означает сам текст, а второй и третий координаты какие-то). Далее вот этот обработчик onmouseout уже будет вызывать другой метод, который будет уничтожать наш созданый Див

<p onmouseover="vsplil.show('Первый абзац', this.offsetLeft, this.offsetTop);"
onmouseout='vsplil.hide()'>
Первый абзац
</p>

people2010 · April 23, 2010

Всё вроде понял после 4 просмотра видео. Тут возник ещё вопрос вот this.offsetLeft, this.offsetTop

Это 2 аргумента который передаются в функцию show,верно?

Может ли вместо this.offsetLeft, this.offsetTop стоять что-то иное ,в примеру. this.saxar, this.moloko

Great Rash · April 23, 2010

Читайте про ООП в javascript. У вас явно не хватает знаний. А там статья хорошая, многое поймете.

Sign In

Подсказка пр инаведении курсора міши

Question

people2010

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

people2010

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

people2010

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

people2010

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information