Bueno estos son algunos codigos sacados de Dynamic Driver para HTML
Archivo complementario con imagenes:
Estos son algunos scripts que me gustaron asi como sus usos:
a) Favicon:
Un favicon es el icono que puede identificar a nuestra página por ejemplo:
Ahora primeramente hay que crearlo para ello:
1.- Nos metemos en este link
2.- Seguimos las instrucciones, o pasos como se muestran en las capturas
Ya creado el Favicon seguimos los siguientes pasos:
1.-Sube el archivo ("favicon.ico"
a nuestra pagina
2.-Dentro de “HEAD” insertamos el código siguiente, así mismo a nuestras sub paginas:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
3.- Como este recurso es “online” pudiera no estar de inmediato así que no hay que desesperarse
b) Efecto de Murciélagos Volando:
Primeramente este efecto tiene como “atributo especial” que se puede configurar el tiempo de visualización de los “murciélagos” recomendable para día de muertos, o paginas con temáticas paranormales o de terror
Aquí el código:
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><script language=JavaScript1.2> <!-- /* Flying Bats- By Dynamic Drive, based on script by Kurt ([email protected]) For full source, usage terms, and 100's more DHTML scripts Visit http://www.dynamicdrive.com */ Cupid=new Image(); Cupid.src="bat.gif"; //specify path to bat image amount=3; //Number of cupids, minimum must be 3.</span> <script language=JavaScript1.2> <- / * volando murciélagos-By Dynamic Drive, basado en el guión de Kurt (kurt.grigg @ virgin.net) Por fuente completo, las condiciones de uso, y 100 más scripts DHTML Visita http! / / www.dynamicdrive.com * / Cupido = new Image (); Cupid.src = "bat.gif" / / especificar la ruta al bate cantidad de imágenes = 3; / / Número de cupidos, el mínimo debe ser de 3.</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">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.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.style.pixelTop = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10) document.all.msieBats.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></span> Xpos = 700; / / cupidos coordenadas x, en ypos pixel = 200; / / cupidos y coordina, en el paso pixel = 0.3; / / Velocidad de la animación (más pequeño es más lento) dismissafter = 15; / / segundos después de que Cupido debe desaparecer, en segundo var NS6 = document.getElementById & & document.all murciélagos = new Array (3) si (document.layers) {for! (i = 0; i <cantidad; i + +) {document.write ("<nombre de capa = 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 =" a "style =" position: absolute; top: 0; a la izquierda: 0 "> <div id="in" style="position:relative"> '); for (i = 0; i <cantidad; 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 + "" de ancho = 69 altura = 60 style = "position: absolute; top: -50; a la izquierda: 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) si (document.layers) {for (I 2 = 0, i2 cantidad <; i2 + +). document.layers {['n' + i2] = visibilidad "ocultar"}} else if (documento . todos) document.all.out.style.visibility = "hidden" else if (NS6) document.getElementById ("out". style.visibility = "hidden"} if (document.layers) {for (i = 0 ; i <cantidad; i + +) document.layers ['n' + i] document.images ['nsi'] src = Cupid.src} else if (document.all) {for (i = 0;.. i cantidad < ; i + +) document.all.msieBats src = Cupid.src} else if (NS6) {for (i = 0;. i cantidad <;. i + +) document.getElementById ("ns6Bats" + i) src = Cupido . src} function Animar () {a_count + = mover; b_count + = mover; c_count + = mover; currStep + = paso; 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 <cantidad; i + +) {var NEWL = "n" + i document.layers [NEWL] = arriba. ypos + yBase Math.sin * (((currStep) + i * 3.7) / 4) * Math.cos ((currStep + i * 35) / 10) document.layers [NEWL]. xpos izquierda = + xBase * Matemáticas. cos (((currStep) + i * 3.7) / 4) * Math.cos ((currStep + i * 35) / 62)}} if (document.all) {for (i = 0; i <cantidad; i + +) {document.all.msieBats . style.pixelTop = ypos + yBase Math.sin * (((currStep) + i * 3.7) / 4) * Math.cos ((currStep + i * 35) / 10) del documento . all.msieBats . style.pixelLeft = xpos + xBase Math.cos * (((currStep) + i * 3.7) / 4) * Math.cos ((currStep + i * 35) / 62)}} si (NS6) {for (i = 0; i <cantidad; 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></span>
c) Ojos Mirando:
Este código es algo curioso aunque dentro de nuestro directorio base hay que tener las imágenes con los nombres “eye.gif” y pupils.gif” una imaben de unos ojos nos sigue y vigila si agregamos este código:
<script language=JavaScript>
//Watching Eyes script- By Kurt ([email protected])
//Script featured on Dynamic Drive
//Visit http://www.dynamicdrive.com for this script and more
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>
d) Nieve cayendo:
Este código lo use hace tiempo es muy bonito y se puede variar por cualquier imagen no tan grande muy recomendable:
<script type=text/javascript>
/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/
//Configure below to change URL path to the snow image
var snowsrc="snow.gif"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight"
var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat"? document.documentElement : document.body
}
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com"!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx = 0; // set coordinate variables
xp = Math.random()*(doc_width-50); // set position variables
yp = Math.random()*doc_height;
am = Math.random()*20; // set amplitude variables
stx = 0.02 + Math.random()/10; // set step variables
sty = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><a href="http://dynamicdrive.com"><img src='"+snowsrc+"' border="0"></a></div>";
} else {
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='"+snowsrc+"' border="0"></div>";
}
}
}
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight"? window.innerHeight : (ie4up && snowdistance=="windowheight"? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight"? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp += sty;
if (yp > doc_height-50) {
xp = Math.random()*(doc_width-am-30);
yp = 0;
stx = 0.02 + Math.random()/10;
sty = 0.7 + Math.random();
}
dx += stx;
document.getElementById("dot"+i).style.top=yp+"px";
document.getElementById("dot"+i).style.left=xp + am*Math.sin(dx)+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>
e) Circulando Pista de Texto:
Este efecto me encanto por que el texto da la apariencia de una serpiente aquí la captura
Y Aquí el Codigo
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style type=text/css> /* Circle Text Styles */ #outerCircleText { /* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */ font-style: italic; font-weight: bold; font-family: 'comic sans ms', verdana, arial; color: #000; /* End Optional */ /* Start Required - Do Not Edit */ position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;} #outerCircleText div {position: relative;} #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;} /* End Required */ /* End Circle Text Styles */ </style></span> <style type=text/css> / * Estilos Círculo de texto * / # outerCircleText {/ * Opcional - No establece font-size AQUÍ, colóquela en el SCRIPT * / font-style: italic; font-weight: bold; fuente -family: 'Comic Sans MS, Verdana, Arial; color: # 000; / * Fin * Opcional / / * Inicio Requerido - No modifique * / position: absolute; top: 0; izquierda: 0, z-index: 3000; cursor: por defecto;} # {div outerCircleText position: relative;} # div outerCircleText {position: absolute; top: 0; izquierda: 0; text-align: center;} / * Fin necesarios * / / * Círculo de final Estilos de texto * / </ style></span>
<script type=text/javascript>
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
// Your message here (QUOTED STRING)
var msg = "Dynamic Drive! Scripts & More!";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y = Y += (y[i-1] - Y) * speed;
x = X += (x[i-1] - X) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg));
oi.appendChild(d); y = x = Y = X = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>
Bueno, ya que no se pudo publicar esta información en Blogger la pase a mi Taringa para evitar fallos
Archivo complementario con imagenes:
Estos son algunos scripts que me gustaron asi como sus usos:
a) Favicon:
Un favicon es el icono que puede identificar a nuestra página por ejemplo:
Ahora primeramente hay que crearlo para ello:
1.- Nos metemos en este link
2.- Seguimos las instrucciones, o pasos como se muestran en las capturas
Ya creado el Favicon seguimos los siguientes pasos:
1.-Sube el archivo ("favicon.ico"
a nuestra pagina
2.-Dentro de “HEAD” insertamos el código siguiente, así mismo a nuestras sub paginas:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
3.- Como este recurso es “online” pudiera no estar de inmediato así que no hay que desesperarse
b) Efecto de Murciélagos Volando:
Primeramente este efecto tiene como “atributo especial” que se puede configurar el tiempo de visualización de los “murciélagos” recomendable para día de muertos, o paginas con temáticas paranormales o de terror
Aquí el código:
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><script language=JavaScript1.2> <!-- /* Flying Bats- By Dynamic Drive, based on script by Kurt ([email protected]) For full source, usage terms, and 100's more DHTML scripts Visit http://www.dynamicdrive.com */ Cupid=new Image(); Cupid.src="bat.gif"; //specify path to bat image amount=3; //Number of cupids, minimum must be 3.</span> <script language=JavaScript1.2> <- / * volando murciélagos-By Dynamic Drive, basado en el guión de Kurt (kurt.grigg @ virgin.net) Por fuente completo, las condiciones de uso, y 100 más scripts DHTML Visita http! / / www.dynamicdrive.com * / Cupido = new Image (); Cupid.src = "bat.gif" / / especificar la ruta al bate cantidad de imágenes = 3; / / Número de cupidos, el mínimo debe ser de 3.</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">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.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.style.pixelTop = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10) document.all.msieBats.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></span> Xpos = 700; / / cupidos coordenadas x, en ypos pixel = 200; / / cupidos y coordina, en el paso pixel = 0.3; / / Velocidad de la animación (más pequeño es más lento) dismissafter = 15; / / segundos después de que Cupido debe desaparecer, en segundo var NS6 = document.getElementById & & document.all murciélagos = new Array (3) si (document.layers) {for! (i = 0; i <cantidad; i + +) {document.write ("<nombre de capa = 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 =" a "style =" position: absolute; top: 0; a la izquierda: 0 "> <div id="in" style="position:relative"> '); for (i = 0; i <cantidad; 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 + "" de ancho = 69 altura = 60 style = "position: absolute; top: -50; a la izquierda: 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) si (document.layers) {for (I 2 = 0, i2 cantidad <; i2 + +). document.layers {['n' + i2] = visibilidad "ocultar"}} else if (documento . todos) document.all.out.style.visibility = "hidden" else if (NS6) document.getElementById ("out". style.visibility = "hidden"} if (document.layers) {for (i = 0 ; i <cantidad; i + +) document.layers ['n' + i] document.images ['nsi'] src = Cupid.src} else if (document.all) {for (i = 0;.. i cantidad < ; i + +) document.all.msieBats src = Cupid.src} else if (NS6) {for (i = 0;. i cantidad <;. i + +) document.getElementById ("ns6Bats" + i) src = Cupido . src} function Animar () {a_count + = mover; b_count + = mover; c_count + = mover; currStep + = paso; 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 <cantidad; i + +) {var NEWL = "n" + i document.layers [NEWL] = arriba. ypos + yBase Math.sin * (((currStep) + i * 3.7) / 4) * Math.cos ((currStep + i * 35) / 10) document.layers [NEWL]. xpos izquierda = + xBase * Matemáticas. cos (((currStep) + i * 3.7) / 4) * Math.cos ((currStep + i * 35) / 62)}} if (document.all) {for (i = 0; i <cantidad; i + +) {document.all.msieBats . style.pixelTop = ypos + yBase Math.sin * (((currStep) + i * 3.7) / 4) * Math.cos ((currStep + i * 35) / 10) del documento . all.msieBats . style.pixelLeft = xpos + xBase Math.cos * (((currStep) + i * 3.7) / 4) * Math.cos ((currStep + i * 35) / 62)}} si (NS6) {for (i = 0; i <cantidad; 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></span>
c) Ojos Mirando:
Este código es algo curioso aunque dentro de nuestro directorio base hay que tener las imágenes con los nombres “eye.gif” y pupils.gif” una imaben de unos ojos nos sigue y vigila si agregamos este código:
<script language=JavaScript>
//Watching Eyes script- By Kurt ([email protected])
//Script featured on Dynamic Drive
//Visit http://www.dynamicdrive.com for this script and more
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>
d) Nieve cayendo:
Este código lo use hace tiempo es muy bonito y se puede variar por cualquier imagen no tan grande muy recomendable:
<script type=text/javascript>
/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/
//Configure below to change URL path to the snow image
var snowsrc="snow.gif"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight"
var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat"
? document.documentElement : document.body
}
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com"
!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx = 0; // set coordinate variables
xp = Math.random()*(doc_width-50); // set position variables
yp = Math.random()*doc_height;
am = Math.random()*20; // set amplitude variables
stx = 0.02 + Math.random()/10; // set step variables
sty = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><a href="http://dynamicdrive.com"><img src='"+snowsrc+"' border="0"></a></div>"
;
} else {
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='"+snowsrc+"' border="0"></div>"
;
}
}
}
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight"
? window.innerHeight : (ie4up && snowdistance=="windowheight"? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight"? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp += sty;
if (yp > doc_height-50) {
xp = Math.random()*(doc_width-am-30);
yp = 0;
stx = 0.02 + Math.random()/10;
sty = 0.7 + Math.random();
}
dx += stx;
document.getElementById("dot"+i).style.top=yp+"px";
document.getElementById("dot"+i).style.left=xp + am*Math.sin(dx)+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>
e) Circulando Pista de Texto:
Este efecto me encanto por que el texto da la apariencia de una serpiente aquí la captura
Y Aquí el Codigo
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style type=text/css> /* Circle Text Styles */ #outerCircleText { /* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */ font-style: italic; font-weight: bold; font-family: 'comic sans ms', verdana, arial; color: #000; /* End Optional */ /* Start Required - Do Not Edit */ position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;} #outerCircleText div {position: relative;} #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;} /* End Required */ /* End Circle Text Styles */ </style></span> <style type=text/css> / * Estilos Círculo de texto * / # outerCircleText {/ * Opcional - No establece font-size AQUÍ, colóquela en el SCRIPT * / font-style: italic; font-weight: bold; fuente -family: 'Comic Sans MS, Verdana, Arial; color: # 000; / * Fin * Opcional / / * Inicio Requerido - No modifique * / position: absolute; top: 0; izquierda: 0, z-index: 3000; cursor: por defecto;} # {div outerCircleText position: relative;} # div outerCircleText {position: absolute; top: 0; izquierda: 0; text-align: center;} / * Fin necesarios * / / * Círculo de final Estilos de texto * / </ style></span>
<script type=text/javascript>
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
// Your message here (QUOTED STRING)
var msg = "Dynamic Drive! Scripts & More!";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y = Y += (y[i-1] - Y) * speed;
x = X += (x[i-1] - X) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg));
oi.appendChild(d); y = x = Y = X = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>
Bueno, ya que no se pudo publicar esta información en Blogger la pase a mi Taringa para evitar fallos