Изображение в качестве ссылки 


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Изображение в качестве ссылки



Чтобы изображение сделать ссылкой, достаточно поместить его внутрь тега-контейнера <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 — это еще один инструмент, с помощью которого мы можем регулировать скорость прокрутки.

 

СОДЕРЖАНИЕ ЗАНЯТИЯ.

Самостоятельная работа.

Выполнить приведенные в тексте примеры (раздаточный материал) применительно к Вам и все документы сохранять в формате.txt и.htm или.html в папке ТЕМА_14 в собственной папке на рабочем столе.

11.2. Работа с преподавателем:

При появлении затруднений или при ошибочных действиях обратиться к преподавателю для исправления ошибок.

К концу занятия показать преподавателю отчет о выполненной работе и получить зачет по данной работе.

11.3. Контроль исходного и заключительного уровня знаний:

Тестирование на компьютере.

 



Поделиться:


Последнее изменение этой страницы: 2016-12-27; просмотров: 178; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.218.169.50 (0.008 с.)