Jump to content
  • 0

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


reload39
 Share

Question

Я не знаю 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>
.
.
.

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

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

<!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>

Link to comment
Share on other sites

  • 0

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.

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

Link to comment
Share on other sites

  • 0
...

- пример ссылки, кот в данном случае проявляет объект 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;.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy