OnMouseOver- нужно чтоб в определенном месте появлялся скрытый текст.

reload39 · November 19, 2007

Я не знаю JavaScript.. Но очень нужно написать такой скрипт, кот бы работал следующим образом:

При наведении на картинку (кот явл. ссылкой) в определенном месте документа появлялся скрытый текст, при наведении на другую картинку- на том же месте , но другой текст. А через 20 секунд чтоб текст исчезал если мышь не находится ни на одной из картинок.

Вот пытался редактировать этот код- ничего не получилось, т.к. при переносе тега span в другое место все перестает работать:

.
.
.
<script language="JavaScript1.2">
<!--
var ns6=document.getElementById&&!document.all?1:0

var head="display:''"
var folder=''

function expandit(curobj){
folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+1].style
if (folder.display=="none")
folder.display=""
else
folder.display="none"
}

//-->
</script>
</head>
<body bgcolor="#737994" text="#FFFFFF" link="#FFFFFF" topmargin="0" leftmargin="0">

<h3 style="cursor:hand" onClick="expandit(this)">Нажмите сюда</h3>
<span style="display:none" style=&{head};>
Тут может быть все, что вы захотите.
</span>
<h3 style="cursor:hand" onClick="expandit(this)">А теперь сюда</h3>
<span style="display:none" style=&{head};>
Тут, тоже, может быть все, что угодно :)
</span>
.
.
.

Заранее благодарен

reload39 · November 22, 2007

Немного упростилась задача- вся тема с 20 секундами отменяется) просто чтоб при наведении на ссылку где-то появлялся текст, на др. ссылку- др. текст...

Есть хоть какие-то идеи?

yopopt · November 23, 2007

Это не в javascript. Сделайте Ваши "спаны" абсолютно позицированными и показывайте где угодно.

reload39 · November 23, 2007

yopopt, я не понял... Я ведь плохо разбираюсь в яваскрипте. Я так понимаю, что при наведении на картинку должен срабатывать простой скрипт, кот. присвоит моему тексту артибут видимости...сам текст может быть заключен в контейнер span или какой-либо другой...

Вот как этот небольшой скрипт написать я и спрашиваю.

yopopt · November 23, 2007

А, извиняюсь. Не понял задачи. Простейший вариант данного кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Title</title>
<script type="text/javascript">
showhide = function(id) {
	var q = document.getElementById(id);  // Записываем в переменную "q" обращаение к переданному функции id, чтобы меньше писать.
	if(q.style.display == 'block' || q.style.display == '') { // Проверяем, какое значение display установлено и установленно ли вообще. Если проверка прошла успешно и блок виден, делаем его невидимым.
		q.style.display = 'none';
	}
	else { // Если проверка показала, что блок не видим делаем его видимым.
		q.style.display = 'block';
	}
	// Так-же данный код можно записать проще(хотя кому как...):
	// q.style.display = (q.style.display == 'block' || q.style.display == '' ? 'none' : 'block');
}
</script>
</head>
<body>
<h3 style="cursor:pointer;" onclick="showhide('showme')">А теперь сюда</h3>
<div id="showme" style="display:none">Тут, тоже, может быть все, что угодно :)</div>
</body>
</html>

reload39 · November 23, 2007

yopopt, огромное спасибо. Честно говоря, не ожидал получить код вот так быстро. Отличный форум! Редкость в наше время))

Я немного изменил код, т.к. ссылок то 4 и после наведения на каждую следующую, объекты к остальным нужно сделать невидимыми. Для этого по аналогии ввел функцию hide. Короче вот код (может кому пригодится):

<script type="text/javascript">
showhide = function(id) {
	var q = document.getElementById(id);
	if(q.style.display == 'block' || q.style.display == '') { 
		q.style.display = 'none';
	}
	else { 
		q.style.display = 'block';
	}

}
hide = function(id) {
	var u = document.getElementById(id);
	if(u.style.display == 'block') { 
		u.style.display = 'none';
	}

}
</script>

- это в контейнере head

<div id="showme" style="display:none">текст1</div>
<div id="showme2" style="display:none">текст2</div>
<div id="showme3" style="display:none">текст3</div>
<div id="showme4" style="display:none">текст4</div>

- 4 объекта

<a onmouseover="showhide('showme'), hide('showme2'),hide('showme3'),hide('showme4')">

- пример ссылки, кот в данном случае проявляет объект showme и скрывает объекты showme1, showme2, showme3.

Еще раз спасибо!

elfuvo · November 24, 2007

зачем так жестоко. Поставь на onMouseOut=hide(this.id)

yopopt · November 24, 2007

...
- пример ссылки, кот в данном случае проявляет объект showme и скрывает объекты showme1, showme2, showme3.
Еще раз спасибо!

Пожалуйста!

Однако можно сделать вс? ещ? проще.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Title</title>
<script type="text/javascript">
showhide = function(id) {
 var div = document.getElementById('list').getElementsByTagName('div');
 for(var n=0; n<4; n++){
 if(div[n].style.display != 'none') div[n].style.display = 'none';
 }
 document.getElementById(id).style.display = 'block';
}
</script>
</head>
<body>
 <h3 style="cursor:pointer;" onclick="showhide('showme1')">А теперь сюда</h3>
 <h3 style="cursor:pointer;" onclick="showhide('showme2')">А теперь сюда</h3>
 <h3 style="cursor:pointer;" onclick="showhide('showme3')">А теперь сюда</h3>
 <h3 style="cursor:pointer;" onclick="showhide('showme4')">А теперь сюда</h3>
 <div id="list">
 <div id="showme1" style="display:none">текст1</div>
 <div id="showme2" style="display:none">текст2</div>
 <div id="showme3" style="display:none">текст3</div>
 <div id="showme4" style="display:none">текст4</div>
 </div>
</body>
</html>

Здесь функция showhide() перебирает все дивы в объекте с идентификатором "list" и устанавливает им display:none;. После чего объекту, id которого переда?тся функции, устанвливается display:block;.

reload39 · November 24, 2007

Да, так действительно проще)

Благодарю за потраченное время!

Sign In

OnMouseOver- нужно чтоб в определенном месте появлялся скрытый текст.

Question

reload39

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

reload39

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

reload39

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

reload39

Link to comment

Share on other sites

elfuvo

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

reload39

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information