| Главная » Статьи » Публикации |
Теперь, когда создание своего сайта в Интернете с появлением многочисленных редакторов становится все проще, для того, чтобы как-то выделиться, каждый стремится насытить свое произведение разными примочками, будь то неординарная графика или изысканная анимация. Реализации этих задач способствуют существующие в сети библиотеки скриптов, среди которых можно найти и те, что помогут вам осуществить свои задумки, например, такие, как ФОНОВАЯ МУЗЫКА
Один из способов привлечения внимания – это сопровождение просмотра вашей страницы фоновой музыкой. Тем более, что осуществить это очень просто. Для этого надо залезть в каком-нибудь текстовом редакторе (например, редакторе Norton Commander) в свой htm-файл и после тэга <HEAD> вставить следующий текст <script> <!-- var sound1="название первого музыкального файла" var sound2="название второго музыкального файла" var sound3="название третьего музыкального файла" var x=Math.random()*10 if (x<=3) x=sound1 else if (x<=6) x=sound2 else x=sound3 if (navigator.appName=="Microsoft Internet Explorer") document.write('<bgsound src='+'"'+x+'"'+' loop="infinite">') else document.write('<embed src='+'"'+x+'"'+'hidden="true" border="0" width="20" height="20" autostart="true" loop="true">') //--> </script> Не забудьте указать названия своих музыкальных фалов и, естественно, загрузить их в ту же директорию. При каждой очередной загрузке страницы музыкальное сопровождение будет меняться. СКРЫТОЕ МЕНЮ
Иногда бывает необходимо разместить на своей странице целый ряд ссылок. Очень эффектно в этом случае выглядит скрытое меню, появляющееся при наведении на него мышкой. Каждой строчке такого меню соответсвует своя ссылка и, что особенно ценно, текст может быть русским. Для этого необходимо после тэга <HEAD> вставить код: <style> <!-- #slidemenubar, #slidemenubar2{ position:absolute; left:-155px; {на эту величину в пикселах меню скрыто, можно изменять, должно быть на 5 единиц меньше ширины меню} width:160px; {ширина меню в пикселах, можно изменять} top:170px; {расположение меню относительно верхней границы экрана} border:1.5px solid green; {цвет внешней окантовки, можно изменить} background-color:lightyellow; {цвет фона меню можно изменить} layer-background-color:lightyellow; {цвет границы меню можно изменить} font:bold 12px Verdana; {информация о шрифте меню} line-height:20px; {расстояние между линиями} } --> </style> А сразу после тэга <BODY> этот скрипт: <script language="JavaScript1.2"> if (document.all) document.write('<div id="slidemenubar2" style="left:-150" onMouseover="pull()" {если вы изменили ширину меню, величину того, насколько оно спрятано, то придется на столько же изменить и выделенную жирным шрифтом цифру} onMouseout="draw()">') </script> <layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()"> <script language="JavaScript1.2"> var sitems=new Array() var sitemlinks=new Array() //этот список можно расширить или сократить sitems[0]="Здесь вы пишете называние своей ссылки" sitems[1]=" Здесь вы пишете называние своей ссылки" sitems[2]=" Здесь вы пишете называние своей ссылки" sitems[3]=" Здесь вы пишете называние своей ссылки" sitems[4]=" Здесь вы пишете называние своей ссылки" sitems[5]=" Здесь вы пишете называние своей ссылки" sitems[6]=" Здесь вы пишете называние своей ссылки" sitems[7]=" Здесь вы пишете называние своей ссылки" sitems[8]=" Здесь вы пишете называние своей ссылки" sitems[9]=" Здесь вы пишете называние своей ссылки" sitems[10]=" Здесь вы пишете называние своей ссылки" sitems[11]=" Здесь вы пишете называние своей ссылки" sitems[12]=" Здесь вы пишете называние своей ссылки" sitemlinks[0]="Здесь вы пишете ссылку, соответствующую нулевому пункту" sitemlinks[1]="Здесь вы пишете ссылку, соответствующую первому пункту" sitemlinks[2]="Здесь вы пишете ссылку, соответствующую второму пункту" sitemlinks[3]="Здесь вы пишете ссылку, соответствующую третьему пункту" sitemlinks[4]="Здесь вы пишете ссылку, соответствующую четвертому пункту" sitemlinks[5]="Здесь вы пишете ссылку, соответствующую пятому пункту" sitemlinks[6]="Здесь вы пишете ссылку, соответствующую шестому пункту" sitemlinks[7]="Здесь вы пишете ссылку, соответствующую седьмому пункту" sitemlinks[8]="Здесь вы пишете ссылку, соответствующую восьмому пункту" sitemlinks[9]="Здесь вы пишете ссылку, соответствующую девятому пункту" sitemlinks[10]="Здесь вы пишете ссылку, соответствующую десятому пункту" sitemlinks[11]="Здесь вы пишете ссылку, соответствующую одиннадцатому пункту" sitemlinks[12]="Здесь вы пишете ссылку, соответствующую десятому пункту" for (i=0;i<=sitems.length-1;i++) document.write('<a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>') </script> </layer> <script language="JavaScript1.2"> function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers) setTimeout("window.onresize=regenerate",400) } window.onload=regenerate2 if (document.all){ document.write('</div>') themenu=document.all.slidemenubar2.style rightboundary=0 leftboundary=-150 {это значение тоже нужно привести в соответствие с шириной меню, в противном случае, вы не сможете открыть его целиком} } else{ themenu=document.layers.slidemenubar rightboundary=150 {это значение тоже нужно привести в соответствие с шириной меню, в противном случае, вы не сможете открыть его целиком} leftboundary=10 } function pull(){ if (window.drawit) clearInterval(drawit) pullit=setInterval("pullengine()",50) } function draw(){ clearInterval(pullit) drawit=setInterval("drawengine()",50) } function pullengine(){ if (document.all&&themenu.pixelLeft<rightboundary) themenu.pixelLeft+=5 else if(document.layers&&themenu.left<rightboundary) themenu.left+=5 else if (window.pullit) clearInterval(pullit) } function drawengine(){ if (document.all&&themenu.pixelLeft>leftboundary) themenu.pixelLeft-=5 else if(document.layers&&themenu.left>leftboundary) themenu.left-=5 else if (window.drawit) clearInterval(drawit) } </script> Теперь достаточно вставить свои значения по тем пунктам, которые я расписала выше в скрипте, оставить требуемое количество строчек или вставить дополнительные, и у вас будет отличное меню. СЛАЙД ШОУЕсли вы хотите расположить на одной странице несколько картинок, то можно демонстрировать их в режиме слайдшоу. Для этого, во-первых, необходимо привести их к единому «знаменателю», т.е. ваши изображения должны иметь одинаковые размеры в ширину и в длину, иначе они будут растягиваться или сжиматься. Кроме того, имейте в виду, что изображения не должны быть слишком объемными, чтобы страница не подвисала. Во-вторых, после тэга <HEAD> требуется вставить следующий код: <script language="JavaScript1.2"> function reapply(){ setTimeout("slideit()",2000) return true } window.onerror=reapply </script> <script language="JavaScript1.1"> <!-- var image1=new Image() image1.src="название вашего первого изображения" var image2=new Image() image2.src="название вашего второго изображения" var image3=new Image() image3.src="название вашего третьего изображения" //--> </script> и указать в нем названия своих изображений. В=третьих, после тэга <BODY> в то место, где вы предполагаете расположить свои слайды, вставьте следующий скрипт: <a href="javascript:slidelink()" onMouseover="window.status='Click on the image to learn more about it!';return true" onMouseout="window.status=''"> <img src="название одного из ваших изображений, по размерам которого будет определены размеры слайдов" name="slide" border=0 style="filter:blendTrans(duration=3)"></a> <script> <!-- ////можно изменять количество картинок, но тогда надо добавить названия этих изображений и в предыдущий код var number_of_images=3 //можно изменить скорость смены картинок (в секундах) var speed=3 var step=1 var whichimage=1 function slideit(){ if (!document.images) return if (document.all) slide.filters.blendTrans.apply() document.images.slide.src=eval("image"+step+".src") if (document.all) slide.filters.blendTrans.play() whichimage=step if (step<number_of_images) step++ else step=1 if (document.all) setTimeout("slideit()",speed*1000+3000) else setTimeout("slideit()",speed*1000) } function slidelink(){ if (whichimage==1) window.location="link1.htm" else if (whichimage==2) window.location="link2.htm" else if (whichimage==3) window.location="link3.htm" } //--> </script> Как все это работает, вы можете посмотреть по адресу: http://aprilclub.bizland.com/demo.htm. Только не забудьте удалить выделенный курсивом текст. Надеюсь, эти советы помогут вам сделать ваш сайт более привлекательным. | |
| Просмотров: 962 | |
| Всего комментариев: 0 | |