Показ/скрытие элементов страницы по событию

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

Код:

<div align="center" id="i1" onmouseover="document.getElementById('i1').style.visibility='hidden';" 
onmouseout="document.getElementById('i1').style.visibility='visible';">Этот текст 
прячется по наведению курсора мыши и показывается, когда курсор убран!</div>

Можно и с перестройкой макета страницы:

Код:

<table id="i2" border="1" align="center" cellpadding="4" cellspacing="0" 
onclick="document.getElementById('i2').style.display='none';">
<tr><td align="center" valign="middle">
<p>Щелкни меня - и я исчезну...</p>
</td></tr></table>

<div align="center" 
id="i3"onclick="document.getElementById('i2').style.display='table';">
Восстановить табличку</div>

Что же до "всплывающих" при наведении мыши на объект подсказок - тут и вовсе достаточно стандартного атрибута HTML title, работающего во всех распространённых сегодня браузерах (наведите курсор мышки на этот текст)

Код:

<span title="Вот она, подсказка!">наведите курсор мышки на этот текст</span>

Заменить один объект на другой нисколько не сложней - достаточно занести нужную разметку HTML в свойство innerHTML элемента, помеченного нужным id:

Код:

<div align="center" id="i4" 
onclick="document.getElementById('i4').innerHTML = 
 '<img src=pictures/3231.gif align=center alt=Картинка>';">
Щелкни по мне, чтоб заменить на картинку</div>

В определённых случаях, как в этом примере с тегом изображения, может быть много мороки с кавычками атрибутов вставляемого тега - я просто их не поставил, так как все атрибуты внедряемого тега <img> состоят из одного слова.

18.10.2012, 16:56 [10242 просмотра]