8. Вывести на экран изображение, при наведении на которое курсором
картинка поменяется, а при нажатии на картинку, вокруг рисунка появляется рамка (рис. 4.21, а, б, в).
<BODY>
<CENTER>
<A HREF="C:\Users\Svetik\Desktop\myCSSwebsite\4.html" "
onMouseOver="Дискета.src='img12.jpg'"
onMouseOut="Дискета.src='img11.jpg'"><IMG
SRC="img11.jpg" NAME = "Дискета" BORDER=0></A>
</CENTER>
</BODY>
Чтобы рисунок был по центру используется тег <CENTER> выравнивает содержимое контейнера по центру относительно родительского элемента.
Атрибут HREF задает адрес документа, на который следует перейти.
Синтаксис атрибута <a href="URL">...</a>
Событие onmouseover срабатывает, когда курсор мыши наводится на элемент, к которому добавлен атрибут onmouseover. Это один из самых популярных атрибутов, применяемый для создания различных эффектов с изображениями и другими объектами веб-страницы. Обычно работает в связке с событием onmouseout.
Синтаксис атрибута onMouseOver="скрипт" или
<img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ №1'" onmouseout="this.src='ССЫЛКА НА ИЗОБРАЖЕНИЕ №1'" onmouseover="this.src='ССЫЛКА НА ИЗОБРАЖЕНИЕ №2''">
В
/*
замена
изображения на картинку с цветной
обводкой*/
onMouseOver="Дискета.src='img12.jpg'"
onMouseOut="Дискета.src='img11.jpg'"
SRC="img11.jpg" NAME = "Дискета" BORDER=0> /* добавив атрибут border="0" в тег <img> для того, чтобы рамка вокруг изображения на которое нажали курсором исчезла.*/
Адрес файла с картинкой задаётся через атрибут src.
а) б) в)
Рисунок 4.21 – Окно с изображением:
а) Изображение до наведения курсором; б) Изображение во время наведения курсором; в) Изображение после наведения курсором
4.5 Содержание отчета
1. Теория по JavaScript и использовании cлоев и изображений в HTML-документе.
2. Текст нового HTML-документа.
3. Копия экрана с отображением HTML-документа.
4. Выводы по работе.
4.6 Контрольные вопросы
1. Понятие JavaScript.
2. Понятие переменная.
3. Вывести на экран диалоговое окно с полем ввода, приглашающее пользователя ввести какое-либо строковое значение.
4. Описать процесс создания слоев.
5. Объект document и его методы и свойства.
6. В чем отличие метода от свойства?
7. Каким образом происходит объявление переменной?
8. Объект location и его методы.
9. Объект style.
10. Объект screen.
11. Объект navigator.
12. Объект window и его методы (open, prompt, confirm).
13. Объект layer.
14. Объект history.
15. Привести пример вывода на экран цикла.