ЛАБОРАТОРНА РОБОТА № 7

Варіант 1

На сторінці знаходиться малюнок. При наведенні курсору миші на нього малюнок збільшується в розмірі. При введенні курсору в строну малюнок зменшується.
На сторінці знаходиться текст зеленого кольору та кнопка з написом «Червоний». При натисканні на кнопку, колір тексту стає червоним, і напис на кнопці змінюється на «Зелений». При повторному натисканні на кнопку, колір тексту стає зеленим, і напис змінюється на «Червоний».
На сторінці знаходиться малюнок м'ячика та баскетбольної сітки(div у рамці без фону). Перемістіть м'ячик у сітку, при попаданні м'ячик у сітку там має з'явитися червона рамка.
Help me!!!

Варіант 2

На сторінці міститься текст зеленого кольору. При наведенні курсору миші на нього колір тексту стає червоним. При введенні курсору в строну, текст знову стає зеленим.
На сторінці знаходиться малюнок та кнопка з написом «Збільшити». При натисканні на кнопку, малюнок збільшується в розмірі і напис на кнопці змінюється на «Зменшити». При повторному натисканні на кнопку, малюнок зменшується, і напис змінюється на «Збільшити».
На сторінці знаходиться малюнок рибки та порожнього акваріума(div у рамці без фону). Перемістіть рибку в акваріум при попаданні рибки в акваріум там має з'явитися блакитний фон (вода).
Help me!!!

Варіант 3

На сторінці знаходиться текст. При наведенні курсору миші на нього, шрифт стає більшим. При введенні курсору в строну, текст знову стає дрібним.
Дана порожня сторінка з жовтим фоном і на ній кнопка з написом «Рожевий». При натисканні на кнопку, колір фону стає рожевим, і напис на кнопці змінюється на «Жовтий». При повторному натисканні на кнопку, колір фону стає жовтим, і напис змінюється на «Рожевий».
На сторінці знаходиться малюнок пташки та порожньої клітки(div у рамці без фону). Перемістіть пташку в клітку, при попаданні пташки в клітку там має з'явитися рожевий фон.
Help me!!!

Варіант 4

На сторінці знаходиться текст. При наведенні курсору миші на нього шрифт стає курсивним. При введенні курсору в строну текст знову стає звичайним.
На сторінці знаходиться текст у рамці зеленого кольору та кнопка з написом «Червоний». При натисканні на кнопку, колір рамки стає червоним, і напис на кнопці змінюється на «Зелений». При повторному натисканні на кнопку, колір рамки стає зеленим, і напис змінюється на «Червоний».
На сторінці знаходиться малюнок собачки та порожньої будки(div у рамці без фону). Перемістіть собачку в будку, при попаданні собачки в будку там має з'явитися жовте тло.
Help me!!!

Варіант 5

Дана порожня сторінка. При наведенні курсору миші на сторінку її тло стає рожевим. При виведенні курсору зі сторінки її фон стає жовтим.
На сторінці знаходиться текст та кнопка з написом «Збільшити». При натисканні кнопки розмір шрифту стає більшим, і напис на кнопці змінюється на «Зменшити». При повторному натисканні кнопки розмір шрифту стає меншим, і напис змінюється на «Збільшити».
На сторінці знаходиться малюнок квітки та порожньої вази(div у рамці без фону). Перемістіть квітку у вазу, при попаданні квітки у вазу там має з'явитися блакитна вода.
Help me!!!

Варіант 6

На сторінці знаходиться текст у межах зеленого кольору. При наведенні курсору миші на нього колір рамки стає червоним. При введенні курсору в строну, колір рамки стає зеленим.
На сторінці знаходиться текст та кнопка з написом «Збільшити». При натисканні кнопки розмір шрифту стає більшим, і напис на кнопці змінюється на «Зменшити». При повторному натисканні кнопки розмір шрифту стає меншим, і напис змінюється на «Збільшити».
На сторінці знаходяться малюнки кількох книг і порожній полиці(div у рамці без фону). Перемістіть книги на полицю.
Help me!!!

Варіант 7

На сторінці знаходиться текст. При наведенні курсору миші на нього навколо тексту з'являється рамка. При відведенні курсору в строну, рамка зникає.
На сторінці знаходиться текст та кнопка з написом «Закреслити». При натисканні на кнопку, текст закреслюється, і напис на кнопці змінюється на «Не закреслювати». При повторному клацанні по кнопці закреслення забирається, і напис змінюється на «Закреслити».
На сторінці знаходяться зображення 10 цифр і порожній стіл з 8 комірками (там схован код- пароль)(div у рамці без фону). Розставте цифри на стол вгадайте пароль..
Help me!!!

Варіант 8

На сторінці знаходиться малюнок. При наведенні курсору миші на нього навколо малюнку з'являється рамка. При відведенні курсору в строну, рамка зникає.
На сторінці знаходиться таблиця без кордонів із двох осередків. В одному осередку картинка, в іншому осередку кнопка з написом «Сховати». При натисканні на кнопці картинка зникає, а напис на кнопці змінюється на «Показати». При повторному натисканні на кнопку, картинка з'являється, і напис змінюється на «Сховати». (
На сторінці знаходиться малюнок м'ячика та футбольні ворота(div у рамці без фону). Забийте гол при попаданні м'ячик у ворота там має з'явитися зелена рамка.
Help me!!!

Варіант 9

На сторінці знаходиться текст. При наведенні курсору миші на нього текст закреслюється. При введенні курсору в строну, закреслення зникає.
На сторінці знаходиться текст у рамці та кнопка з написом «Прибрати рамку». При натисканні на кнопку, рамка зникає, і напис на кнопці змінюється на «Показати рамку». При повторному натисканні на кнопку, рамка з'являється, і напис змінюється на «Прибрати рамку».
На екрані таблиця з п'яти осередків з назвою предметів, перемістіть у кожну комірку картинку із зображенням відповідного предмета.
Help me!!!

Варіант 10

На сторінці знаходиться таблиця без кордонів із двох осередків. В одному осередку картинка, в іншому осередку кнопка з написом «Сховати». При наведенні миші на кнопку зображення зникає, а напис на кнопці змінюється на «Показати». При введенні курсору в строну, картинка з'являється, і напис на кнопці змінюється на «Сховати». Рекомендація: щоб кнопка не змінювала свого місця при зникненні картинки, задати розміри осередку.
На сторінці знаходиться малюнок у рамці та кнопка з написом «Прибрати рамку». При натисканні на кнопку, рамка зникає, і напис на кнопці змінюється на «Показати рамку». При повторному натисканні на кнопку, рамка з'являється, і напис змінюється на «Прибрати рамку».
На сторінці є малюнки кількох книг і порожній полиці (div у рамці без фону). Перемістіть книги на полицю.
Help me!!!

Варіант 11

На сторінці знаходиться таблиця без кордонів із двох осередків. В одному осередку текст, в іншому осередку кнопка з написом «Сховати». Під час наведення миші на кнопку текст зникає, а напис на кнопці змінюється на «Показати». При введенні курсору в строну текст з'являється, і напис на кнопці змінюється на «Сховати».
На екрані малюнок тварини та три кнопки з назвами тварин. При натисканні на кнопку замість існуючої картинки з'являється картинка з обраною твариною.
На сторінці знаходяться малюнки кількох чашок і порожній стіл(div у рамці без фону). Розставте чашки на столі.
Help me!!!

Варіант 12

На сторінці знаходиться таблиця з трьох осередків. У двох осередках назви тварин, третій осередок порожній. При наведенні курсору миші на назві тварини, у осередку таблиці з'являється малюнок цієї тварини. При відведенні курсору убік малюнок зникає (тобто підставляється порожній малюнок empty-1.gif). Малюнки: gippopotam-1.gif, akula-1.gif, hobot-1.gif.
На сторінці знаходиться таблиця без кордонів із двох осередків. В одному осередку текст, в іншому осередку кнопка з написом «Сховати». При натисканні на кнопці текст зникає, а напис на кнопці змінюється на «Показати». При повторному натисканні на кнопку, текст з'являється, і напис змінюється на «Сховати».
Реалізуйте переміщення шашок дошкою.
Help me!!!

Варіант 13

На сторінці знаходиться таблиця з трьох осередків. У двох осередках картинки тварин, третій осередок порожній. При наведенні курсору миші на картинку тварини, у комірці таблиці з'являється назва цієї тварини. При відведенні курсору в бік назва зникає: gippopotam-1.gif, akula-1.gif, hobot-1.gif.
На сторінці знаходиться одна картинка, чотири кнопки та текстове поле. На кожній кнопці напис – марка машини. При клацанні миші на кнопці замість картинки, яка на екрані, з'являється фото цієї машини, а в текстовому полі з'являється вартість цієї машини.
На екрані таблиця з трьох осередків з назвою тварин, перемістіть в кожну комірку картинку відповідного тварини.
Help me!!!

Варіант 14

На сторінці знаходиться таблиця з двох рядків та двох стовпців та текстове поле. У таблиці фото чотирьох машин. При наведенні курсору миші на машину у текстовому полі з'являється марка цієї машини. При відведенні курсору убік назва зникає. Малюнки: car1.jpg, car2.jpg, car3.jpg, car4.jpg.
На екрані заголовок з назвою тварини, відповідна картинка та три кнопки з назвами тварин. При натисканні на кнопку, замість назви та картинки, які на сторінці, з'являється назва та картинка з обраною твариною.
Реалізуйте переміщення шашок дошкою.
Help me!!!

Варіант 15

На сторінці знаходиться текст та посилання (у нікуди). При наведенні курсору миші на посилання після неї з'являється додатковий текст. При відведенні курсору миші убік текст зникає.
На сторінці знаходиться таблиця з одного рядка та трьох стовпців, два текстові поля та кнопка з написом «Переставити». У кожному осередку таблиці знаходиться картинка. У текстові поля ввести номери картинок, які хочемо поміняти місцями. При натисканні на кнопку вибрані зображення змінюються місцями. Якщо введено неправильні номери, alert вивести повідомлення про помилку.
Реалізуйте переміщення картин на стіні.
Help me!!!

Варіант 16

На сторінці знаходиться текст. При наведенні курсору миші на нього навколо тексту з'являється рамка і блакитний фон. При відведенні курсору в строну, рамка зникає і фон зникають.
На сторінці знаходиться текст та кнопка з написом «Сховати». При натисканні на кнопку, текст зникає, і напис на кнопці змінюється на «Показати». При повторному клацанні по кнопці текст з'являється, і напис змінюється на «Сховати».
На сторінці знаходяться зображення 10 цифр і порожній стіл з 8 комірками (там схован код- пароль)(div у рамці без фону). Розставте цифри на стол вгадайте пароль..
Help me!!!

Варіант 17

На сторінці знаходиться таблиця з одного рядка та трьох стовпців. У кожному осередку знаходиться картинка. При наведенні курсору миші на одну з картинок, дві інші змінюються місцями. Після відходу курсору миші з будь-якої картинки сцена повертається у вихідний стан.
На сторінці знаходиться текст та посилання (у нікуди) «Докладніше». При натисканні на це посилання, після неї з'являється додатковий текст і посилання (в нікуди) «Згорнути». При натисканні на посилання «Згорнути», додатковий текст зникає.
Створіть слайдер:Захопіть мишкою синій бігунок і рухайте його.
Help me!!!
- Слайдер повинен нормально працювати при різкому русі миші ліворуч або праворуч за межі смуги. При цьому бігунок повинен зупинятися чітко у потрібному кінці смуги.
- При натиснутому бігунку миша може виходити за межі смуги слайдера, але слайдер нехай все одно працює (це зручно для користувача).
Слайдер – це div, підфарбований фоном, усередині якого знаходиться інший div, оформлений як бігунок, з position:relative.
Використовуємо його координат position:relative, тобто. координати ставляться не абсолютні, а щодо батька, тому що це зручніше. І далі реалізуйте Drag&Drop тільки по горизонталі, з обмеженням по ширині.

Назад Вперед Зміст