PDA

عرض كامل الموضوع : مؤثران ألوان الصفحة || أكواد جافا سكربت


Mahmoud Hamed
15th December 2015, 06:31 PM
تغيير لون الصفحة بضطة زر
إضغط هنا لتغيير لون الصفحة

طريقة التركيب
1- انسخ هذا الكود و ضعه في منطقة HEAD
<SCRIPT LANGUAGE="JavaScript">
/* Visit our site at http://www.star28.com/ for more code
This notice must stay intact for use */
<!-- Begin
function rnd(scale) {
var dd=new Date();
return((Math.round(Math.abs(Math.sin(dd.getTime()) )*1000000000)%scale));
}
function show() {
document.blah.bg.value=document.bgColor;
document.blah.fg.value=document.fgColor;
}
document.fgColor=256*rnd(255)+16*rnd(255)+rnd(255) ;
document.bgColor=256*rnd(255)+16*rnd(255)+rnd(255) ;
// End -->
</SCRIPT>


2- انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY
<CENTER>
<a href="javascript:history.go(0)"><font color="#000000" face="Tahoma ,Arial" size="3">إضغط هنا لتغيير لون الصفحة</font></a>
</CENTER>

Mahmoud Hamed
15th December 2015, 06:32 PM
غير لون الصفحة بمجرد مرور الماوس على اسم اللون

طريقة التركيب

انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY
<center><font face="Tahoma" color="#FF0000">مرر
فأرتك على أحد الألوان</font><br>
<p align="center"><font face="Tahoma">[<a href="/" onmouseover="document.bgColor='green'">أخضر</a>]
[<a href="/" onmouseover="document.bgColor='greem'">أخضر فاتح</a>] [<a href="/"
onmouseover="document.bgColor='seagreen'">أخضر عفني</a>] [<a href="/"
onmouseover="document.bgColor='red'">أحمر</a>]<br>
[<a href="/" onmouseover="document.bgColor='magenta'">وردي غامق</a>] [<a href="/"
onmouseover="document.bgColor='fusia'">فوشي</a>] [<a href="/"
onmouseover="document.bgColor='pink'">وردي</a>] [<a href="/"
onmouseover="document.bgColor='purple'">بنفسجي</a>]<br>
[<a href="/" onmouseover="document.bgColor='navy'">كحلي</a>] [<a href="/"
onmouseover="document.bgColor='blue'">أزرق</a>] [<a href="/"
onmouseover="document.bgColor='royalblue'">أزرق ملكي</a>] [<a href="/"
onmouseover="document.bgColor='Skyblue'">أزرق سماوي</a>]<br>
[<a href="/" onmouseover="document.bgColor='yellow'">أصفر</a>] [<a href="/"
onmouseover="document.bgColor='brown'">بني</a>] [<a href="/"
onmouseover="document.bgColor='almond'">أحمر قاني</a>] [<a href="/"
onmouseover="document.bgColor='white'">أبيض</a>]<br>
[<a href="/" onmouseover="document.bgColor='black'">أسود</a>] [<a href="/"
onmouseover="document.bgColor='coral'">مشمشي</a>] [<a href="/"
onmouseover="document.bgColor='olivedrab'">زيتوني</a>] [<a href="/"
onmouseover="document.bgColor='orange'">برتقالي</a>] </font></center>

Mahmoud Hamed
15th December 2015, 06:33 PM
كود ألعاب نارية

طريقة التركيب

انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY

<layer name="a0" left=10 top=10 visibility=show bgcolor="#ffffff" clip="0,0,1,1"></layer>
<layer name="a1" left=10 top=10 visibility=show bgcolor="#fff000" clip="0,0,1,1"></layer>
<layer name="a2" left=10 top=10 visibility=show bgcolor="#ffa000" clip="0,0,1,1"></layer>
<layer name="a3" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,1,1"></layer>
<layer name="a4" left=10 top=10 visibility=show bgcolor="#00ff00" clip="0,0,1,1"></layer>
<layer name="a5" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,1,1"></layer>
<layer name="a6" left=10 top=10 visibility=show bgcolor="#ff0000" clip="0,0,1,1"></layer>
<layer name="a7" left=10 top=10 visibility=show bgcolor="#ffffff" clip="0,0,1,1"></layer>
<layer name="a8" left=10 top=10 visibility=show bgcolor="#fff000" clip="0,0,1,1"></layer>
<layer name="a9" left=10 top=10 visibility=show bgcolor="#ffa000" clip="0,0,1,1"></layer>
<layer name="a10" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,1,1"></layer>
<layer name="a11" left=10 top=10 visibility=show bgcolor="#00ff00" clip="0,0,2,2"></layer>
<layer name="a12" left=10 top=10 visibility=show bgcolor="#0000ff" clip="0,0,2,2"></layer>
<layer name="a13" left=10 top=10 visibility=show bgcolor="#ff0000" clip="0,0,2,2"></layer>

<script language="JavaScript">

/*
Document firework script (By Kurt Gregg, kurt.grigg@virgin.net)
Modified granted to Dynamic Drive to feature script in archive
For full source and 100's more DHTML scripts, visit http://dynamicdrive.com
Visit our site at http://www.star28.com/ for more code
* This notice must stay intact for use */

if (document.all)
with(document){
write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')
write('<div style="position:relative;width:2px;height:2px;background: #ffffff;font-size:2px"></div>')
write('<div style="position:relative;width:1px;height:1px;background: #fff000;font-size:1px"></div>')
write('<div style="position:relative;width:1px;height:1px;background: #ffa000;font-size:1px"></div>')
write('<div style="position:relative;width:1px;height:1px;background: #ff00ff;font-size:1px"></div>')
write('<div style="position:relative;width:1px;height:1px;background: #00ff00;font-size:1px"></div>')
write('<div style="position:relative;width:1px;height:1px;background: #0000ff;font-size:1px"></div>')
write('<div style="position:relative;width:1px;height:1px;background: #FF0000;font-size:1px"></div>')
write('<div style="position:relative;width:1px;height:1px;background: #ffffff;font-size:1px"></div>')
write('<div style="position:relative;width:1px;height:1px;background: #fff000;font-size:1px"></div>')
write('<div style="position:relative;width:1px;height:1px;background: #ffa000;font-size:1px"></div>')
write('<div style="position:relative;width:1px;height:1px;background: #ff00ff;font-size:1px"></div>')
write('<div style="position:relative;width:2px;height:2px;background: #ff00ff;font-size:2px"></div>')
write('<div style="position:relative;width:1px;height:1px;background: #0000ff;font-size:1px"></div>')
write('<div style="position:relative;width:1px;height:1px;background: #FF0000;font-size:1px"></div>')
write('</div>')
}


var Clrs=new Array(9)
Clrs[0]='ff0000';
Clrs[1]='00ff00';
Clrs[2]='000aff';
Clrs[3]='ff00ff';
Clrs[4]='ffa500';
Clrs[5]='ffff00';
Clrs[6]='00ff00';
Clrs[7]='ffffff';
Clrs[8]='fffff0';
var sClrs=new Array(5)
sClrs[0]='ffa500';
sClrs[1]='55ff66';
sClrs[2]='AC9DFC';
sClrs[3]='fff000';
sClrs[4]='fffff0';
var yBase;
var xBase;
var step;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;
var initialStarColor='ffa000';
var Mtop=250;
var Mleft=250;

function Fireworks() {
if (document.all)
{
yBase = window.document.body.offsetHeight/3;
xBase = window.document.body.offsetWidth/8;
}
else if (document.layers)
{
yBase = window.innerHeight/3;
xBase = window.innerWidth/8;
}
if (document.all)
{
step=5;
for ( i = 0 ; i < starsDiv.all.length ; i++ )
{
for (ai=0; ai < Clrs.length; ai++)
{
var c=Math.round(Math.random()*[ai]);
}
if (currStep < 90)
starsDiv.all[i].style.background=initialStarColor;
if (currStep > 90)
starsDiv.all[i].style.background=Clrs[c];
starsDiv.all[i].style.top = Mtop + yBase*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100)
starsDiv.all[i].style.left = Mleft + yBase*Math.cos((currStep+i*5)/3)*Math.sin(550+currStep/100)
}
}
else if (document.layers)
{
step = 5;
for ( j = 0 ; j < 14 ; j++ ) //number of NS layers!
{
var templayer="a"+j
for (ai=0; ai < Clrs.length; ai++)
{
var c=Math.round(Math.random()*[ai]);
}
if (currStep < 90)
document.layers[templayer].bgColor=initialStarColor;
if (currStep > 90)
document.layers[templayer].bgColor=Clrs[c];
document.layers[templayer].top = Mtop + yBase*Math.sin((currStep+j*5)/3)*Math.sin(550+currStep/100)
document.layers[templayer].left = Mleft + yBase*Math.cos((currStep+j*5)/3)*Math.sin(550+currStep/100)
}
}
currStep+= step;
//window.status=currStep;
T=setTimeout("Fireworks()",5);
if (currStep==220)
{
currStep=-10;
for (n=0; n < sClrs.length; n++)
{
var k=Math.round(Math.random()*n);
}
initialStarColor=sClrs[k];
if (document.all)
{
Dtop=window.document.body.clientHeight-250;
Dleft=xBase*3.5;
Mtop=Math.round(Math.random()*Dtop);
Mleft=Math.round(Math.random()*Dleft);
document.all.starsDiv.style.top=Mtop+document.body .scrollTop;
document.all.starsDiv.style.left=Mleft+document.bo dy.scrollLeft;
}
else if (document.layers)
{
Dleft=window.innerWidth-100;
Dtop=window.innerHeight-100;
Mtop=Math.round(Math.random()*Dtop+window.pageYOff set);
Mleft=Math.round(Math.random()*Dleft+window.pageXO ffset);
document.layers[templayer].top=Mtop;
document.layers[templayer].left=Mleft;
}
if ((Mtop < 20) || (Mleft < 20))
{
Mtop+=90;
Mleft+=90;
}
}
}
if (document.all||document.layers)
Fireworks();

</script>

Mahmoud Hamed
15th December 2015, 06:34 PM
غير لون الصفحة حسب رمز اللون

طريقة التركيب
1- انسخ هذا الكود و ضعه في منطقة HEAD
<!-- Original: Dion (yobo42@hotmail.com) -->
<!-- Web Site: http://yoboseyo42.virtualave.net -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source! http://javascript.internet.com -->

<script language="JavaScript">
/* Visit our site at http://www.star28.com/ for more code
* Translated By www.star28.com/
* This notice must stay intact for use */

<!-- Begin
function color(frm, clr, val) {
v = eval("0x" + frm[clr].value) + val;
if (v < 0 || v > 255) v -= val;
v = v.toString(16).toUpperCase();
while (v.length < 2) v = "0" + v;
frm[clr].value = v; nc = "";
for(i = 1; i < 8; i += 3) nc += frm.elements[i].value;
document.bgColor = nc;
}
function setval(myitem) {
v = prompt("أدخل قيمة جديدة للون " + myitem.name + " مثال : (00 )", myitem.value);
if (v) {
v = eval("0x" + v);
if ((v & 255) == v) {
myitem.value=v.toString(16).toUpperCase();
while (myitem.value.length < 2) myitem.value = "0" + myitem.value;
color(document.f, myitem.name, 0);
}
}
}
// End -->
</script>


2- انسخ هذا الكود و ضعه في المكان الذي تريده في منطقة BODY
<div align="center">
<form name="f">
<table border="1">
<tr>
<td colspan="3" align="center" bgcolor="#ff0000">أحمر</td>
<td colspan="3" align="center" bgcolor="#00ff00">أخضر</td>
<td colspan="3" align="center" bgcolor="#000ff">أزرق</td>
</tr>
<tr>
<td><input type="button" name="rm" value="<" onclick = "color(this.form, 'Red' , -1);"></td>
<td><input type="button" name="الأحمر" value="AF" onclick = "setval(this);"></td>
<td><input type="button" name="rp" value=">" onclick = "color(this.form, 'Red', 1);"></td>
<td><input type="button" name="gm" value="<" onclick = "color(this.form, 'Green', -1);"></td>
<td><input type="button" name="الأخضر" value="BF" onclick = "setval(this);"></td>
<td><input type="button" name="gp" value=">" onclick = "color(this.form, 'Green', 1);"></td>
<td><input type="button" name="bm" value="<" onclick = "color(this.form, 'Blue', -1);"></td>
<td><input type="button" name="الأزرق" value="CF" onclick = "setval(this);"></td>
<td><input type="button" name="bp" value=">" onclick = "color(this.form, 'Blue', 1);"></td>
</tr>
</table>
</form>
</div>

Mahmoud Hamed
15th December 2015, 06:35 PM
تغيير ألوان شريط تحريك الصفحة الجانبي و السفلي

يمكنك تغيير الألوان للذي يناسبك

طريقة التركيب

انسخ هذا الكود و ضعه في منطقة HEAD

<STYLE>
BODY {
scrollbar-3dlight-color: #00ff33;
scrollbar-arrow-color: #00ff00;
scrollbar-darkshadow-color: #00ff33;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #00ff00;
scrollbar-shadow-color: #00ff00;
scrollbar-track-color: #000033}
</STYLE>

Mahmoud Hamed
15th December 2015, 06:36 PM
تغيير ألوان الجدول بمرور الماوس على الخلية


طريقة التركيب
1- انسخ هذا الكود و ضعه في منطقة HEAD
<script language="JavaScript1.2">

/* Highlight Table Cells Script-- By Dynamic Drive
* For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
* This credit MUST stay intact for use
* Visit our site at http://www.star28.com/ for more code
*/

var ns6=document.getElementById&&!document.all
var ie=document.all

function changeto(e,highlightcolor){
source=ie? event.srcElement : e.target
if (source.tagName=="TR"||source.tagName=="TABLE")
return
while(source.tagName!="TD"&&source.tagName!="HTML")
source=ns6? source.parentNode : source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}

function contains_ns6(master, slave) { //check if slave is contained by master
while (slave.parentNode)
if ((slave = slave.parentNode) == master)
return true;
return false;
}

function changeback(e,originalcolor){
if
(ie&&(event.fromElement.contains(event.toElement)||sour ce.contains(event.toElement)||source.id=="ignore")||source.tagName=="TR"||source.tagName=="TABLE")
return
else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.id=="ignore"))
return
if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
source.style.backgroundColor=originalcolor
}

</script>


2- أضف هذه الرموز لوسم الجدول المراد table ليصبح مثل هذا
<table onMouseover="changeto(event, 'lightgreen')" onMouseout="changeback(event, 'white')">



3- يمكنك إلغاء تغيير اللون لأي خلية تريدها td بإضافة هذا الرمز لها لتصبح هكذا
<td id="ignore">

Mahmoud Hamed
15th December 2015, 06:37 PM
كود لجعل الصفحة تمطر

طريقة التركيب

انسخ هذا الكود و ضعه في منطقة BODY

<script language="JavaScript">

/* This credit MUST stay intact for use */
/* Visit our site at http://www.star28.com/ for more code */

<!-- Begin
var no = 50;
var speed = 1;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var s, x, y, sn, cs;
var a, r, cx, cy;
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else
if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
x = new Array();
y = new Array();
r = new Array();
cx = new Array();
cy = new Array();
s = 8;
for (i = 0; i < no; ++ i) {
initRain();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">");
document.write(",</font></layer>");
}
else {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">");
document.write(",</font></layer>");
}
}
else
if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");
document.write(",</font></div>");
}
else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");
document.write(",</font></div>");
}
}
}
function initRain() {
a = 6;
r[i] = 1;
sn = Math.sin(a);
cs = Math.cos(a);
cx[i] = Math.random() * doc_width + 1;
cy[i] = Math.random() * doc_height + 1;
x[i] = r[i] * sn + cx[i];
y[i] = cy[i];
}
function makeRain() {
r[i] = 1;
cx[i] = Math.random() * doc_width + 1;
cy[i] = 1;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function updateRain() {
r[i] += s;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function raindropNS() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
document.layers["dot"+i].top = y[i];
document.layers["dot"+i].left = x[i];
}
setTimeout("raindropNS()", speed);
}
function raindropIE() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
document.all["dot"+i].style.pixelTop = y[i];
document.all["dot"+i].style.pixelLeft = x[i];
}
setTimeout("raindropIE()", speed);
}
if (ns4up) {
raindropNS();
}
else
if (ie4up) {
raindropIE();
}
// End -->
</script>