Простая анимированная кнопка для сайта вебмастера
Простая анимированная кнопка
Иногда бывает необходимость периодически менять надпись на кнопке с одновременным изменением адреса перехода при нажатии на такую кнопку.
По этой ссылке Вы можете посмотреть, как выглядит и работает такая кнопка: http://enigma.nanoquant.ru/demo-script/button/demo-button2.html.
Если Вы хотите установить такие кнопки себе на свой сайт, то здесь находится инструкция по установке и коды, которые нужно скопировать на свой сайт.
Этот код нужно вставить вставьте между тегами head на той Вашей веб-странице, где будет находится кнопка. Синим цветом выделено то, что можно и/или нужно изменить. (См. пояснения под кодом.)
|
<script language="JavaScript"> var timerID = null var timerRunning = false var charNo = 0 var charMax = 0 var lineNo = 0 var lineMax = 3 var lineArr = new Array(lineMax) var urlArr = new Array(lineMax) lineArr[1] = "GOOGLE" urlArr[1] = "http://google.ru" lineArr[2] = "ЯНДЕКС" urlArr[2] = "http://yandex.ru" lineArr[3] = "Вконтакте" urlArr[3] = "http://vk.com" var lineText = lineArr[1] function StartShow() { StopShow() ShowLine() timerRunning = true } document.writeln(""); function FillSpaces() { for (var i = 1; i <= lineWidth; i++) { spaces += " " } } function StopShow() { if (timerRunning) { clearTimeout(timerID) timerRunning = false } } function ShowLine() { if (charNo == 0) { // Next line if (lineNo < lineMax) { lineNo++ } else { lineNo = 1 } lineText = lineArr[lineNo] charMax = lineText.length } if (charNo <= charMax) { // Next char document.formDisplay. buttonFace.value = lineText.substring(0, charNo) charNo++ timerID = setTimeout("ShowLine()", 100) } else { charNo = 0 timerID = setTimeout("ShowLine()", 3000) } } function GotoUrl(url) { top.location.href = url } </script> |
Массив lineArr задает набор тех слов и фраз, которые будут периодически меняться на кнопке и порядок смены их. Массив urlArr задает те адреса, по которым будут идти переходы при нажатии на кнопку с соответствующим словом или фразой. Переходы могут идти как на другие страницы Вашего сайта, так и на страницы любых других сайтов. В коде скрипта массивы lineArr и urlArr имеют по три элемента, но Вы при необходимости можете сделать число элементов этих массивов другим.
Переменная lineMax задает количество надписей на кнопке и, соответственно, количество адресов переходов при нажатии на неё. В коде скрипта переменной lineMax присвоено значение три, так как массивы lineArr и urlArr тоже имеют три элемента.
Если переменной lineMax присвоить значение меньшее, чем число элементов массивов lineArr и urlArr, то в цикле на кнопке будут участвовать не все элементы этих массивов, а только первые несколько элементов. Их число и задается значением переменной lineMax. А если переменной lineMax присвоить значение большее, чем число элементов массивов lineArr и urlArr, то цикл остановится после появления на кнопке последней надписи из массива lineArr. А сама кнопка после этого станет нерабочей.
Параметры timerID задают время замены на кнопке надписей из массива lineArr (по умолчанию стоит 100 миллисекунд) и время, в течение которого на кнопке транслируется какая-нибудь очередная надпись из массива lineArr вместе с временем замены надписи (по умолчанию стоит 3000 миллисекунд). Второе число должно быть минимум в 2 раза больше первого, а еще лучше в 10-50 раз больше.
В тег body нужно добавить этот атрибут (выделено красным).
| <body onload="StartShow()"> |
Следующий код нужно вставить между тегами body на той же веб-странице в то самое место, в котором Вы хотите, чтобы находилась кнопка.
Разумеется тегам input можно присвоить любые нужные Вам стили, и, вообще, можно отформатировать эту кнопку так, как Вы сами считаете нужным.
|
<FORM NAME="formDisplay"> <INPUT TYPE="BUTTON" NAME="buttonFace" VALUE="lineText" SIZE="18" onClick="GotoUrl(urlArr[lineNo])"> </FORM> |
Внимание! Если эти коды копируются из Вашего браузера в Вашу веб-страницу неправильно, то нужно их сначала скопировать в какой-нибудь самый простой текстовый редактор, например, в Блокнот. А уже потом оттуда их скопировать на свою веб-страницу.
На одной вебстранице может работать только одна такая кнопка.
с вложениями денег:
без вложений денег:
для тех у кого нет сайта
заработки на сайте
с учебниками
Скорее КинжЛог!
Microsoft Word вер.10