RSS

Компьютерная терминология    1_9  A  B  C  D  E  F  G  H  I  J  K  L  M  N  O  P  Q  R  S  T  U  V  W  X  Y  Z  .....  A  Б  В  Г  Д  Ж  З  И  К  Л  М  Н  О  П  Р  С  Т  У  Ф  Х  Ц  Ч

Слайд Шоу

   


  • Как не оказаться обманутым при работе с SEO-агентствами
  • Ошибки в оптимизации контента
  • Распространенные ошибки оптимизации
  • Ссылки приносящие трафик
  • Юзабилити сайта
  • Оптимизация конверсионного пути
  • Основы внутренней оптимизации сайта
  • Поисковая оптимизация или контекстная реклама
  • Руководство по написанию эффективной статьи
  • Продвижение по НЧ-запросам
  • Мобильные версии сайтов и их продвижение
  • Линкбейтинг


  • Юзабилити интернет-магазина
  • Основы комментирования
  • Оптимизация содержимого тегов title, description, keywords
  • Способы уникализации контента на сайте
  • Борьба с дублями страниц
  • Дизайн и SEO
  • Оптимизация поведенческих факторов ранжирования
  • Покупка домена
  • Web-Designed
  • Webhints
  • Файл настроек .htaccess
  • Настройка robots.txt
Консультация юриста
Ваш регион:
Ваше имя:

Ваш телефон

(можно сотовый)

Ваш вопрос (можно кратко)


 

Если Вы web-дизайнер и Вам понадобилось сотворить череду изображений сменяющих друг друга при помощи какого-либо эффекта перехода, то здесь я позволю себе предложить Вам один из способов реализации этой затеи.

Для реализации задуманного Вам потребуется: Ваши изображения (желательно одного размера) и любой текстовый редактор способный редактировать html-документы.

Для примера возьмем четыре файла формата GIF и поименуем их slide_1.gif - slide_4.gif соответственно. Затем создайте и файл index.html и откройте его в текстовом редакторе.

Для начала нам понадобится тег <img>, в котором и будет происходить смена изображений. Свойству src этого тега присвоим имя первого файла в последовательности слайдов, а так же при помощи свойства id этот тег идентифицируется именем slaid. Для нашего примера это будет выглядеть следующим образом:

<img src="slide_1.gif" id="slaid">

Теперь необходимо, при помощи CSS, указать какой фильтр будет использован для перехода между изображениями. В нашем случае это выглядит следующим образом:

<style type="text/css">

img {filter: blendTrans(duration=3.0); }

</style>

Здесь видно, что для тега <img> устанавливается фильтр blendTrans (плавный переход)с параметром duration (продолжительность) равным трем секундам.

Теперь можно переходить к непосредственному написанию сценария на языке JavaScript, который будет выполнять замену изображений. Для этого откроем тег:

<scritp language="JavaScript" type="text/javascript" >

Затем переменную типа массив длиной в четыре элемента:

var img_array = new Array(4);

Далее следует код, который отвечает за загрузку всех слайдов до начала слайд шоу:

for (n=0;n<=3;n++) {

img_array[n] = new Image();

next=n+1;

img_array[n].src="slide_"+next+".gif";

}

Поскольку имена файлов, в которых хранятся изображения слайдов, отличаются только порядковым номером, то процесс их загрузки можно поместить в цикл for. В теле цикла первое выражение при помощи команды new Image() создает объект типа Image (изображение) и присваивает его текущему элементу массива.

Затем следует выражение:

next=n+1;

Оно необходимо, так как элементы массива начинаются с нуля, а нумерация файлов начинается с единицы.

Так как созданный ранее объект типа Image по своим свойствам полностью соответствует тегу <img>, то при помощи последнего выражения в теле цикла свойству src данного объекта присваивается имя соответствующего файла.

После того как все изображения были загружены в оперативную память пользователя, можно приступать к реализации перехода между ними. Для этого напишем следующую функцию:

i = 1;

function doFilter() {

slaid.filters[0].Apply();

slaid.src=img_array[i].src;

slaid.filters[0].Play();

i = i+1;

if (i == 4) i = 0

}

Переменная i, объявленная перед функцией играет роль индекса элементов массива и по умолчанию имеет значение 1.

Первое выражение в функции можно примерно перевести на русский язык следующим образом: “Вызвать метод Apply() нулевого фильтра для объекта изображения с именем slaid”. Этот метод “замораживает” видимое в данный момент изображение и позволяет изменить значение параметров перехода и самого изображения, не требуя немедленного применения перехода.

Во второй строке свойству src объекта изображения присваивается значение свойства src текущего элемента массива объектов изображений загруженных ранее.

В третьей строке для выполнения перехода используется метод Play().

Затем осуществляется переход к следующему элементу массива при помощи увеличения индекса массива на единицу. После чего индекс сравнивается с четверкой и если результатом сравнения будет true (истина), то индекс обнуляется.

Теперь нам осталось только вызвать нашу функцию при помощи функции setInterval(). Для нашего примера это выглядит так:

setInterval("doFilter()", 4000);

Эта функция выполняет операцию или другую функцию, которая была передана ей первым параметром все время через промежуток равный второму параметру, который задается в миллисекундах. В нашем случае функция doFilter() будет выполнятся через четыре секунды.

После этого не забудте закрыть тег <script>.

И в завершении хотелось бы заметить, что в HTML 4.0 существует еще один фильтр перехода revalTrans, который позволяет осуществлять переходы между изображениями аж 24-я способами. А главное то, что это слайд шоу можно легко адаптировать для взаимодействия с другими частями вашего сайта, такими как кнопки, ссылки и остальные управляющие элементы.

seo & website usability   inet   os faq   hardware faq   memory   video   cpu   hdd   mainboard faq   printer & scaner   modem   mobiles   hackzone

Технологии поискового маркетинга
Практика поискового маркетинга
Flash
Тэги
XML
DHTML
PHP
MySQL
WebMail
.NET
VBScript
CGI
Графические форматы Интернета
WEB-сайт шаг за шагом
CMS faq
FRAME faq
CSS faq
SSI faq
RSS faq
WAP faq
Web-Designed
Webhints
Файл настроек .htaccess
Настройка robots.txt

po gonn © 2005 "JULI'S BEEHIVE"