Yanıp sönen yazı “RAINBOW TEXT”
Ne işe yarar: Renk değiştiren yazılar yazmanıza yarar :)
Demo:
Yapılışı için konunun devamını okuyun
Devamını okumak için tıklayın »
Kategori: Javascripts & DHTML
Renk Değiştiren arka plan
<script language="JavaScript">
<!--
//you can assign the initial color of the background here
r=255;
g=255;
b=255;
flag=0;
t=new Array;
o=new Array;
d=new Array;
function hex(a,c)
{
t[a]=Math.floor(c/16)
o[a]=c%16
switch (t[a])
{
case 10:
t[a]='A';
break;
case 11:
t[a]='B';
break;
case 12:
t[a]='C';
break;
case 13:
t[a]='D';
break;
case 14:
t[a]='E';
break;
case 15:
t[a]='F';
break;
default:
break;
}
switch (o[a])
{
case 10:
o[a]='A';
break;
case 11:
o[a]='B';
break;
case 12:
o[a]='C';
break;
case 13:
o[a]='D';
break;
case 14:
o[a]='E';
break;
case 15:
o[a]='F';
break;
default:
break;
}
}
function ran(a,c)
{
if ((Math.random()>2/3||c==0)&&c<255)
{
c++
d[a]=2;
}
else
{
if ((Math.random()<=1/2||c==255)&&c>0)
{
c--
d[a]=1;
}
else d[a]=0;
}
return c
}
function do_it(a,c)
{
if ((d[a]==2&&c<255)||c==0)
{
c++
d[a]=2
}
else
if ((d[a]==1&&c>0)||c==255)
{
c--;
d[a]=1;
}
if (a==3)
{
if (d[1]==0&&d[2]==0&&d[3]==0)
flag=1
}
return c
}
function disco()
{
if (flag==0)
{
r=ran(1, r);
g=ran(2, g);
b=ran(3, b);
hex(1,r)
hex(2,g)
hex(3,b)
document.body.style.background="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3]
flag=50
}
else
{
r=do_it(1, r)
g=do_it(2,g)
b=do_it(3,b)
hex(1,r)
hex(2,g)
hex(3,b)
document.body.style.background="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3]
flag--
}
setTimeout('disco()',50)
}
//-->
</script>
Arka plan kendi kendine renk değiştirir.
eklemeniz gereken body kodu:
<body onload="disco()">
Linke tıklayınca pop-up resim çıksın
<script type="text/javascript">
var popbackground="lightskyblue" //specify backcolor or background image for pop window
var windowtitle="Image Window" //pop window title
function detectexist(obj){
return (typeof obj !="undefined")
}
function jkpopimage(imgpath, popwidth, popheight, textdescription){
function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}
getpos()
var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)
else{
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.document.open()
jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}
</script>
<a href="#" onClick="jkpopimage('Resimlinki', 325, 445, 'Açıklama.'); return false">
Tıklanacak isim</a>
Gerekli yerleri düzenleyip kullanabilirsiniz.
Sitenize online hesap makinesi ekleyin
<table border="2" cellspacing="0" cellpadding="0" width="200" bgcolor="#000000">style="border-color:black" onClick="previouskey=event.srcElement.innerText">
<tbody>
<tr>
<td id="result" width="100%" bgcolor="#FFFFFF">style="font:bold 20px Verdana;color:black;text-align='right'">0</td>
</tr>
<tr>
<td width="100%" align="center" valign="middle">
<table border="0" width="100%">cellspacing="0" cellpadding="0" style="font:bold 20px Verdana;color:white">
<tbody>
<tr>
<td width="80%" align="center">
<table border="1" cellspacing="0" width="100%">cellpadding="0" style="cursor:hand;font:bold 20px Verdana;color:white"
onMouseover="if (event.srcElement.tagName=='TD')event.srcElement.style.color='yellow'"
onMouseout="event.srcElement.style.color='white'" onselectStart="return false"
onClick="calculate()" height="82">
<tbody>
<tr>
<td width="25%" height="17" align="center">7</td>
<td width="25%" height="17" align="center">8</td>
<td width="25%" height="17" align="center">9</td>
<td width="25%" height="17" align="center">/</td>
</tr>
<tr>
<td width="25%" height="19" align="center">4</td>
<td width="25%" height="19" align="center">5</td>
<td width="25%" height="19" align="center">6</td>
<td width="25%" height="19" align="center">*</td>
</tr>
<tr>
<td width="25%" height="19" align="center">1</td>
<td width="25%" height="19" align="center">2</td>
<td width="25%" height="19" align="center">3</td>
<td width="25%" height="19" align="center">-</td>
</tr>
<tr>
<td width="25%" height="19" align="center">0</td>
<td width="25%" height="19" align="center">onClick="pn();previouskey=1;event.cancelBubble=true">+/-</td>
<td width="25%" height="19" align="center">.</td>
<td width="25%" height="19" align="center">+</td>
</tr>
</tbody></table>
</td>
<td width="20%">
<div>
<table border="1" cellspacing="0" width="100%">cellpadding="0">
<tbody>
<tr>
<td style="cursor:hand;font:bold 20px Verdana;color:white;text-align:center" width="100%">onClick="result.innerText=0;results=''">C</td>
</tr>
</tbody></table>
</div>
<div>
<table border="1" cellspacing="0" cellpadding="0" width="100%">height="81">
<tbody>
<tr>
<td style="cursor:hand;font:bold 32px Verdana;color:white;text-align:center" width="100%">onMouseover="event.srcElement.style.color='yellow'"
onMouseout="event.srcElement.style.color='white'" onClick="calculateresult()">=</td>
</tr>
</tbody></table>
</div></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<script><!--
var results=''
var previouskey=''
var re=/(\/|\*|\+|-)/
var re2=/(\/|\*|\+|-){2}$/
var re3=/.+(\/|\*|\+|-).+/
var re4=/\d|\./
var re5=/^[^\/\*\+].+\d$/
var re6=/\./
function calculate(){
if (event.srcElement.tagName=="TD"){
if (event.srcElement.innerText.match(re4)&&previouskey=="=")
results=''
if (result.innerText.match(re3)&&event.srcElement.innerText.match(re)){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}
results+=event.srcElement.innerText
if (results.match(re2))
results=results.substring(0,results.length-2)+results.charAt(results.length-1)
result.innerText=results
}
}
function calculateresult(){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}
function pn(){
if (result.innerText.charAt(0)!='-')
result.innerText=results='-'+result.innerText
else if (result.innerText.charAt(0)=='-')
result.innerText=results=result.innerText*(-1)
}
// --></script>
Demo için kodları html olarak kaydedin.
caps:
Linkin üstüne geldiğinde yaınında resim çıksın
<style type="text/css">
.bulletimagestyle{ /*Absolute position bullet image. No need to modify*/
position: absolute;
left: -200px;
}
</style>
<script type="text/javascript">
//Define your bullet image(s) via arbitrary variables, where bulletimg=["imagepath", imagewidth, offsetxfromroot, offsetyfromroot]
var bulletimg1=["greenup.gif", 13, 2, 0]
var bulletimg2=["search.gif", 16, 4, 0]
////Stop editting here/////////////////////
var classnameRE=/(^|\s+)ddbullet($|\s+)/i //regular expression to screen for classname within element
function caloffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function displaybullet(linkobj){
var reltovar=window[linkobj.getAttribute("rel")]
bulletobj.setAttribute("src", reltovar[0])
bulletobj.style.left=caloffset(linkobj, "left")-reltovar[1]-reltovar[2]+"px"
bulletobj.style.top=caloffset(linkobj, "top")-reltovar[3]+"px"
bulletobj.style.visibility="visible"
}
function modifylinks(){
bulletobj=document.createElement("img")
bulletobj.setAttribute("id", "bulletimage")
bulletobj.className="bulletimagestyle"
document.body.appendChild(bulletobj)
for (i=0; i<document.links.length; i++){
if (typeof document.links[i].className=="string" && document.links[i].className.search(classnameRE)!=-1){
document.links[i].onmouseover=function(){displaybullet(this)}
document.links[i].onmouseout=function(){bulletobj.style.visibility="hidden"}
}
}
}
if (window.addEventListener)
window.addEventListener("load", modifylinks, false)
else if (window.attachEvent)
window.attachEvent("onload", modifylinks)
else if (document.getElementById || document.all)
window.onload=modifylinks
</script>
kullanılışı
<a href="url" class="ddbullet" rel="bulletimg1">Link ismi</a>
Düzenleme:
var bulletimg1=["greenup.gif", 13, 2, 0] var bulletimg2=["search.gif", 16, 4, 0]
Resimlere istediğiniz linki verin.
Demo:
Sayfanızda hareket eden cisim
<style type="text/css">
.drag{
position:relative;
cursor:hand;
z-index: 100;
}
</style>
<script type="text/javascript">
/***********************************************
* Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}
dragobject.initialize()
</script>
Bu kodu head kısmına
bunu da istediğiniz yere ekleyin ve sayfanıza koydugunuz resmi isteyen istediği yere taşıabilsin :)
iyi kullanımlar
<img src="test.gif" class="drag">
Sayfanızda yarasalar uçsun
<script language="JavaScript1.2">
<!--
Cupid=new Image();
Cupid.src="bat.gif"; //specify path to bat image
amount=3; //Number of cupids, minimum must be 3.
Xpos=700; //cupids x coordinates, in pixel
Ypos=200; //cupids y coordinates, in pixel
step=0.3; //Animation speed (smaller is slower)
dismissafter=15; //seconds after which Cupids should disappear, in seconds
var ns6=document.getElementById&&!document.all
bats=new Array(3)
if (document.layers){
for (i=0; i < amount; i++)
{document.write("<LAYER NAME=n"+i+" LEFT=0 TOP=-50><a href='http://www.dynamicdrive.com'><IMG SRC='"+Cupid.src+"' NAME='nsi' width=69 height=60 border=0></a></LAYER>")}
}
else if (document.all||ns6){
document.write('<div id="out" style="position:absolute;top:0;left:0"><div id="in" style="position:relative">');
for (i=0; i < amount; i++){
if (document.all)
document.write('<a href="http://www.dynamicdrive.com"><img src="'+Cupid.src+'" id="msieBats" style="position:absolute;top:-50;left:0" border=0></a>')
else
document.write('<a href="http://www.dynamicdrive.com"><img src="'+Cupid.src+'" id="ns6Bats'+i+'" width=69 height=60 style="position:absolute;top:-50;left:0" border=0></a>')
}
document.write('</div></div>');
}
yBase=xBase=currStep=a_count=0;
b_count=1;
c_count=2;
d_count=3;
move=1;
if (document.layers||ns6){
yBase=window.innerHeight/3;
xBase=window.innerWidth/6;
if (document.layers)
window.captureEvents(Event.MOUSEMOVE);
}
if (document.all){
yBase = window.document.body.offsetHeight/3;
xBase = window.document.body.offsetWidth/6;
}
function dismisscupid(){
clearInterval(flycupid)
if (document.layers){
for (i2=0; i2 < amount; i2++){
document.layers['n'+i2].visibility="hide"
}
}
else if (document.all)
document.all.out.style.visibility="hidden"
else if (ns6)
document.getElementById("out").style.visibility="hidden"
}
if (document.layers){
for (i=0; i < amount; i++)
document.layers['n'+i].document.images['nsi'].src=Cupid.src
}
else if (document.all){
for (i=0; i < amount; i++)
document.all.msieBats[i].src=Cupid.src
}
else if (ns6){
for (i=0; i < amount; i++)
document.getElementById("ns6Bats"+i).src=Cupid.src
}
function Animate(){
a_count+=move;
b_count+=move;
c_count+=move;
currStep+=step;
if (a_count >= bats.length) a_count=0;
if (b_count >= bats.length) b_count=0;
if (c_count >= bats.length) c_count=0;
if (document.layers){
for (i=0; i < amount; i++) {
var NewL="n"+i
document.layers[NewL].top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)
document.layers[NewL].left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)
}
}
if (document.all){
for (i=0; i < amount; i++){
document.all.msieBats[i].style.pixelTop = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)
document.all.msieBats[i].style.pixelLeft =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)
}
}
if (ns6){
for (i=0; i < amount; i++){
document.getElementById("ns6Bats"+i).style.top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)
document.getElementById("ns6Bats"+i).style.left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)
}
}
}
flycupid=setInterval('Animate()',30);
setTimeout("dismisscupid()",dismissafter*1000)
//-->
</script>
Resmi ftpye upload edin
iyi kullanımlar :)
Mousenizi gözler takip etsin !
<script language="JavaScript">
pic0=new Image();
pic0.src="eye.gif";
pic1=new Image();
pic1.src="pupils.gif";
var n4=(document.layers);
var n6=(document.getElementById&&!document.all);
var ie=(document.all);
var O=(navigator.appName.indexOf("Opera") != -1)?true:false;
var _d=(n4||ie)?'document.':'document.getElementById("';
var _a=(n4||n6)?'':'all.';
var _r=(n6)?'")':'';
var _s=(n4)?'':'.style';
if (n4){
document.write('<layer name="eyeball" top=0 left=0 width="69" height="34"><img src="eye.gif" width="69" height="34"></layer>');
document.write('<layer name="pupil1" top=0 left=0 width="13" height="13"><img src="pupils.gif" width="13" height="13"></layer>');
document.write('<layer name="pupil2" top:0 left=0 width="13" height="13"><img src="pupils.gif" width="13" height="13"></layer>');
}
else{
if (ie)
document.write('<div id="ic" style="position:absolute;top:0;left:0"><div style="position:relative">');
document.write('<div id="eyeball" style="position:absolute;top:100px;left:100px;width:69px;height:34px"><img src="eye.gif" width="69" height="34"></div>');
document.write('<div id="pupil1" style="position:absolute;top:0px;left:0px;width:12px;height:13px"><img src="pupils.gif" width="13" height="13"></div>');
document.write('<div id="pupil2" style="position:absolute;top:0px;left:0px;width:12px;height:13px"><img src="pupils.gif" width="13" height="13"></div>');
if (ie)
document.write('</div></div>');
}
var ym=0;
var xm=0;
if (n4||n6){
window.captureEvents(Event.MOUSEMOVE);
function mouseNS(e){
ym = e.pageY-window.pageYOffset;
xm = e.pageX;
}
if (n4)window.onMouseMove=mouseNS;
if (n6)document.onmousemove=mouseNS;
}
if (ie||O){
function mouseIEO(){
ym = (ie)?event.clientY:event.clientY-window.pageYOffset;
xm = event.clientX;
}
document.onmousemove=mouseIEO;
}
var etemp=eval(_d+_a+"eyeball"+_r+_s);
var p1temp=eval(_d+_a+"pupil1"+_r+_s);
var p2temp=eval(_d+_a+"pupil2"+_r+_s);
dy=0;
dx=0;
fy=0;
fx=0;
angle1=0;
angle2=0;
d1=0;
d2=0;
function makefollow(){
sy=(!ie)?window.pageYOffset:0;
wy=(ie)?document.body.clientHeight:window.innerHeight;
wx=(ie)?document.body.clientWidth:window.innerWidth;
//Keep eyes on screen. Netscape 6 plays up otherwise!
var chy=Math.floor(fy-34);
if (chy <= 0) chy = 0;
if (chy >= wy-34) chy = wy-34;
var chx=Math.floor(fx-34);
if (chx <= 0) chx = 0;
if (chx >= wx-69) chx = wx-69;
etemp.top=chy+sy;
etemp.left=chx;
//eyeball1 centre.
c1y=parseInt(etemp.top)+17;
c1x=parseInt(etemp.left)+17;
//eyeball2 centre.
c2y=parseInt(etemp.top)+17;
c2x=parseInt(etemp.left)+52;
dy1 = ym+sy - c1y;
dx1 = xm - c1x;
d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
dy2 = ym+sy - c2y;
dx2 = xm - c2x;
d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
ay1 = ym+sy - c1y;
ax1 = xm - c1x;
angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
ay2 = ym+sy - c2y;
ax2 = xm - c2x;
angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
dv=1.7;
p1temp.top=(d1 < 17)?(c1y-6+d1/dv*Math.sin(angle1*Math.PI/180)):(c1y-6+10*Math.sin(angle1*Math.PI/180));
p1temp.left=(d1 < 17)?(c1x-6+d1/dv*Math.cos(angle1*Math.PI/180)):(c1x-6+10*Math.cos(angle1*Math.PI/180));
p2temp.top=(d2 < 17)?(c2y-6+d2/dv*Math.sin(angle2*Math.PI/180)):(c2y-6+10*Math.sin(angle2*Math.PI/180));
p2temp.left=(d2 < 17)?(c2x-6+d2/dv*Math.cos(angle2*Math.PI/180)):(c2x-6+10*Math.cos(angle2*Math.PI/180));
}
function move(){
if (ie)ic.style.top=document.body.scrollTop;
dy=fy+=(ym-fy)*0.12-2;
dx=fx+=(xm-fx)*0.12;
makefollow();
setTimeout('move()',10);
}
window.onload=move;
//-->
</script>
Resimleri ftpnize upload edin, kodları da sayfanızın body kısmına ekleyin :) iste bu kadar.
Mouse çevresinde onunla uyumlu gözler göreceksiniz. Hoş bir olay
