Изображение в качестве ссылки
Чтобы изображение сделать ссылкой, достаточно поместить его внутрь тега-контейнера <a>. В примере наша картинка будет ссылаться на страницу fish.html, которая будет открываться в отдельном окне.
Пример кода:
<html>
<head>
<title>Изображение - ссылка</title>
</head>
<body>
<a href="fish.html" target="_blank">
<img src="../images/fish.gif" alt="рыбка">
</a>
</body>
</html>
Результат:
Теперь любая часть нашей картинки работает, как ссылка. Обратите внимание, вокруг нашего изображения появилась рамочка (она отображается не во всех браузерах, например, в Opera вы ее не увидите).
ТЕГ — <MARQUEE>
Изначально этот тег был разработан для браузера Internet Explorer, но со временем и другие браузеры стали поддерживать его применение.
Давайте заставим строку двигаться. Для этого в блокноте вставляем следующее строки:
| <marquee>Бегущая строка</marquee> |
Строка стала двигаться. Теперь давайте сделаем строку немного заметнее, добавив стили.
| <marquee style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Применив атрибут directionсо значениемright мы изменим направление движения бегущей строки и она будет двигаться справа налево:
| <marquee direction="right" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
По умолчанию тегу <marquee> присвоен атрибут direction со значением left, поэтому строчка без применения атрибутов движется слева направо.
Подставив значение up для атрибута directionмы заставим строчку двигаться снизу вверх:
| <marquee direction="up" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Значение down укажет строчке двигаться сверху вниз
| <marquee direction="down" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Для увеличить скорости прокрутки бегущей строки используем атрибут scrollamount. В кавычках указываем число от 1. Например:
| <marquee scrollamount="30" direction="down" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Атрибут behavior задает способ прокрутки внутри заданного блока и по умолчанию имеет значениеscroll, что заставляет бегущую строчку скрываться из виду и начинать движение сначала.
Но если подставить значение alternate, то строчка не будет скрываться из виду, а дойдя до границ блока начнет движение в обратную сторону:
| <marquee behavior="alternate" scrollamount="10" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Значение slide для атрибута behavior дает команду бегущей строчке дойти до границы блока и остановиться:
| <marquee behavior="slide" scrollamount="10" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Атрибут height задает высоту блока. По умолчанию стоит 12 пикселей, но давайте ее изменим и немного добавим к скорости прокрутки бегущей строки:
| <marquee height="100" direction="up" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Атрибут width отвечает за ширину блока. Можно применять атрибуты width и height вместе, чтобы задать желаемые границы блока. Для наглядности добавим рамку в стили и чуть-чуть замедлим скорость прокрутки:
| <marquee width="300" height="300" scrollamount="15" direction="up"style="border: 2px solid #000000; color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Теперь давайте зададим фон для бегущей строки. Для этого применим атрибут bgcolor и поставим для него желтый цвет фона:
| <marquee bgcolor="#F5FF37" width="300" height="300" scrollamount="12"direction="down" style="border: 2px solid #000000; color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Теперь попробуем сделать так, чтобы бегущая строка двигалась в разные стороны.
| <marquee width="49%" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee><marquee width="49%" direction="right" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Устанавливаем время задержки анимации с помощью атрибута scrolldelay, подставляя числовые значения. По умолчанию стоит 80 миллисекунд:
| <marquee scrolldelay="30" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Атрибут scrolldelay — это еще один инструмент, с помощью которого мы можем регулировать скорость прокрутки.
СОДЕРЖАНИЕ ЗАНЯТИЯ.
Самостоятельная работа.
Выполнить приведенный в тексте пример (раздаточный материал) сохранить в собственной папке на рабочем столе.
9.2. Работа с преподавателем:
При появлении затруднений или при ошибочных действиях обратиться к преподавателю для исправления ошибок.
К концу занятия показать преподавателю отчет о выполненной работе и получить зачет по данной работе.
9.3. Контроль исходного и заключительного уровня знаний:
Тестирование на компьютере.