Кликаем на текст, если ничего ввели, текст возвращается. Таким образом можно не писать поясняющий текст около поля.
Делается так:
<input type="text" value="Текст" onfocus="javascript: if (this.value == ‘Текст’) {this.value=”};" onblur="javascript: if (this.value == ”) {this.value=’Текст’};">
А именно: onfocus="javascript: if (this.value == ‘Текст’) {this.value=”};"
При клике по полю проверяем, не ввел ли что-нибудь пользователь до этого, и если нет - то обнуляем значение value.
onblur="javascript: if (this.value == ”) {this.value=’Текст’};
Если пользователь ничего не ввел, то делаем текущее value равным ‘Текст’
При использовании библиотеки mootools и innerHTML или appendChild в интернет эксплорер возникает ошибка - страница не загружается и выдается ошибка - операция прервана.
Возникает это, потому что дочерний контейнер содержит скрипт, изменяющий родительский контейнер.
На сайте Microsoft об этой проблеме знают, но решения, кроме как использовать internet explorer 8 - не предлагают. Нам такой вариант не подходит, да и решение простое до безобразия - тегу script надо добавить defer="defer".
Таким образом мы говорим браузеру, что исполнять этот скрипт нужно после полной загрузки страницы.
Сразу оговорюсь – все написанное ниже – примитивно, и написано только для полного понимания происходящего. По сути все это можно написать гораздо проще и грамотнее.
Onmouseover – говорим, что действие будет происходить при наведении мыши на объект.
А внутри у нас: document.getElementById(’div_maindiv’) – Объясняем, что сейчас будем работать с объектом, ID которого равен div_maindiv. .style.background=’url(show1.jpg)’; - что же собственно делаем – ставим в качестве background’а картинку show1.jpg.
Точка с запятой показывает, что первое действие мы описали, и дальше будем писать второе: this – как наверное поняли, это альтернатива document.getElementById(’div_maindiv’), и говорит она о том, что работать будем с объектом, в котором написан код. .style.backgroundColor=’#fff’ – меняем background-color на белый цвет.
Ну и onMouseOut="this.style.backgroundColor=’#999′" – говорит о том, что при уводе мыши с элемента – необходимо поменять background-color у самого элемента обратно на серый.
Все это конечно же в <head>. При включенном ява скрипте произойдет редирект на fixblog.ru через 3000 миллисекунд, что равно 3 секундам, при отключенном - тоже самое через три секунды.
Небольшой FAQ по теме:
Q: Что это?
A: Имеем такую конструкцию:
Слой 1
Some text
Слой 2
В итоге это будет выглядеть так:
Слой 1
Some text
Слой 2
После небольших махинаций с ява скриптом, это будет выглядеть так:
Слой 2
Some text
Слой 1
При этом код останется прежним. Можно это сделать и позиционированием, но с условием, что мы не знаем какой height у Some Text – это сделать не получится.
Q: В каких случаях применять?
A: Например баннеры. Допустим, есть баннер в шапке, баннер в правой колонке и баннер в подвале. Загружаются они по мере загрузки страницы, что немного тормозит всю загрузку. Мы же, путем подмены слоев, сначала загрузим страницу, а потом уже выскочат все баннеры одновременно.
И так, код:
a
b
Вот и все. Последнее, что надо знать – скрипт меняет содержимое слоев, учтите это, применяя стили для содержимого.
