В эту тему будем постить занимательные задачки по программированию на Java Script. Вот первая порция: Задание №1Цитата | Текст страницы формируется независимо от нас, он помещен в элемент <div id="div1">blablabla</div> (текст идет вместо "blablabla" ) Нужно в Javascript узнать высоту и ширину элемента.
| Задание №2Цитата | Написать сценарий для rollover изображений. Условия:
- удобочитаемый вид кода;
- сценарий основан на стандартах W3C DOM;
- код работает в моделях IE & W3C DOM (совсестим с браузерами, минимум 5ой версии);
| Задание №3Цитата | Иммется надпись "Скрыть", и текст внизу. Оба в своих дивах. При нажатии на "Скрыть" - текст скрывается, а надпись меняется на показать. При нажатии снова - все наоборот. Условия:
- использование div`ов;
- использование методов W3C или других совместимых;
- быстрота работы;
| Задание №4Цитата | Имеем список наименований, пусть это будут ссылки в скролируемом слое.
Справа от окошка область где появялються подсказки, пусть будет тоже скролируемый слой. Подсказка появляеться при наведении мыши на элемент из окошка описанного выше.
- элементов в окошке может быть сколь угодно;
- каждый элемент несёт на себе (в атрибуте) описание, т.е. показываемый слой подсказки генерим "на лету";
- подсказка может содержать html разметку;
|
Подсказка: Код | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head><title>Untitled</title> <style type="text/css"> .description { position: relative; width: 140px; height: 250px; background-color: #f0eff9; overflow: auto; border: 1px solid navy; } .container { position: relative; float: left; overflow: auto; width: 200px; height: 250px; border: 1px solid navy; background-color: #f0eff9; } .container .content { display: block; clear: both; margin: 3px 10px 1px 10px; padding-left: 3px; text-decoration: none; font-family: Tahoma; font-size: 16px; font-weight: bold; color: #323a0a; } .container .content:hover { margin-left: 8px; border-left: 2px solid #733109; color: #736509; } .text { float: left; width: 60%; font-family: Verdana; font-size: 14px; color: #2b0a50; } </style> </head> <body> <div class="text"> Вот пример скролируемого окошка. Содержимое для простоты будет в один ряд. Внутрь такого окошка можно положить что угодно, в нашем случае это будут ссылки с именами участников. Почему ссылки? Потому что не нужно париться с onmouseover что бы сделать выделение при наводе мышкой, нам поможет псевдо класс <b>hover</b> у ссылок. </div> <div class="container"> <a class="content" href="http://vingrad.ru/@Opik" title="Профиль пользователя Opik">Opik</a> <a class="content" href="http://vingrad.ru/@o.s.a" title="Профиль пользователя o.s.a">o.s.a</a> <a class="content" href="http://vingrad.ru/@Aliance" title="Профиль пользователя Aliance">Aliance</a> <a class="content" href="http://vingrad.ru/@PHP-Script" title="Профиль пользователя PHP-Script">PHP-Script</a> <a class="content" href="http://vingrad.ru/@Akina" title="Профиль пользователя Akina">Akina</a> <a class="content" href="http://vingrad.ru/@Sardar" title="Профиль пользователя Sardar">Sardar</a> <a class="content" href="http://vingrad.ru/@Anton Saburov" title="Профиль пользователя Anton Saburov">Anton Saburov</a> <a class="content" href="http://vingrad.ru/@Wowa" title="Профиль пользователя Wowa">Wowa</a> <a class="content" href="http://vingrad.ru/@sergej.z" title="Профиль пользователя sergej.z">sergej.z</a> <a class="content" href="http://vingrad.ru/@oleg1973" title="Профиль пользователя oleg1973">oleg1973</a> <a class="content" href="http://vingrad.ru/@Cheba" title="Профиль пользователя Cheba">Cheba</a> <a class="content" href="http://vingrad.ru/@Caramel" title="Профиль пользователя Caramel">Caramel</a> <a class="content" href="http://vingrad.ru/@Red Dragon" title="Профиль пользователя Red Dragon">Red Dragon</a> <a class="content" href="http://vingrad.ru/@Good Boy" title="Профиль пользователя Good Boy">Good Boy</a> </div> <!-- help/description window --> <div class="description"></div> </body> </html>
| Задание №5Цитата | У нас есть drop down меню, его опции - названия цветов бекграунда, когда человек выбирает нужный ему цвет background меняет цвет на выбранный.
|
Подсказка: Форма имеет следующий вид: Код | <select size="1" name="Name"> <option value="value1">Синий</option> <option value="value1">Красный</option> <option value="value1">Зеленый</option> <option value="value1">Фиолетовый</option> <option value="value1">Виноградовый</option> <option value="value1">Желтый</option> <option value="value1">Белый</option> <option value="value1">Черный</option> </select>
|
Ответы в этот топик не выкладывать! Здесь постятся только задания, сегодня-завтра дополню список. Удачи! Вместе мы сила! Это сообщение отредактировал(а) PHP-Script - 20.6.2005, 01:09
|