Язык Java Script для web © Николаева Вера Александровна, 2010 - 2011 http: //vnikolaeva. narod. ru http: //www. junior. ru/nikolaeva
Создание ролловеров Ролловеры – это кнопки или картинки которые под управлением Java Script-а, прописанного на веб-странице, меняются при наведении курсора мыши на них. Пример на титульной странице веб-сайта «Они определяли моду» : при наведении мыши без наведения мыши, в спокойном состоянии © Николаева Вера Александровна, 2010
Чтобы создать ролловер надо записать дополнительные атрибуты в тег <img src>: <img id="der" src="collage 2_1. jpg" align="center" alt="Вход" onmouseover="document. all('der'). src='collage 2_1. jpg' " onmouseout="document. all('der'). src='collage 2. jpg' " alt="Вход" align="center" style='' width="612" height="343" border="0"> Где имя id="der" – может быть любым, не забудьте это имя записать в значениях атрибутов onmouseover и onmouseout: document. all('der') атрибуты onmouseover и onmouseout читаются так "при наведении мыши" (over) и "при снятии наведения мыши" (out), значит в их атрибутах src надо прописать имена этих двух картинок, одна из которых замещает другую: src='collage 2_1. jpg' и src='collage 2. jpg' Альтернативные тексты - одинаковые и зависят от самих картинок. Если ролловеров на одной веб-странице должно быть несколько, то их имена id должны быть разными! Например, id="der 1" и id="der 2" и т. д. или id="vera" и id="maksim" и т. д. © Николаева Вера Александровна, 2010
Задание по созданию ролловеров 1. Откройте web-страницу mosts. htm папки spb и запишите в тетрадь имена файлов и размеры 3 -х картинок на этой странице. 2. В папке big подберите картинки-двойники, которые будут ролловерами. Измените в Adobe Photoshop их размеры так, чтобы они соответствовали размерам существующих на web-странице картинок (см. п. 1) и сохраните их в папке spb. 3. Измените код web-страницы mosts. htm для создания ролловеров. 4. Проверьте работу ролловеров на web-странице mosts. htm в браузере. © Николаева Вера Александровна, 2010
Создание слайд-шоу 1 Этап. Внутри тега <head> … </head> запишите javascript-текст для создания слайд шоу: <SCRIPT LANGUAGE="Java. Script"> num=1 img 1 = new Image () img 1. src = "sv 1. jpg" img 2 = new Image () img 2. src = "sv 2. jpg" img 3 = new Image () img 3. src = "sv 3. jpg" img 4 = new Image () img 4. src = "sv 4. jpg" img 5 = new Image () img 5. src = "sv 5. jpg" img 6 = new Image () img 6. src = "sv 6. jpg" function slideshow() { num=num+1 if (num==7) {num=1} document. katjusha. src=eval("img"+num+". src") } </SCRIPT> © Николаева Вера Александровна, 2010 -2011 Имена файлов sv 1. jpg – sv 6. jpg замените на свои. Пар строк img 1 = new Image () img 1. src = "sv 1. jpg " Должно быть столько же, сколько картинок участвует в слайд-шоу. В строке if (num==7) Число номеров (в данном случае 7) должно быть на 1 больше, чем количество картинок, участвующих в слайд-шоу. В строке document. katjusha. src=eval("img"+num+". src") название слайд-шоу katjusha замените на свое название.
Создание слайд-шоу 2 Этап. Внутри тега <body> … </body> запишите javascript-текст для создания слайд шоу: NAME="katjusha" – название слайд-шоу <p align="center" ><img border="0" src="sv 1. jpg" NAME="katjusha" width="380" height="420"></p> <p align="center"><a href="Java. Script: slideshow()"><img border="0" src="sv 7. jpg" width="100" height="32"></a> <a href="Java. Script: slideshow()"> открывающий тег гиперссылки для объекта (кнопка или текст), который «листает» слад-шоу Если в роли «листалки» выступает текст (например, Слайд-шоу), то javascript-текст для создания слайд шоу имеет вид: <p align="center" ><img border="0" src="sv 1. jpg" NAME="katjusha" width="380" height="420"></p> <p align="center"><a href="Java. Script: slideshow()">Слайд-шоу</a> © Николаева Вера Александровна, 2010 - 2011
Задание по созданию слайд-шоу Файлы для слайд шоу брать в папке teach_gr: for-studentsweb-designspb-slideshow-javascript 1. Выбрать 7 фоток 2. Узнать размер любой фотки на веб-странице hermit. htm - той, которая будет начальной для слайд-шоу. 3. Изменять размеры выбранных для слайд-шоу фоток и сохранять их в папке nikva: r 21ivanovaspb (можно под теми же именами, можно и под другими именами, например, slide 1. jpg) 4. Сжать фотки в Adobe Photoshop (File, Save for Web) 5. Сделать слайд-шоу на странице hermit. htm под выбранной фоткой, для ссылки сделать отдельный абзац под фоткой с текстом, например, Залы Эрмитажа или Слайд-шоу. © Николаева Вера Александровна, 2010 - 2011
Создание бегущей строки в строке состояния браузера Для этого запишите в самой последней строке тега <head> такой текст: <script language="Java. Script"> <!-- hide var scrtxt = "Нужный вам текст" ; var length = scrtxt. length; var width = 100; var pos = -(width + 2); function scroll() { pos++; var scroller = ""; if (pos == length) { pos = -(width + 2); } if (pos < 0) { for (var i = 1; i <= Math. abs(pos); i++) { scroller = scroller+" "; } scroller = scroller + scrtxt. substring(0, width - i + 1); } else { scroller = scroller + scrtxt. substring(pos, width + pos); } window. status = scroller; set. Timeout("scroll()", 100); } // --> </script> © Николаева Вера Александровна, 2010 Параметры бегущей строки можно менять (например, жирность шрифта или скорость «бега» ).
Эффект «салют» на web-странице Для создания салюта на web-странице скопируйте Java Script-код из файла salut. htm в начало тега <body> вашей web-страницы. Задание Создайте эффект «салют» на странице index. htm сайта spb. Эффект «неоновая реклама» на webстранице Для создания текста с «бегущим» цветом шрифта на web-странице скопируйте Java Script-код из файла neon-reklama. htm в начало тега <body> вашей web-страницы. Задание Создайте эффект «салют» на странице isaak-sobor. htm сайта spb. © Николаева Вера Александровна, 2010
Смена 3 -х рисунков при перемещении курсора мыши над картинкой Для создания эффекта подготовьте 4 картинки с одинаковыми геометрическими размерами картинке petropav. jpg (196 х 265) и именами файлов m 1. jpg, m 2. jpg, m 3. jpg, m 4. jpg, для этого используйте исходники из папки big. На web-странице скопируйте Java Script-код с этого слайда в тег <body> вашей web-страницы. Задание Замените файл petropav. jpg в коде web-страницы history. htm на файл m 1. jpg. Создайте эффект смены 3 -х картинок на странице history. htm сайта spb. <script> k=l function pict() { if (k <3) k=k+l else k=l document. mypict. src="m"+k+". jpg"} </script> <img src="ml. jpg" name=mypict width=196 on. Mouse. Over="pict()"> © Чмига Марина Афанасьевна, 2010
Смена 4 -х рисунков при перемещении курсора мыши над картинкой Задание Измените скрипт так, число меняющихся картинок увеличилось до 4 -х. Увеличение в 2 раза изображения при наведении курсора мыши <script> k=100 function pict 1() { if (k<200) k=k+10 document. mypict 1. width=k set. Timeout("pict 1()", 500) /* увеличение происходит каждые 500 мсек на 10 пикселей*/}</script> <img src="m 1. jpg" name=mypict 1 width=200 on. Mouse. Over="pict 1 ()"> © Чмига Марина Афанасьевна, 2010
Постепенное появление (revealtrans) изображения при загрузке страницы <img id=r 1 src="m 1. jpg" style="visibility=hidden; filter: revealtrans(duration=5, transition=22)" > /* visibility=hidden означает, что изображение при загрузке страницы невидимо, duration - время проявления изображения, transition - один из 24 вариантов (от 0 до 23) преобразования изображения*/ <script> r 1. filters("revealtrans"). apply() г 1. style. visibility="visible" r 1. filters("revealtrans"). play() </script> Задание Посмотрите разные варианты преобразования изображения. © Чмига Марина Афанасьевна, 2010
Трансформация одного объекта в другой (blendtrans) <img id=r 3 src="m 3. jpg" style="filter: blendtrans(duration=5)" > <script> function window. onload(){ r 3. filters("blendtrans"). apply() r 3. src="m 2. jpg" r 3. filters("blendtrans"). play() } </script> © Чмига Марина Афанасьевна, 2010
Трансформация одного объекта в другой с возможностью выбора вида преобразования в параметре transition <img id=r 2 src="m 2. jpg" style="filter: revealtrans(duration=5, transition=5)" > <script> function window. onload(){ r 2. filters("revealtrans"). apply() r 2. src="m 3. jpg" r 2. filters("revealtrans"). play() } </script> © Чмига Марина Афанасьевна, 2010
Создание эффекта направленного света <img id=r 4 src="m 4. jpg" style-'filter: light" > <script> function window. onload(){ r 4. filters. light. add. Cone(5, 5, 0, 600, 500, 13, 12, 3, 48, 90) /*в методе add. Cone последовательно указываются: координата х источника света, координата у источника света, номер слоя - 0, яркость красной составляющей света (0 -255), яркость зеленой составляющей света, яркость синей составляющей света, интенсивность источника света (0 -255), угол конуса света (0 -360) */ } </script> © Чмига Марина Афанасьевна, 2010
Создание динамических эффектов текста. Всплывающий текст <script> function t_show(){ text. inner. Text="(Цифровая подпись - это шифрованная электронная подпись, подтверждающая подлинность документа)" }; function move(){ text. inner. Text=""; }; </script> <р>Чтобы добавить <а href='javascript: t_show()'>цифровую подпись</а> <span id ='text' name='text' style='color: green' onclick=move(); ></span> к документам, передаваемым с вашего компьютера, щелкните здесь для загрузки и установки цифрового сертификата. </р> © Чмига Марина Афанасьевна, 2010
Создание динамических эффектов текста. Изменение цвета при наведении курсора на текст <h 2 onmouseout="this. style. color='5634 ea'" onmouseover="this. style. color= '78 dfea'">Изменение цвета</h 2> © Чмига Марина Афанасьевна, 2010
Создание текста c различными эффектами Эффект ТЕНЬ <div style="font-size: 24; color: green; width: 80; height: 30; filter: shadow(color='blue‘, direction=100) ; " > Тень </div> Атрибуты фильтра: direction - угол наклона, который может быть, как положительным, так и отрицательным. Эффект ОБЪЕМ <div style="font-size: 24; color: green; width: 80; height: 30; filter: dropshadow(color='#f 78 fff', offx=3, offy=-3")> Объем </div> Атрибуты фильтра: offx, offу – смещение по горизонтали и вертикали, значения могут быть, как положительными, так и отрицательными. © Чмига Марина Афанасьевна, 2010
Создание текста c различными эффектами Эффект СВЕЧЕНИЕ <div style="font-size: 44; color: red; width: 100; height: 45; filter: glow(color='#0 f 0 fd 0', strength=3); "> Свечение </div> Атрибуты фильтра: strength – ширина света в пикселях. Эффект ЗАЛИВКА <div style="font-size: 44; color: red; width: 120; height: 45; filter: mask(color='#0 dfa 00'); "> Заливка прозрачных областей </div> © Чмига Марина Афанасьевна, 2010
Создание текста c различными эффектами Эффект РАЗМЫТИЕ <div style="font-size: 40; color: pink; width: 100; height: 42; filter: blur(add=1, direction=-120, strength=10); "> Размытие </div> Атрибуты фильтра: add=1 добавление исходного текста в фильтр add=0 в фильтре нет исходного текста © Чмига Марина Афанасьевна, 2010
Создание текста c различными эффектами Эффект ЗЕРКАЛО <div style="font-size: 24; color: '#123456'; width: 100; height: 25"> Зеркалo</div> <div style="font-size: 24; color: '#654321'; width: 100; height: 25; filter: flipv(); "> 3 epкало </div> Атрибуты фильтра: flipv() - отражение по вертикали fliph() - отражение по горизонтали © Чмига Марина Афанасьевна, 2010
