Кнопка, меняющая цвет при наведении курсора
<spoiler>
Посмотреть
Код:
<html>
<head>
<title>Кнопка, меняющая цвет при наведении курсор</title>
<style type="text/css">
.bigChange {color:#006600; font-weight:bolder; font-size:175%; letter-spacing:4px; text-transform: uppercase; background:yellow}
.start {color:yellow; background:#006600; bolder: Lime; }
</STYLE>
</head>
<body>
<SCRIPT LANGUAGE=JAVASCRIPT>
function highlightButton(s) {
if ("INPUT"==event.srcElement.tagName)
event.srcElement.className=s
}
</SCRIPT>
<FORM NAME=highlight onmouseover="highlightButton('start')" onmouseout="highlightButton('')">
<input type="button" value="Button 1" style="border-color: #ffff00;">
<input type="button" value="Button 2" style="border-color: #ffff00;">
</FORM>
</body>
</html><endspoiler>
Кнопка, меняющая фон при наведении курсора
<spoiler>
Посмотреть
Код:
<html>
<head>
<title>Кнопка, меняющая фон при наведении курсора</title>
</head>
<body>
<script>
<!--
function change2(image){
var el=event.srcElement
if (el.tagName=="INPUT"&&el.type=="button")
event.srcElement.style.backgroundImage="url"+"('"+image+"')"
}
function jumpto2(url){
window.location='../index.shtml'
}
//-->
</script>
<form onMouseover="change2('http://superscripts.narod.ru/buttons/bg-g.gif')" onMouseout="change2('http://superscripts.narod.ru/buttons/bg-b.gif')">
<input type="button" value=" 1 " class="initial" onClick="jumpto2('http://scripts.mybb.ru')" style="background:url(http://superscripts.narod.ru/buttons/bg-b.gif);border-color: #000000;">
<input type="button" value=" 2 " class="initial" onClick="jumpto2('http://scripts.mybb.ru')" style="background:url(http://superscripts.narod.ru/buttons/bg-b.gif);border-color: #000000;">
<input type="button" value=" 3 " class="initial" onClick="jumpto2('http://scripts.mybb.ru')" style="background:url(http://superscripts.narod.ru/buttons/bg-b.gif);border-color: #000000;">
</form>
</body>
</html><endspoiler>
Кнопка, проявляющаяся при наведении курсора
<spoiler>
Посмотреть
Код:
<html>
<head>
<title>Кнопка, проявляющаяся при наведении курсора.</title>
<script language="JavaScript1.2">
function makevisible(cur,which){
if (which==0){
cur.filters.alpha.opacity=100
}else{
cur.filters.alpha.opacity=50}
}
</script>
</head>
<body>
<img style="filter:alpha(opacity=50)" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" src="http://superscripts.narod.ru/buttons/img2.gif" border="0"><br>
<img style="filter:alpha(opacity=50)" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" src="http://superscripts.narod.ru/buttons/img2.gif" border="0"><br>
<img style="filter:alpha(opacity=50)" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" src="http://superscripts.narod.ru/buttons/img2.gif" border="0"><br>
</body>
</html>Посмотреть
<endspoiler>
Кнопка, плавно появляющаяся при наведении курсора
<spoiler>
Код:
<html>
<head>
<title>Кнопка, плавно появляющаяся при наведении курсора.</title>
</head>
<body>
<script language="JavaScript1.2">
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=20
}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=5
else if (window.highlighting)
clearInterval(highlighting)
}
</script>
<a href="http://scripts.mybb.ru"><img src="http://superscripts.narod.ru/buttons/img2.gif" border="0" style="filter:alpha(opacity=50)" onMouseover="high(this)" onMouseout="low(this)"></a>
<a href="http://scripts.mybb.ru"><img src="http://superscripts.narod.ru/buttons/img2.gif" border="0" style="filter:alpha(opacity=50)" onMouseover="high(this)" onMouseout="low(this)"></a>
<a href="http://scripts.mybb.ru"><img src="http://superscripts.narod.ru/buttons/img2.gif" border="0" style="filter:alpha(opacity=50)" onMouseover="high(this)" onMouseout="low(this)"></a><br>
</body>
</html><endspoiler>
Кнопка, появляющаяся при наведении курсора на ссылку
<spoiler>
Посмотреть
Код:
<html>
<head>
<title>Кнопка, появляющаяся при наведении курсора на ссылку.</title>
<style type="text/css">
.lmNormal{ BACKGROUND-COLOR:transparent; BORDER-BOTTOM:medium none; BORDER-LEFT:medium none; BORDER-RIGHT:medium none; BORDER-TOP:medium none; MARGIN-BOTTOM:2px; MARGIN-LEFT:1px; MARGIN-TOP:1px; PADDING-BOTTOM:4px; PADDING-LEFT:6px; PADDING-TOP:2px}
.lmMouseover{ BACKGROUND-COLOR:#009900; BORDER-BOTTOM:#006600 solid thin; BORDER-LEFT:#00ff99 solid thin; BORDER-RIGHT:#006600 solid thin; BORDER-TOP:#00ff99 solid thin; MARGIN-BOTTOM:2px; MARGIN-LEFT:1px; MARGIN-TOP:1px; PADDING-BOTTOM:2px; PADDING-LEFT:4px}
.lmClick{ BACKGROUND-COLOR:#009900; BORDER-BOTTOM:#00ff99 solid thin; BORDER-LEFT:#006600 solid thin; BORDER-RIGHT:#00ff99 solid thin; BORDER-TOP:#006600 solid thin; COLOR:#ffffcc; FONT-SIZE:100%; MARGIN-LEFT:1px; MARGIN-BOTTOM:2px; MARGIN-TOP:1px; PADDING-BOTTOM:2px; PADDING-LEFT:4px}
</style>
</head>
<body>
<div class=lmNormal style='font-weight:normal; cursor:hand; width:110; height:20' onClick=location.href='http://scripts.mybb.ru' onMouseDown="this.className='lmClick'" onMouseUp="this.className='lmMouseOver'" onMouseOver="this.className='lmMouseOver'" onMouseOut="this.className='lmNormal'"><A HREF="http://scripts.mybb.ru/">На главную</A></div>
<div class=lmNormal style='font-weight:normal; cursor:hand; width:110; height:20'onMouseDown=this.className='lmClick' onMouseUp=this.className='lmMouseOver' onMouseOver=this.className='lmMouseOver' onMouseOut=this.className='lmNormal' onClick=location.href='http://scripts.mybb.ru'><A HREF="http://scripts.mybb.ru">JavaScript</A></div>
</body>
</html><endspoiler>
Кнопка с меняющимся текстом и ссылками
<spoiler>
Посмотреть
Код:
<html>
<head>
<title>Кнопка с меняющимся текстом и ссылками.</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
var timerID = null
var timerRunning = false
var lineNo = 0
var lineMax = 4
var lineArr = new Array(lineMax)
var urlArr = new Array(lineMax)
lineArr[1] = "JAVA Script"
urlArr[1] = "http://scripts.mybb.ru/"
lineArr[2] = "scripts.mybb.ru"
urlArr[2] = "http://scripts.mybb.ru/"
lineArr[3] = "Посетите нас!"
urlArr[3] = "http://scripts.mybb.ru/"
lineArr[4] = "Скрипты!"
urlArr[4] = "http://scripts.mybb.ru/"
var lineText = lineArr[1]
function StartShow() {
StopShow()
ShowLine()
timerRunning = true
}
function StopShow() {
if (timerRunning) {
clearTimeout(timerID)
timerRunning = false
}
}
function ShowLine() {
if (lineNo < lineMax) {
lineNo++
}
else {
lineNo = 1
}
lineText = lineArr[lineNo]
document.formDisplay.buttonFace.value = lineText
timerID = setTimeout("ShowLine()", 2000)
}
function GotoUrl(url)
{
top.location.href ='../index.shtml'
}
// end hide -->
</SCRIPT>
</head>
<body onLoad="StartShow()" onUnload="StopShow()">
<FORM name="formDisplay">
<INPUT TYPE="button" NAME="buttonFace" VALUE="&{lineText};" onClick="GotoUrl(urlArr[lineNo])" style="color: #00ff99; background-color: #000000; border-color: #00cc00;"></INPUT>
</FORM>
</body>
</html><endspoiler>
Кнопка, плавно меняющая цвет при наведении курсора
<spoiler>
Посмотреть
Код:
<html>
<head>
<title>Кнопка, плавно меняющая цвет при наведении курсора</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
hexColor = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
function mOver() {
for (i = 0; i < 13; i++) {
setTimeout('document.myForm.button.style.background = "#'+hexColor[12-i]+'0'+hexColor[12-i]+'0c0";', i * 40);
}
}
function mOut() {
document.myForm.button.value = " Нажми! ";
for (i = 0; i < 12; i++) {
setTimeout('document.myForm.button.style.background = "#'+hexColor[i]+'0'+hexColor[i]+'0c0";', i * 40);
}
}
// End -->
</script>
<form name=myForm>
<input type=button name=button value=" Нажми! " onMouseOver='mOver()'' onMouseDown='document.myForm.button.value="Спасибо!"' onClick='window.location="http://scripts.mybb.ru"' onMouseOut='mOut()'>
</form>
</body>
</html><endspoiler>
Кнопка меняет текст после клика
<spoiler>
Посмотреть
Код:
<html> <head> <title>Кнопка, меняет текст после клика.</title> </head> <body> <FORM> <input type="button" value="Кликни" onclick="this.value='Скрипт сработал'"> </FORM> </body> </html>
<endspoiler>
Кнопка с мигающим текстом
<spoiler>
Посмотреть
Код:
<html>
<head>
<title>Кнопка с текстом постоянно меняющим цвет.</title>
<script>
function h(color)
{
hn = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A" ,"B", "C", "D", "E", "F")
if(color<0){return "00"}
else if(color>255){
return "FF"
}
else {
s = "" + hn[Math.floor(color/16)] + hn[color%16]
return s
}
}
function toH(red, green, blue){
return h(red) + h(green) + h(blue)
}
function RGB(red, green, blue){
return toH(red, green, blue)
}
var sR = 5
var sG = 256
var sB = 56
var R = 5
var G = 256
var B = 256
var b = true;
function setButtonColor(r, g, b) {
document.all["button"].style.color=RGB(r, g, b);
}
function startChanging(){
if(b==true) {
if((R>256)||(G>256)||(B>256)) {
b=false;
}
R+=sR;G+=sG;B+=sB;
}
else {
if((R<0)||(G<0)||(B<0)) {
b=true;
}
R-=sR; G-=sG; B-=sB
}
setButtonColor(R, G, B);
setTimeout("startChanging()", 3)
}
</script>
</head>
<body onload="startChanging()">
<button style="background-color:#ffff33; font: 8pt Fixedsys;" id="button"><p>Кнопка с цветным текстом</p></button>
</body>
</html><endspoiler>
Смена кнопки при наведении с одного имиджа на другой
<spoiler>
Посмотреть
Код:
<html> <head> <title>Смена кнопки при наведении с одного имиджа на другой</title> </head> <body> <a href="http://scripts.mybb.ru" onmouseout="document.mypic.src='http://superscripts.narod.ru/buttons/img1.gif'" onmouseover="document.mypic.src='http://superscripts.narod.ru/buttons/img2.gif'"><IMG border="0" name="mypic" src="http://superscripts.narod.ru/buttons/img1.gif"></a><br> </body> </html>
<endspoiler>