webmaster - skrypty - TŁO

SKRYPTY EFEKTY TŁA

//-->
</script>

Mouse Over:<br>
<a href="#" onMouseOver="javascript:changeBG(0)">Change - Red</a><br>
<a href="#" onMouseOver="javascript:changeBG(1)">Change - Green</a><br>
<a href="#" onMouseOver="javascript:changeBG(2)">Change - Blue</a><br>
<a href="#" onMouseOver="javascript:changeBG(3)">Change - White</a><br>

<br>
Mouse Click:<br>
<a href="javascript:changeBG(0)">Change - Red</a><br>
<a href="javascript:changeBG(1)">Change - Green</a><br>
<a href="javascript:changeBG(2)">Change - Blue</a><br>
<a href="javascript:changeBG(3)">Change - No White</a><br>

Zmiany tła w postaci kolorów za pomocą odnośników, można zmienić tło poprzez kliknięcie bądź najechanie kursorem na link.

<html>
<head>
</head>
<body onload=page_reset()>
<script>
//javascript written by ers
function page_reset() {
document.chart_lbls.cur_col.value = "#FFFFFF";
ClearCombo();
}

function Mod(pNum1, pNum2) { return pNum1-Math.floor(pNum1/pNum2)*pNum2 }

function rgb_get_chars(pNumber)
//fed 0 to 255, returns 2 char string, ers
{
var pos1_num = Math.floor(pNumber/16)
var pos1_char = rgb_get_char(pos1_num);
var pos2_num = Mod(pNumber,16);
var pos2_char = rgb_get_char(pos2_num);
var result = pos1_char+pos2_char;
return result;
}
function rgb_get_char(pNumber)
//fed 0 to 16, returns 1 char string ers
{
var hex= new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
result = hex[pNumber]
return result;
}

function rgb_main(pired_num, pigreen_num, piblue_num) {
var result = "";
result = rgb_get_chars(pired_num);
result = result + rgb_get_chars(pigreen_num);
result = result + rgb_get_chars(piblue_num);
return result;
}

function chng_bg(pscolor) {
var sbg_color = "#"+pscolor;
document.bgColor = sbg_color;
document.chart_lbls.cur_col.value = sbg_color;
}

function last_3(pstring) {
if (pstring.length < 3) {pstring="   "+pstring;}
var ilength=pstring.length;
var result = pstring.substring(ilength-3,ilength);
return result;
}

///////////////////////////////////////////////////////////////////
//start combo boxes
///////////////////////////////////////////////////////////////////
//remark - note that cbo_onchange is not automatically called by prev/next buttons
//cbo box scripts by eric sprague
//-----------------------------------------------------------------
red_cur = 255;
green_cur = 255;
blue_cur = 255;
bkeep_bg = false;
//-----------------------------------------------------------------
function next(pcolor) {
if (pcolor=='red') {
if (red_cur+1 <= 255) {
document.chart_lbls.red_combo.selectedIndex = ++red_cur;
   }
} //end red if
else if (pcolor=='green') {
if (green_cur+1 <= 255) {
document.chart_lbls.green_combo.selectedIndex = ++green_cur;
   }
} //end green if
else if (pcolor=='blue') {
if (blue_cur+1 <= 255) {
document.chart_lbls.blue_combo.selectedIndex = ++blue_cur;
   }
} //end blue if
cbo_onchange(pcolor);
} //end funct
//-----------------------------------------------------------------
function previous(pcolor) {
if (pcolor=='red') {
if (red_cur-1 >= 0) {
document.chart_lbls.red_combo.selectedIndex = --red_cur;
   }
} //end red if
if (pcolor=='green') {
if (green_cur-1 >= 0) {
document.chart_lbls.green_combo.selectedIndex = --green_cur;
   }
} //end green if
if (pcolor=='blue') {
if (blue_cur-1 >= 0) {
document.chart_lbls.blue_combo.selectedIndex = --blue_cur;
   }
} //end blue if
cbo_onchange(pcolor);
} //end funct
//-----------------------------------------------------------------
function cbo_onchange(pcolor) {
if (pcolor=='red') {
red_cur = document.chart_lbls.red_combo.selectedIndex;
} //end red
else if (pcolor=='green') {
green_cur = document.chart_lbls.green_combo.selectedIndex;
} //end green
else if (pcolor=='blue') {
blue_cur = document.chart_lbls.blue_combo.selectedIndex;
} //end blue
//now change the 6 char code if necessary
sbg_color = rgb_main(red_cur, green_cur, blue_cur);
//now change the background if necessary
chng_bg(sbg_color);
} //end funct
//-----------------------------------------------------------------
function ClearCombo() {
document.chart_lbls.red_combo.selectedIndex=255;
document.chart_lbls.green_combo.selectedIndex=255;
document.chart_lbls.blue_combo.selectedIndex=255;
}
//-----------------------------------------------------------------
function change_combo(pcolor, pnumber) {
if (pcolor=='red') {
red_cur = pnumber;
document.chart_lbls.red_combo.selectedIndex = red_cur;
} //end red
else if (pcolor=='green') {
green_cur = pnumber;
document.chart_lbls.green_combo.selectedIndex = green_cur;
} //end green
if (pcolor=='blue') {
blue_cur = pnumber;
document.chart_lbls.blue_combo.selectedIndex = blue_cur;
} //end blue
} //end funct
//-----------------------------------------------------------------
function btn_change_combos(pired, pigreen, piblue, pshexchars) {
change_combo('red', pired);
change_combo('green', pigreen);
change_combo('blue', piblue);
chng_bg(pshexchars)
}
//-----------------------------------------------------------------
function next_wrap(pcolor, pireps) {
for (icounter = 1; icounter <= pireps; icounter++)
{next(pcolor);} //end for
} //end funct
//-----------------------------------------------------------------
function prev_wrap(pcolor, pireps) {
for (icounter = 1; icounter <= pireps; icounter++)
{previous(pcolor);} //end for
} //end funct
//-----------------------------------------------------------------
///////////////////////////////////////////////////////////////////
//end combo boxes
///////////////////////////////////////////////////////////////////
</script>

<table width=100% >
<tr>
<td width=1%>
</td>
<td width=98% bgcolor=white align="center">
Click on a red,grn,blu button or change the values in the combo boxes and watch the bkgrnd change.
</td>
<td width=1%>
</td>
</tr>
</table>
<form name="chart_lbls">
<center>
<input type="text" disabled value="#FFFFFF" name="cur_col" 
style="background-color:white" size=8>
<br>
<table border=0 cols=3 width=150 align=center>
<tr>
<td width=10% align=right>
<input type=button value="- 016" style="background-color:red" onClick="prev_wrap('red',16);" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=10% align=right>
<input type=button value="- 001" style="background-color:red" onClick="previous('red');" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=60% align=center>
<select name="red_combo" onChange="cbo_onchange('red');">
<script>
for (icount = 0; icount <= 255; icount++)
{
document.write('<option value='+icount+'>'+icount+'');
}
</script>
</select>
</td>
<td width=10% align=left>
<input type=button value="+ 001" style="background-color:red" onClick="next('red');" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=10% align=left>
<input type=button value="+ 016" style="background-color:red" onClick="next_wrap('red',16);" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
</tr>
</table>

<table border=0 cols=3 width=150 align=center>
<tr>
<td width=10% align=right>
<input type=button value="- 016" style="background-color:green" onClick="prev_wrap('green',16);" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=10% align=right>
<input type=button value="- 001" style="background-color:green" onClick="previous('green');" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=60% align=center>
<select name="green_combo" onChange="cbo_onchange('green');">
<script>
for (icount = 0; icount <= 255; icount++)
{
document.write('<option value='+icount+'>'+icount+'');
}
</script>
</select>
</td>
<td width=10% align=left>
<input type=button value="+ 001" style="background-color:green" onClick="next('green');" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=10% align=left>
<input type=button value="+ 016" style="background-color:green" onClick="next_wrap('green',16);" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
</tr>
</table>

<table border=0 cols=3 width=150 align=center>
<tr>
<td width=10% align=right>
<input type=button value="- 016" style="background-color:#0091FF" onClick="prev_wrap('blue',16);" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=10% align=right>
<input type=button value="- 001" style="background-color:#0091FF" onClick="previous('blue');" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=60% align=center>
<select name="blue_combo" onChange="cbo_onchange('blue');">
<script>
for (icount = 0; icount <= 255; icount++)
{
document.write('<option value='+icount+'>'+icount+'');
}
</script>
</select>
</td>
<td width=10% align=left>
<input type=button value="+ 001" style="background-color:#0091FF" onClick="next('blue');" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=10% align=left>
<input type=button value="+ 016" style="background-color:#0091FF" onClick="next_wrap('blue',16);" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
</tr>
</table>
</center>
</form>
</font>

<font face=arial size=2>
If these 64 color buttons are not enough for you then visit our bigger <a HREF="http://www.evidgames.com/color_chart.html" target="_top">color chart</a> that contains 216 buttons.<br>
</font>

Indywidualna zmiana koloru tła. Zmiany tła wywoływane z tablicy kolorów, RGB lub plus/minus.

<CENTER>
[<a href="/"
onmouseover="document.bgColor='green'">Green</a>]
[<a href="/"
onmouseover="document.bgColor='greem'">Bright Green</a>]
[<a href="/"
onmouseover="document.bgColor='seagreen'">Sea Green</a>]
[<a href="/"
onmouseover="document.bgColor='red'">Red</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='magenta'">Magenta</a>]
[<a href="/"
onmouseover="document.bgColor='fusia'">Fusia</a>]
[<a href="/"
onmouseover="document.bgColor='pink'">Pink</a>]
[<a href="/"
onmouseover="document.bgColor='purple'">Purple</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='navy'">Navy</a>]
[<a href="/"
onmouseover="document.bgColor='blue'">Blue</a>]
[<a href="/"
onmouseover="document.bgColor='royalblue'">Royal Blue</a>]
[<a href="/"
onmouseover="document.bgColor='Skyblue'">Sky Blue</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='yellow'">Yellow</a>]
[<a href="/"
onmouseover="document.bgColor='brown'">Brown</a>]
[<a href="/"
onmouseover="document.bgColor='almond'">Almond</a>]
[<a href="/"
onmouseover="document.bgColor='white'">White</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='black'">Black</a>]
[<a href="/"
onmouseover="document.bgColor='coral'">Coral</a>]
[<a href="/"
onmouseover="document.bgColor='olivedrab'">Olive Drab</a>]
[<a href="/"
onmouseover="document.bgColor='orange'">Orange</a>]
</CENTER>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

</html>

Zmiana koloru tła za pomocą odnośników, zmiana następuje poprzez najechanie kursorem myszy na link.

Zmiana koloru tła strony, zmiana następuje poprzez wybór koloru z listy dostępnych.

<body leftmargin="0" topmargin="0">
<script>
 
  var imgBackground = "background.jpg"; // URL of image
  var intRefresh    = 10;               // refresh rate if image gets out of scrollarea.
  var intPreload    = 1000;             // time to wait before loading background image.
  var strAlignment  = "center";         // choose from center | left | right

//--------------------------------------------------------------//
  // Preload background image, this needs to be done for IE6+ to  //
  // prevent white border, but also helps  when it  needs to  be  // 
  // displayed.                                                   //
  //--------------------------------------------------------------//

if (document.images) 
  {
    imgPreload     = new Image();
    imgPreload.src = imgBackground;
  }

</script>

<center>
   Place your main html in this part of the body...
 </center>

</div>

//--------------------------------------------------------------//
  // SetBackground                                                //
  //--------------------------------------------------------------//
  // Image can't be loaded while table is building up because IE5 //
  // probably uses image info to render a table & that spoils the //
  // stretchiness if window gets smaller then original image size //
  // and you can change the image anytime you want too!!!         //
  //--------------------------------------------------------------//

function setBackground(image)
  {
    document.all.background.src=image;
  }

setTimeout("setBackground('"+imgBackground+"')",intPreload);
 
  //--------------------------------------------------------------//
  // Watermark                                                    //
  //--------------------------------------------------------------//
  // Since we're not using standard  background but an image  we  //
  // need to watermark the image in order to keep it in place if  //
  // page needs to be scrolled. While we are here, make sure the  //
  // body gets realigned as well.                                 //
  //--------------------------------------------------------------//

function watermark()
  {
    // Keep image onto viewable area

document.all.watermark.style.top  = document.body.scrollTop;
    document.all.watermark.style.left = document.body.scrollLeft;
   
    // Place body according alignment settings

if (document.body.clientWidth>document.all.body.clientWidth)
    {
      if (strAlignment=="center")
        document.all.body.style.left = (document.body.clientWidth/2)-(document.all.body.clientWidth/2);
      if (strAlignment=="left")
        document.all.body.style.left = document.body.scrollLeft;
      if (strAlignment=="right")
        document.all.body.style.left = document.body.scrollLeft+document.body.clientWidth-document.all.body.clientWidth;
    }

// Make visibile once changed to make moving between pages less visible

document.all.body.style.visibility      = "";
    document.all.watermark.style.visibility = "";
  }

setInterval("watermark()",intRefresh);

</script>

Skrypt automatycznie dostosowuje obrazek tła do rozmiarów okna przeglądarki.

Do zamieszczenia w ramach HEAD:

today=new Date();
jran=today.getTime();
var number = 7;
var random_number="";
var image="";
var text_color="";
ia=9301;
ic=49297;
im=233280;
jran = (jran*ia+ic) % im;
random_number = Math.ceil( (jran/(im*1.0)) *number);
// Loads the appropriate image and text color based on random number.
if (random_number==1) {
text_color="000000";
image="1.gif";
}
if (random_number==2) {
text_color="000000";
image="2.jpg";
}
if (random_number==3) {
text_color="000000";
image="3.gif";
}
if (random_number==4) {
text_color="000000";
image="4.gif";
}
if (random_number==5) {
text_color="000000";
image="5.jpg";
}
if (random_number==6) {
text_color="000000";
image="6.jpg";
}
if (random_number==7) {
text_color="000000";
image="7.jpg";
}
// -->
</script>
<script language="JavaScript">

</script>

Do umieszczenia w dowolnym miejscu:

<a href="#" onClick="window.location='graficzne.htm'">
<script language="JavaScript">

</script></a>

Skrypt, który pozwala na losową zmianę tła graficznego strony.

Zmiana koloru tła odpowiednim przyciskiem.

Dynamiczne tło na stronę.

Wstaw w ramach HEAD

</script>

Wstaw w ramach BODY

<div align="center">
<form name="colc">
<table border="1">
<td colspan="2">
<b><center>Please Enter a Color</td><tr><td>
<b>Background:</td><td><select name="cc" size="1">
    <option value="black">Black
	<option value="blue">Blue
	<option value="green">Green
	<option value="skyblue">Light Blue
	<option value="orange">Orange
	<option value="purple">Purple
	<option value="red">Red
    <option value="silver">Silver
	<option value="Yellow">Yellow
	<option selected value="white">White
   	</select></td><tr><td>
<b>Text:</td><td>
    <select name="tc" size="1">
    <option selected value="black">Black
   	<option value="blue">Blue
	<option value="green">Green
	<option value="skyblue">Light Blue
	<option value="orange">Orange
	<option value="purple">Purple
	<option value="red">Red
    <option value="silver">Silver
	<option value="Yellow">Yellow
	<option value="white">White
	</select>
</td><tr><td colspan="2">
<center><input type="button" name="button" value="Change Color!" onclick="color()">
</td>
</table>
</form>
</div>

Skrypt umożliwia zmianę koloru tła strony oraz kolor czcionki za pomocą przycisków.

Wstaw w ramach HEAD

</script>

Wstaw w ramach BODY

<center>
<form name=Interface>
<table border=4 cellspacing=0 cellpadding=4>
<tr>
<td colspan=3 align=center>Background</td>
<td><input type=text name=bgHex onKeyup="setBGHex(this.value)"></td>
<td colspan=2 align=center>Foreground</td>
<td><input type=text name=fgHex onKeyup="setFGHex(this.value)"></td>
</tr>
<tr>
<td>Red</td>
<td><input type=button value=" + " onClick="incrementRed(true)"></td>
<td><input type=button value=" - " onClick="decrementRed(true)"></td>
<td><input type=text name="red" onKeyup="setRed(this.value, true)"></td>
<td><input type=button value=" + " onClick="incrementRed(false)"></td>
<td><input type=button value=" - " onClick="decrementRed(false)"></td>
<td><input type=text name=redFG onKeyup="setRed(this.value, false)"></td>
</tr>
<tr>
<td>Green</td>
<td><input type=button value=" + " onClick="incrementGreen(true)"></td>
<td><input type=button value=" - " onClick="decrementGreen(true)"></td>
<td><input type=text name="green" onKeyup="setGreen(this.value, true)"></td>
<td><input type=button value=" + " onClick="incrementGreen(false)"></td>
<td><input type=button value=" - " onClick="decrementGreen(false)"></td>
<td><input type=text name=greenFG onKeyup="setGreen(this.value, false)"></td>
</tr>
<tr>
<td>Blue</td>
<td><input type=button value=" + " onClick="incrementBlue(true)"></td>
<td><input type=button value=" - " onClick="decrementBlue(true)"></td>
<td><input type=text name="blue" onKeyup="setBlue(this.value, true)"></td>
<td><input type=button value=" + " onClick="incrementBlue(false)"></td>
<td><input type=button value=" - " onClick="decrementBlue(false)"></td>
<td><input type=text name=blueFG onKeyup="setBlue(this.value, false)"></td>
</tr>
</table>
</form>
</center>

Skrypt generuje kody koloru tła oraz czcionki.

var backImage = new Array(); // don't change this

// Enter the image filenames you wish to use.
// Follow the pattern to use more images.  The
// number in the brackets [] is the number you
// will use in the function call to pick each
// image.

// Note how backImage[3] = "" -- which would
// set the page to *no* background image.

backImage[0] = "gify/1.gif";
backImage[1] = "gify/2.jpg";
backImage[2] = "gify/3.gif";
backImage[3] = "gify/4.gif";
backImage[4] = "gify/5.jpg";
backImage[5] = "gify/6.jpg";
backImage[6] = "gify/7.jpg";

// Do not edit below this line.
//-----------------------------

function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}

//-->
</script>

Mouse Over:<br>
<a href="#" onMouseOver="javascript:changeBGImage(0)">Tło 1</a><br>
<a href="#" onMouseOver="javascript:changeBGImage(1)">Tło 2</a><br>
<a href="#" onMouseOver="javascript:changeBGImage(2)">Tło 3</a><br>
<a href="#" onMouseOver="javascript:changeBGImage(3)">Tło 4</a><br>
<a href="#" onMouseOver="javascript:changeBGImage(4)">Tło 5</a><br>
<a href="#" onMouseOver="javascript:changeBGImage(5)">Tło 6</a><br>
<a href="#" onMouseOver="javascript:changeBGImage(6)">Tło 7</a><br>
<a href="#" onMouseOver="javascript:changeBGImage(7)">Bez Tła</a><br>

<br>
Mouse Click:<br>
<a href="javascript:changeBGImage(0)">Tło 1</a><br>
<a href="javascript:changeBGImage(1)">Tło 2</a><br>
<a href="javascript:changeBGImage(2)">Tło 3</a><br>
<a href="javascript:changeBGImage(3)">Tło 4</a><br>
<a href="javascript:changeBGImage(4)">Tło 5</a><br>
<a href="javascript:changeBGImage(5)">Tło 6</a><br>
<a href="javascript:changeBGImage(6)">Tło 7</a><br>
<a href="javascript:changeBGImage(7)">Bez Tła</a><br>

Zmiany tła w postaci plików graficznych za pomocą odnośników, zmiana poprzez kliknięcie bądź najechanie kursorem myszy na link.

// (C) 2003 CodeLifter.com
// Free for all users, but leave in this  header

// =======================================
// set the following variables
// =======================================

// Set speed (milliseconds)
var speed = 1000

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'gify/slideshow1.jpg'
Pic[1] = 'gify/slideshow2.jpg'
Pic[2] = 'gify/slideshow3.jpg'
Pic[3] = 'gify/slideshow4.jpg'
Pic[4] = 'gify/slideshow5.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runBGSlideShow(){
   if (document.body){
   document.body.background = Pic[j];
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runBGSlideShow()', speed)
   }
}

//-->
</script>
<style>
body{
background-repeat: no-repeat;
background-position: 25 25;
}
</style>
</head>
<body bgcolor="#000000" onload="runBGSlideShow()">

Zmiana pliku graficznego tła strony w charakterze slajdów, zmiana o określony czas, nadawanie pozycji dla pliku graficznego.

strony internetowe | catering warszawa | webapi optima | tani hosting | Kartki