Está en la página 1de 18

Instrucción para cambiar brillo de una imagen

<style type="text/css">
#im {
FILTER: alpha(opacity=50)
}
</style>

<script language="JavaScript1.2">
function high(which2)
{
theobject=which2;
highlighting=setInterval("highlightit(theobject)",50);

}
function low(which2)
{
clearInterval(highlighting);
which2.filters.alpha.opacity=50;
}
function highlightit(cur2)
{
if(cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=5
else if(window.highlighting)
clearInterval(highlighting)
}
</script>

<img src="TU_IMAGEN.gif" width="32" height="32" border="0" alt="" id="im"


onmouseover="high(this)" onmouseout="low(this)">

Texto que va cambiando de color.


Un texto va siguiendo el puntero del ratón.
Cualquier imagen va moviéndose por la pantalla.

Cambio color imagen

<script language="javascript">

<!-- Consigue otros JavaScript en http://www.muchografico.com -->

// Creado por Tk imax@samerica.com

imagen1=new Image

imagen1.src="imagen1.gif"

imagen2=new Image

imagen2.src="imagen2.gif"

var i=1;

function cambiar() {

if (i == 1)

document.images['ejemplo'].src=imagen2.src

i=2;

else

{
document.images['ejemplo'].src=imagen1.src;

i=1;

</script>

<img src="img014.gif" name="ejemplo" onMousedown="cambiar()">

Efecto rayo

<html><BR><head></p><p><!--INSERT BELOW INSIDE HEAD SECTION--


><BR><SCRIPT language="Javascript"><BR><!--</p><p>/*<BR>Document
lightening effect (By Joe Lard, darg36@home.com)<BR>Submitted to Dynamic Drive
to feature script in archive<BR>For full source and 100's more DHTML scripts, visit
http://www.dynamicdrive.com<BR>*/</p><p>ie4=document.all?
1:0;<BR>ns4=document.layers?1:0;<BR>ns5=(document.getElementById && !
document.all)?1:0;</p><p>function init(){<BR>// Bolt has an aura? (true | false) //
takes twice as long to
strike<BR>aura=false;<BR>bcolor="white";<BR>acolor="blue";</p><p>// Make
background color flash? (true |
false)<BR>flash=true;<BR>skyNorm="black";<BR>skyFlash="#000050";<BR>if
(flash) document.bgColor=skyNorm;</p><p>// nbs = Number of main bolt
segments<BR>nbs = 50;<BR>ct=0;<BR>// Font sizes for lightning bolt and aura
segments<BR>fsb=shi*.3;<BR>fsf=shi*.2;<BR>fsbi=shi*.2;<BR>fsfi=shi*.12;<BR>fs
bii=shi*.12;<BR>fsfii=shi*.07;</p><p>xpos=cswi; ypos=0;<BR>if (ns5) ark =
document.getElementById("ark");<BR>if (ns4)
{</p><p>ol=document.layers["ark"];<BR>ol = new Layer(swi);<BR>ol.left =
0;<BR>ol.top = 0;<BR>ol.height = shi;<BR>ol.zIndex=1;<BR>ol.visibility =
"hide";</p><p>ret="<STYLE TYPE='text/css'>";<BR>for (i=1;i<10;i++)
{<BR>ret+="DIV.bolt"+i+" {position:absolute; font-style:'Times New Roman'; font-
size:"+(fsf*i/9)+"px; color:"+bcolor+"; visibility:inherit; z-index:1}";<BR>if (aura)
ret+="DIV.bolta"+i+" {position:absolute; font-style:'Times New Roman'; font-size:"+
(fsf*1.3*i/9)+"px; color:blue; visibility:inherit; z-index:0}";<BR>}
ret+="</STYLE>";</p><p>for (fs=1;fs<10;fs++)<BR>for (i=1;i<nbs;i++) {<BR>if
(aura) ret+="<DIV id=a"+i+"f"+fs+" class=bolta"+fs+">.</DIV>";<BR>ret+="<DIV
id=s"+i+"f"+fs+"
class=bolt"+fs+">.</DIV>";<BR>}</p><p>//ol.document.open();<BR>ol.document.wr
ite(ret);<BR>ol.document.close();<BR>}<BR>Time1=setTimeout("mainplot()",100);<
BR>}</p><p>function
mainplot()<BR>{<BR>lang=0;<BR>xpos=Math.random()*cswi+cswi/2; ypos=0; fs=9;
fsi=8<BR>deg=Math.random()*30-15+((xpos<cswi)? +15:-
15);<BR>jag=Math.round(Math.random()*100)/100;<BR>zag=Math.round(Math.rando
m()*100)/100;<BR>cur=Math.round((.5 * (Math.random()*10-
5))*100)/100;<BR>ion=(Math.random()>.5)? 1:-1;<BR>//status=" "+ct+" Divs
"+format(jag)+" jag "+format(zag)+" zag "+cur+" curve"; ct=0;</p><p>if
(ns4)<BR>{<BR>for (i=1;i<nbs;i++) {<BR>ang=Math.random()*jag*90-
jag*45;<BR>if (Math.random()+.05>zag) lang=Math.random()*zag*90-zag*45;
<BR>ang+=lang;<BR>ct++;<BR>if (Math.random()*10>9.5 && fsi>1) {fsi--;
leg1();}<BR>xpos+=Math.sin((deg+
(ang+i*cur))/57.3)*(fsf*fs/9)*.07;<BR>ypos+=Math.abs(Math.cos((deg+
(ang+i*cur))/57.3)*(fsf*fs/9)*.07); //fsb=fsf*1.5;<BR>if (aura)
{ ol.document.layers["a"+i+"f"+fs].moveTo(xpos-(fsf*1.3*fs/9)*.125,ypos-
(fsf*1.3*fs/9)*.85); ct++;}<BR>ol.document.layers["s"+i+"f"+fs].moveTo(xpos-
(fsf*fs/9)*.125,ypos-(fsf*fs/9)*.85);<BR>if (ypos>shi || xpos<0 || xpos>swi)
i=nbs;<BR>}<BR>//status=" "+ct+" Divs "+format(jag)+" jag "+format(zag)+" zag
"+cur+"
curve";<BR>ol.resizeTo(swi,shi);<BR>Time1=setTimeout("light()",100);<BR>}</p><
p>if (ie4 || ns5) { <BR>// Rewriting layers can be faster than repositioning in internet
explorer<BR>ret="";<BR>fsf=shi*.2;<BR>for (i=1;i<nbs;i+
+)<BR>{<BR>ang=Math.random()*jag*90-jag*45;<BR>if (Math.random()+.05>zag)
lang=Math.random()*zag*90-zag*45; <BR>ang+=lang;<BR>ct++;<BR>if
(Math.random()*10>9.5) {fsfi=fsf*.6; fsf*=.95; leg1();}<BR>xpos+=Math.sin((deg+
(ang+i*cur))/57.3)*fsf*.07;<BR>ypos+=Math.abs(Math.cos((deg+
(ang+i*cur))/57.3)*fsf*.07); fsb=fsf*1.3;<BR>if (ypos>shi || xpos<0 || xpos>swi)
i=nbs;<BR>if (aura) { ret+="<DIV id='darg"+i+"' style='position:absolute; left:"+(xpos-
fsb*.125)+"; top:"+(ypos-fsb*.85)+"; font-size:"+fsb+"px; color:rgb(0,0,255); z-
Index:0' >.</DIV>"; ct++;}<BR>ret+="<DIV style='position:absolute; left:"+(xpos-
fsf*.125)+"; top:"+(ypos-fsf*.85)+"; font-size:"+fsf+"px; color:"+bcolor+"; z-Index:1'
>.</DIV>";<BR>}<BR>//status=" "+ct+" Divs "+format(jag)+" jag "+format(zag)+"
zag "+cur+"
curve";<BR>ark.innerHTML=ret;<BR>Time1=setTimeout("lightie()",100);<BR>}<BR
>}</p><p>function leg1() {<BR>xpo=xpos;
ypo=ypos;<BR>lang=zag*ion*(30+Math.random()*20-10);<BR>ion*=-1;
lang1=0;<BR>deg1=deg+ion*50+Math.random()*20-
10;<BR>jlen=Math.random()*nbs*.25+nbs*.25; <BR>if(ns4) {<BR>fsii=fsi-1<BR>for
(j=1;j<jlen;j++) {<BR>ang1=Math.random()*jag*90-jag*45;<BR>if (Math.random()
+.05>zag) lang1=Math.random()*zag*90-zag*45; <BR>ang1-=lang1;<BR>ct+
+;<BR>if (Math.random()*10>9.9 && fsii>1) {fsii--;
leg2();}<BR>xpo+=Math.sin((deg1+
(ang1+j*cur))/57.3)*(fsf*fsi/9)*.07;<BR>ypo+=Math.abs(Math.cos((deg1+
(ang1+j*cur))/57.3)*(fsf*fsi/9)*.07);<BR>if (aura)
{ ol.document.layers["a"+j+"f"+fsi].moveTo(xpo-(fsf*1.3*fsi/9)*.125,ypo-
(fsf*1.3*fsi/9)*.85); ct++;}<BR>ol.document.layers["s"+j+"f"+fsi].moveTo(xpo-
(fsf*fsi/9)*.125,ypo-(fsf*fsi/9)*.85);<BR>if (ypo>shi || xpo<0 || xpo>swi)
j=jlen;<BR>}<BR>}<BR>if (ie4 || ns5) {<BR>ret+="<DIV id='fork'>"; <BR>for
(j=1;j<jlen;j++)<BR>{<BR>ang1=Math.random()*jag*90-jag*45;<BR>if
(Math.random()+.05>zag) lang1=Math.random()*zag*90-zag*45; <BR>ang1-
=lang1;<BR>ct++;<BR>if (Math.random()*10>9.9) {fsfii=fsfi*.6; fsfi*=.95;
leg2();}<BR>xpo+=Math.sin((deg1+
(ang1+j*cur))/57.3)*fsfi*.07;<BR>ypo+=Math.cos((deg1+
(ang1+j*cur))/57.3)*fsfi*.07; fsbi=fsfi*1.3;<BR>if (ypo>shi || xpo<0 || xpo>swi)
j=jlen;<BR>if (aura) { ret+="<DIV id='arg"+j+"' style='position:absolute; left:"+(xpo-
fsbi*.125)+"; top:"+(ypo-fsbi*.85)+"; font-size:"+fsbi+"px; color:rgb(0,0,255); z-
Index:0' >.</DIV>"; ct++;}<BR>ret+="<DIV style='position:absolute; left:"+(xpo-
fsfi*.125)+"; top:"+(ypo-fsfi*.85)+"; font-size:"+fsfi+"px; color:"+bcolor+"; z-Index:1'
>.</DIV>";<BR>}ret+="</DIV>";<BR>}<BR>}</p><p>function leg2()
{<BR>xp=xpo; yp=ypo;<BR>lang1=zag*ion*(30+Math.random()*20-
10);<BR>//ion*=-1;<BR>lang2=0;<BR>deg2=deg1+ion*50+Math.random()*20-
10;<BR>klen=Math.random()*nbs/2+nbs/2; // //<BR>if (ns4) {<BR>for
(k=nbs/2;k<klen;k++) {<BR>ang2=Math.random()*jag*90-jag*45;<BR>if
(Math.random()+.05>zag) lang2=Math.random()*zag*90-zag*45; <BR>ang2-
=lang2;<BR>ct++;<BR>xp+=Math.sin((deg2+
(ang2+k*cur))/57.3)*(fsf*fsii/9)*.07;<BR>yp+=Math.cos((deg2+ang2)/57.3)*(fsf*fsii/
9)*.07;<BR>if (aura) { ol.document.layers["a"+k+"f"+fsii].moveTo(xp-
(fsf*1.3*fsii/9)*.125,yp-(fsf*1.3*fsii/9)*.85); ct+
+;}<BR>ol.document.layers["s"+k+"f"+fsii].moveTo(xp-(fsf*fsii/9)*.125,yp-
(fsf*fsii/9)*.85);<BR>if (yp>shi || xp<0 || xp>swi) k=klen;<BR>}<BR>}<BR>if (ie4 ||
ns5) {<BR>ret+="<DIV id='forki'>"; <BR>for (k=nbs/2;k<klen;k+
+)<BR>{<BR>ang2=Math.random()*jag*90-jag*45;<BR>if (Math.random()+.05>zag)
lang2=Math.random()*zag*90-zag*45; <BR>ang2-=lang2;<BR>ct+
+;<BR>xp+=Math.sin((deg2+
(ang2+k*cur))/57.3)*fsfii*.07;<BR>yp+=Math.cos((deg2+
(ang2+k*cur))/57.3)*fsfii*.07; fsbii=fsfii*1.3;<BR>if (yp>shi || xp<0 || xp>swi)
k=klen;<BR>if (aura) { ret+="<DIV id='arg"+k+"' style='position:absolute; left:"+(xp-
fsbii*.125)+"; top:"+(yp-fsbii*.85)+"; font-size:"+fsbii+"px; color:rgb(0,0,255); z-
Index:0' >.</DIV>"; ct++;}<BR>ret+="<DIV style='position:absolute; left:"+(xp-
fsfii*.125)+"; top:"+(yp-fsfii*.85)+"; font-size:"+fsfii+"px; color:"+bcolor+"; z-Index:1'
>.</DIV>";<BR>}<BR>ret+="</DIV>";<BR>}<BR>}</p><p>function
light()<BR>{ ol.moveTo(pageXOffset,pageYOffset);<BR>ol.visibility =
"show";<BR>if (flash) document.bgColor=skyFlash;<BR>Time2=setTimeout("ning()",
(Math.random()*1000+1000));<BR>}</p><p>function
lightie()<BR>{ ark.style.left=document.body.scrollLeft;<BR>ark.style.top=document.b
ody.scrollTop;<BR>ark.style.visibility = "visible";<BR>if (flash)
document.bgColor=skyFlash;<BR>Time2=setTimeout("ningie()",
(Math.random()*500+100));<BR>}</p><p>function ning()<BR>{<BR>if (flash)
document.bgColor=skyNorm;<BR>ol.visibility = "hide";<BR>if (Math.random()*3>2)
Time2=setTimeout("light()",(Math.random()*500+100));<BR>else {<BR>for
(fs=1;fs<10;fs++)<BR>for (i=1;i<nbs;i++) {<BR>if (aura)
ol.document.layers["a"+i+"f"+fs].moveTo(-100,-
100);<BR>ol.document.layers["s"+i+"f"+fs].moveTo(-100,-
100);<BR>}<BR>Time1=setTimeout("mainplot()",
(Math.random()*500+100))<BR>}<BR>}</p><p>function
ningie()<BR>{ ark.style.visibility = "hidden";<BR>if (flash)
document.bgColor=skyNorm;<BR>if (Math.random()*3>2)
Time2=setTimeout("lightie()",(Math.random()*500+100)); else
Time1=setTimeout("mainplot()",(Math.random()*500+100));<BR>}</p><p>function
format(f){ f+="";<BR>if (f.charAt(0)==".") f="0"+f;<BR>if (f.length==1)
f+=".00";<BR>if (f.length==3) f+="0";<BR>return f;<BR>}</p><p>function halt()
{<BR>if (Time1) {clearTimeout(Time1); Time1=null;}<BR>if (Time2)
{clearTimeout(Time2); Time2=null;}<BR>}</p><p>//--
><BR></SCRIPT><BR><STYLE TYPE="text/css"><BR>#frm {position:absolute;
left:20; top:10; width:100; height:100; visibility:visible; z-Index:951;<BR>color:blue;
overflow:clip; font-style:Times}<BR></STYLE></p><p></head></p><p><!--ADD
THE FOLLOWING EVENTS INTO THE BODY TAG ITSELF--><BR><BODY
onLoad="window.focus();init();"
onResize="document.location.href=document.location.href;" bgColor="#000000"
text="#FFFFFF" onUnload="halt();" link="#FFFF00" vlink="#00FF00"></p><p><!--
ADD THE BELOW SCRIPT INSIDE THE BODY SECTION, AT THE END--
><BR><SCRIPT language="Javascript"><BR><!--<BR>swi=(ie4)?
document.body.offsetWidth-17:window.innerWidth;<BR>shi=(ie4)?
document.body.offsetHeight-
4:window.innerHeight;<BR>cswi=swi/2;<BR>cshi=shi/2;</p><p>ret="<DIV id='ark'
style='position:absolute; left:0; top:0; width:"+swi+"; height:"+shi+"; visibility:visible;
z-index=1; overflow:hidden; clip:rect(0,"+(swi)+","+(shi)
+",0)'></DIV>";<BR>document.write(ret);</p><p>//--
><BR></SCRIPT></p><p></body><BR></html>

Efecto transicion cuadro a cuadro

<html><BR><head><BR><style><BR><!--
<BR>.intro{<BR>position:absolute;<BR>left:0;<BR>top:0;<BR>layer-background-
color:green;<BR>background-color:green;<BR>border:0.1px solid green;<BR>z-
index:10;<BR>}<BR>--><BR></style></p><p></head></p><p><body></p><p><div
id="p1" class="intro"></div><BR><div id="p2" class="intro"></div><BR><div
id="p3" class="intro"></div><BR><div id="p4" class="intro"></div><BR><div
id="p5" class="intro"></div><BR><div id="p6" class="intro"></div><BR><div
id="p7" class="intro"></div><BR><div id="p8" class="intro"></div><BR><div
id="p9" class="intro"></div><BR><div id="p10" class="intro"></div><BR><div
id="p11" class="intro"></div><BR><div id="p12" class="intro"></div><BR><div
id="p13" class="intro"></div><BR><div id="p14" class="intro"></div><BR><div
id="p15" class="intro"></div><BR><div id="p16" class="intro"></div><BR><div
id="p17" class="intro"></div><BR><div id="p18" class="intro"></div><BR><div
id="p19" class="intro"></div><BR><div id="p20" class="intro"></div><BR><div
id="p21" class="intro"></div><BR><div id="p22" class="intro"></div><BR><div
id="p23" class="intro"></div><BR><div id="p24" class="intro"></div><BR><div
id="p25" class="intro"></div></p><p><script></p><p>/*<BR>Boxing-away Script-
By Dynamic Drive (www.dynamicdrive.com)<BR>For full source code, 100's more
free DHTML scripts, and TOS,<BR>visit
http://www.dynamicdrive.com<BR>*/</p><p><BR>var espeed=300<BR>var
counter=1<BR>var temp=new Array()<BR>var temp2=new Array()</p><p>var
ns4=document.layers?1:0<BR>var ie4=document.all?1:0<BR>var
ns6=document.getElementById&&!document.all?1:0</p><p><BR>////////Code for
Netscape NS 4+////<BR>if (ns4){<BR>for (i=1;i<=25;i++)
{<BR>temp[i]=eval("document.p"+i+".clip")<BR>temp2[i]=eval("document.p"+i)<BR
>temp[i].width=window.innerWidth/5<BR>temp[i].height=window.innerHeight/5<BR
>}</p><p>for (i=1;i<=5;i++)<BR>temp2[i].left=(i-1)*temp[i].width</p><p>for
(i=6;i<=10;i++){<BR>temp2[i].left=(i-
6)*temp[i].width<BR>temp2[i].top=temp[i].height<BR>}</p><p>for (i=11;i<=15;i++)
{<BR>temp2[i].left=(i-
11)*temp[i].width<BR>temp2[i].top=2*temp[i].height<BR>}</p><p>for
(i=16;i<=20;i++){<BR>temp2[i].left=(i-
16)*temp[i].width<BR>temp2[i].top=3*temp[i].height<BR>}</p><p>for
(i=21;i<=25;i++){<BR>temp2[i].left=(i-
21)*temp[i].width<BR>temp2[i].top=4*temp[i].height<BR>}</p><p>}</p><p>functio
n erasecontainerns(){<BR>window.scrollTo(0,0)<BR>var
whichcontainer=Math.round(Math.random()*25)<BR>if
(whichcontainer==0)<BR>whichcontainer=1<BR>if (temp2[whichcontainer].visibility!
="hide")<BR>temp2[whichcontainer].visibility="hide"<BR>else{<BR>while
(temp2[whichcontainer].visibility=="hide")
{<BR>whichcontainer=Math.round(Math.random()*25)<BR>if
(whichcontainer==0)<BR>whichcontainer=1<BR>}<BR>temp2[whichcontainer].visibi
lity="hide"<BR>}</p><p>if
(counter==25)<BR>clearInterval(beginerase)</p><p>counter++<BR>espeed-
=10</p><p>}</p><p><BR>////////End code for NS 4+////////</p><p><BR>///////////Code
for IE 4+ and NS6/////////</p><p>if (ie4||ns6){<BR>var containerwidth=ns6?
parseInt(window.innerWidth)/5-3 : parseInt(document.body.clientWidth/5)<BR>var
containerheight=ns6?parseInt(window.innerHeight)/5-2 :
parseInt(document.body.offsetHeight/5)</p><p>for (i=1;i<=25;i++)
{<BR>temp[i]=ns6?document.getElementById("p"+i).style :
eval("document.all.p"+i+".style")<BR>temp[i].width=containerwidth<BR>temp[i].heig
ht=containerheight<BR>}</p><p>for (i=1;i<=5;i++)<BR>temp[i].left=(i-
1)*containerwidth</p><p>for (i=6;i<=10;i++){<BR>temp[i].left=(i-
6)*containerwidth<BR>temp[i].top=containerheight<BR>}</p><p>for (i=11;i<=15;i+
+){<BR>temp[i].left=(i-
11)*containerwidth<BR>temp[i].top=2*containerheight<BR>}</p><p>for
(i=16;i<=20;i++){<BR>temp[i].left=(i-
16)*containerwidth<BR>temp[i].top=3*containerheight<BR>}</p><p>for
(i=21;i<=25;i++){<BR>temp[i].left=(i-
21)*containerwidth<BR>temp[i].top=4*containerheight<BR>}<BR>}</p><p>function
erasecontainerie(){<BR>window.scrollTo(0,0)<BR>var
whichcontainer=Math.round(Math.random()*25)<BR>if
(whichcontainer==0)<BR>whichcontainer=1<BR>if (temp[whichcontainer].visibility!
="hidden")<BR>temp[whichcontainer].visibility="hidden"<BR>else{<BR>while
(temp[whichcontainer].visibility=="hidden")
{<BR>whichcontainer=Math.round(Math.random()*25)<BR>if
(whichcontainer==0)<BR>whichcontainer=1<BR>}<BR>temp[whichcontainer].visibili
ty="hidden"<BR>}</p><p>if (counter==25){<BR>clearInterval(beginerase)<BR>if
(ns6){<BR>for (i=1;i<26;i+
+)<BR>temp[i].display="none"<BR>}<BR>}<BR>counter++<BR>espeed-
=10</p><p>}</p><p>/////////End IE 4+ code////////</p><p>if
(ns4)<BR>beginerase=setInterval("erasecontainerns()",espeed)<BR>else if (ie4||ns6)
{<BR>beginerase=setInterval("erasecontainerie()",espeed)<BR>}</p><p><BR></scrip
t></p><p></body><BR></html>
Efecto barrido hacia arriba

<HTML><BR><HEAD><TITLE>Efecto
apertura</TITLE><BR></HEAD><BR><BODY bgColor=#ffffff leftMargin=0
rightMargin=0 topMargin=0></p><p><style><BR><!--
<BR>.curtain{<BR>position:absolute;<BR>left:0;<BR>top:0;<BR>layer-background-
color:004080;<BR>background-color:004080;<BR>border:0.1px solid
PURPLE<BR>}<BR>--><BR></style></p><p><div id="c1"
class="curtain"></div><div id="c2" class="curtain"></div><BR><script
language="JavaScript1.2"></p><p><BR>var speed=15<BR>var temp=new
Array()<BR>var temp2=new Array()<BR>if (document.layers){<BR>for (c=1;c<=2;c+
+)
{<BR>temp[c]=eval("document.c"+c+".clip")<BR>temp2[c]=eval("document.c"+c)<B
R>temp[c].width=window.innerWidth<BR>temp[c].height=window.innerHeight/2<BR
>temp2[c].top=(c-1)*temp[c].height<BR>}<BR>}<BR>else if (document.all)
{<BR>var curtainbottom=document.body.offsetHeight/2,curtaintop=0<BR>for
(c=1;c<=2;c++)
{<BR>temp[c]=eval("document.all.c"+c+".style")<BR>temp[c].width=document.body.
clientWidth<BR>temp[c].height=document.body.offsetHeight/2<BR>temp[c].top=(c-
1)*parseInt(temp[c].height)<BR>}<BR>}</p><p>function openit()
{<BR>window.scrollTo(0,0)<BR>if (document.layers){<BR>temp[1].bottom-
=speed<BR>temp[2].top+=speed<BR>if
(temp[1].bottom<=0)<BR>clearInterval(stopit)<BR>}<BR>else if (document.all)
{<BR>curtainbottom-=speed<BR>temp[1].clip="rect(0 auto+"+curtainbottom+"
0)"<BR>curtaintop+=speed<BR>temp[2].clip="rect("+curtaintop+" auto auto)"<BR>if
(curtainbottom<=0)<BR>clearInterval(stopit)<BR>}<BR>}<BR>function gogo()
{<BR>stopit=setInterval("openit()",60)<BR>}<BR>gogo()<BR></script><BR></body
><BR></html><BR>

Efecto fondo deslizandose

<html><BR><head></p><p> <title>Cross-browser Dynamic HTML Scripts -


BgSlide</title><BR><meta name="Author" content="Thomas Brattli
(webmaster@bratta.com)"><BR><meta name="KeyWords" content="Dynamic HTML
Script"><BR><meta name="Description" content=""><BR><style
type="text/css"><BR>TD{font-family:arial,helvetica; font-
size:12px}<BR>BODY{background-color:white; font-family:arial,helvetica; font-
size:12px}<BR>A{color:Navy; text-decoration:none}<BR>A:hover{color:red; text-
decoration:underline}<BR>A:visited:{color:#808080}<BR>H3{font-size:20px; font-
weight:bold;}<BR>SPAN.clHead{font-size:20px; font-
weight:bold;}<BR>.clBg{background-color:Silver; padding:2px; font-size:20px; font-
weight:bold; color:Navy}<BR>TD.clInfo{font-family:arial,helvetica; font-size:12px;
color:#333333}<BR>DIV{font-family:arial,helvetica; font-size:12px}<BR>P{font-
family:arial,helvetica; font-size:12px}<BR>PRE{font-family:Courier new; font-
size:11px; color:red}<BR>CODE{font-family:Courier new; font-size:12px;
color:red}<BR>.clSmall{font-size:11px}<BR></style></p><p></p><p><style
type="text/css"><BR>#divContent{position:absolute; z-index:20;
width:100%}<BR>#divBg{position:absolute; top:100; width:100;
visibility:hidden}<BR></style></p><p><script type="text/javascript"
language="JavaScript"></p><p>/*******************************************
*************************************<BR>Copyright (C) 1999 Thomas
Brattli<BR>This script is made by and copyrighted to Thomas Brattli at
www.bratta.com<BR>Visit for more great scripts. This may be used freely as long as
this msg is intact!<BR>I will also appriciate any links you could give
me.<BR>***************************************************************
*****************/<BR>//Default browsercheck, added to all scripts!<BR>function
checkBrowser(){<BR> this.ver=navigator.appVersion<BR>
this.dom=document.getElementById?1:0<BR> this.ie5=(this.ver.indexOf("MSIE
5")>-1 && this.dom)?1:0;<BR> this.ie4=(document.all && !this.dom)?1:0;<BR>
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;<BR>
this.ns4=(document.layers && !this.dom)?1:0;<BR> this.bw=(this.ie5 || this.ie4 ||
this.ns4 || this.ns5)<BR> return this<BR>}<BR>bw=new
checkBrowser()</p><p>//How do you want the slide to work?<BR>// 0 = Slide in from
the left<BR>// 1 = Slide in from the top<BR>// 2 = Slide in from top and
left<BR>bgWorks=2 </p><p>//These are the variables you have to set:<BR>var
bgXmove=10 //How many pixels should it move every step from the left? <BR>var
bgYmove=10 //How many pixels should it move every step from the top? <BR>var
bgSpeed=50 //Timer speed (in milliseconds)</p><p>//Do you want the background
image to move with the page if the user scroll the page? (true or false || 0 or 1)<BR>var
moveOnScroll=true</p><p>/***********************************************
*********************************<BR>Object
constructor<BR>********************************************************
************************/<BR>function
makeBgObj(obj,speed,xmove,ymove,works){<BR> this.el=bw.dom?
document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?
document.layers[obj]:0; <BR> this.css=bw.dom || bw.ie4?this.el.style:bw.ns4?
this.el:0;<BR> this.go=0; this.slideBgIn=b_slideBgIn; this.speed=speed;
this.xmove=xmove; this.ymove=ymove<BR> this.slideBgDown=b_slideBgDown;
this.slideBg=b_slideBg; this.works=works; <BR> this.width=bw.ns4?
this.css.document.width:bw.ns5?this.el.childNodes[0].width:this.el.offsetWidth;<BR>
this.height=bw.ns4?this.css.document.height:bw.ns5?
this.el.childNodes[0].height:this.el.offsetHeight;<BR> this.moveIt=b_moveIt;
this.obj = obj + "Object"; eval(this.obj + "=this"); return this<BR>}<BR>function
b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}<BR>//Bg
out<BR>function b_slideBgIn(){<BR> if(this.x<-this.xmove){<BR>
this.moveIt(this.x+this.xmove,this.y)<BR>
setTimeout(this.obj+".slideBgIn()",this.speed)<BR> }<BR>}<BR>function
b_slideBgDown(){<BR> if(this.y<-this.ymove){<BR>
this.moveIt(this.x,this.y+this.ymove)<BR>
setTimeout(this.obj+".slideBgDown()",this.speed)<BR> }<BR>}<BR>function
b_slideBg(){<BR> if(this.works==0){<BR> this.moveIt(-
this.width,0)<BR> this.slideBgIn() <BR> }else if(this.works==1)
{<BR> this.moveIt(0,-this.height)<BR> this.slideBgDown()
<BR> }else{<BR> this.moveIt(-this.width,-this.height)<BR>
this.slideBgDown(); this.slideBgIn() <BR> }<BR>
this.css.visibility='visible'<BR>}<BR>/**************************************
******************************************<BR>Inits the page, and start the
slide<BR>**************************************************************
******************/<BR>function slideBgInit(){<BR> oBg=new
makeBgObj('divBg',bgSpeed,bgXmove,bgYmove,bgWorks)<BR>
oBg.slideBg()<BR>}</p><p>if(bw.bw)
onload=slideBgInit;</p><p></script><BR></HEAD><BR><BODY bgcolor="White"
onload=slideBgInit();></p><p><BR><div id="divBg"><BR><img
src="ejemplos/fondo.jpg" width=301 height=174 alt="Córdoba"
border=0><BR></div></p><p><BR> <BR><script><BR>
if(document.all)document.styleSheets(0).addRule("TD.clInfo", "font-
size:11px");<BR></script></p><p>A partir de aquí puedes incluir el contenido que
quieas<BR></div><BR></BODY><BR></HTML>
Efecto zoom texto

<HTML><BR><HEAD><BR><TITLE>Crossbrowser
Zoomtext</TITLE><BR><meta name="Author" content="Thomas Brattli
(roskilde@bratta.com)"><BR><meta name="KeyWords" content="DHTML, HTML,
dhtml, html, demos, Javascript, VBscript, , Zoomtext, fadetext, Crossbrowser,
Netscape4.0, IE4.0, Internet explorer, Dynamic HTML"><BR><meta
name="Description" content="Crossbrowser Dynamic HTML zoomtext, fadetext,
change colors of text!!!"></p><p><script><BR>/* Este script fue hecho por Bratta en
www.bratta.com y puede ser usado<BR>gratuitamente siempre que se deje este mensaje
(en Ingles) intecto.<BR>Agradecere los enlaces a mi pagina</p><p>Si quiere que el
texto aparezca en otra parte de la pagina entonces<BR>modifique el estilo del
TAG.</p><p>Variables:<BR>Primero el texto: */<BR> text=new
Array('Bienvenidos','a el','Sitio','de','Gabriel Marcelo','Rodríguez')</p><p>// numero de
textos<BR> var numText=6<BR> <BR>// colores:<BR>// el primer colos sera
el color del texto cuando hace el zoom<BR> color=new
Array('#E8E8E8','#C2C2C2','#8E8E8E','#424242','#202020')<BR> <BR>// numero
de colores<BR> var numColors=5<BR> <BR>//tama¤o del zoom al
finalizar<BR> var endSize=70</p><p>//Velocidad del zoom (en
milisegundos)<BR> var Zspeed=30</p><p>//Velocidad de cambio en los
colores<BR> var Cspeed=200</p><p>//Fuente<BR> var font='Arial
Black'<BR> <BR>// Esconder el texto cuando acaba el zoom? (true o false)<BR>
var hide=true</p><p></p><p><BR>// Texto original</p><p>/*This script is made by
bratta at www.bratta.com and can be used freely<BR>as long as this msg is instact. I
would appriciate any links to my
page.</p><p>###########################################################
#############<BR>####################################################
####################<BR>#############################################
###########################<BR>If you want the text to appear differently on
anothe place on the page<BR>or anything set that in the style tag of the zoom layer.
</p><p>Here are the variables you have to set:<BR>First the text: (it will stop and
fade/change the colors on the last one)<BR> text=new
Array('www','bratta','com','www.bratta.com')<BR> <BR>set the number of
text's<BR> var numText=4<BR> <BR>Now the colors:<BR>all you have to
do is set the color you want to have in here: <BR>(the first color will be the color that
the text is when it zooms.)<BR> color=new
Array('#E8E8E8','#C2C2C2','#8E8E8E','#424242','#202020')<BR> <BR>set the
number of colors:<BR> var numColors=5<BR> <BR>set the size you want the
zoom to end at:<BR> var endSize=70</p><p>Set the speed you want it to zoom in
(in milliseconds)<BR> var Zspeed=30</p><p>Set the speed you want it too change
colors in<BR> var Cspeed=200</p><p>Set font<BR> var font='Arial
Black'<BR> <BR>do you want it to hide when its done? (true or false)<BR>
var hide=true<BR> <BR>You shouldn't really have to set anything below this
point<BR>#############################################################
#########<BR>########################################################
##############<BR>###################################################
###################*/</p><p></p><p>var size=10<BR>var
gonum=0<BR>/*Browsercheck and settings
vars<BR>##############################################################
########*/<BR>if (document.all) {<BR> n=0<BR> ie=1<BR>
zoomText='document.all.zoom.innerText=text[num]'<BR>
zoomSize='document.all.zoom.style.fontSize=size'<BR> closeIt=""<BR>
fadeColor="document.all.zoom.style.color=color[num]"<BR> }<BR>if
(document.layers) {<BR> n=1;ie=0<BR> zoomText=""<BR>
zoomSize="document.zoom.document.write('<p align=\"center\" style=\"font-
family:'+font+'; font-size:'+size+'px; color:'+color[0]+'\">'+text[num]+'</p>')"<BR>
closeIt="document.zoom.document.close()"<BR>
fadeColor="document.zoom.document.write('<p align=\"center\" style=\"font-
family:'+font+'; font-size:'+endSize+'px; color:'+color[num]+'\">'+text[numText-
1]+'</p>')"<BR> }</p><p>/*The functions for zooming
text.<BR>##############################################################
######*/<BR>function zoom(num,fn){<BR> if (size<endSize){<BR>
eval(zoomText)<BR> eval(zoomSize)<BR> eval(closeIt)<BR>
size+=5;<BR> setTimeout("zoom("+num+",'"+fn+"')",Zspeed)<BR> }
else{<BR> eval(fn);<BR> }<BR>}<BR>/*The functions for
fading/changing colors on
text<BR>##############################################################
######*/<BR>function fadeIt(num){<BR> if (num<numColors){<BR>
eval(fadeColor)<BR> eval(closeIt)<BR> num+=1;<BR>
setTimeout("fadeIt("+num+")",Cspeed)<BR> }else{<BR> hideIt()<BR>
}<BR>}<BR>/*This is the function that hides the layer after the zoom/color
change<BR>############################################################
########*/<BR>function hideIt(){<BR> if(hide){<BR>
if(ie)document.all.zoom.style.visibility="hidden"<BR>
if(n)document.layers.zoom.visibility="hidden"<BR> }<BR>}<BR>/*This is the
functions that calls the right function...or
something :}<BR>#######################################################
#############*/<BR>function init(){<BR> if(ie){<BR>
document.all.zoom.style.color=color[0]<BR>
document.all.zoom.style.fontFamily=font}<BR> go(0) <BR>}<BR>function
go(num){<BR> gonum+=1<BR> size=10<BR> if(num<numText){<BR>
zoom(num,'go('+gonum+')')<BR> }else{<BR> fadeIt(0)<BR> }
<BR>}<BR>//##########################################################
##########<BR></script><BR></HEAD><BR><BODY onload="init()"
bgcolor="Black" text="White" link="White"><BR><!-- Este es el zoom, para cambiar
la apariencia cambia el parametro<BR>que desees. Recuerda que solo puedes cambiar
width, top, height,<BR>left --><BR><div id="zoom" align="center" style="position:
absolute; top: 150; left: 12; width: 742; height:
19"></div></p><p><center><BR><H1>
</H1></p><p></center><BR></BODY><BR></HTML><BR>

Efecto de cambio de color letra por letra en un texto

<html>
</p><p><head><BR><title>Free JavaScripts provided by The JavaScript Source
</title><BR>
</head></p><p><BODY bgcolor="#000000"></p><p>
<SCRIPT LANGUAGE="JavaScript">
</p><p><!-- Begin<BR>text = "Gamarod Versión 2.0";
// The text to scroll<BR>color1 = "blue";
// original text color<BR>color2 = "white";
// new character color<BR>fontsize = "8";
// font size of text <BR>speed = 200;
// how fast to rotate to next character <BR>
// time is in milliseconds, (i.e. 1000 = 1 second)</p><p>i = 0;
<BR>if (navigator.appName == "Netscape") {<BR>document.write("<layer id=a
visibility=show></layer><br><br><br>");<BR>
}
<BR>else {<BR>document.write("<div id=a></div>");<BR>}<BR>function
changeCharColor() {<BR>if (navigator.appName == "Netscape")
{<BR>document.a.document.write("<center><font size =" + fontsize + "><font color="
+ color1 + ">");
<BR>for (var j = 0; j < text.length; j++) {<BR>if(j == i)
{<BR>document.a.document.write("<font color=" + color2 + ">" + text.charAt(i) +
"</font>");<BR>
}
<BR>else {<BR>document.a.document.write(text.charAt(j));
<BR> }
<BR>}<BR>document.a.document.write('</font></font></center>');<BR>document.a.
document.close();
<BR>}<BR>if (navigator.appName == "Microsoft Internet Explorer") {<BR>str =
"<center><font size=" + fontsize + "><font color=" + color1 + ">";
<BR>for (var j = 0;
j < text.length; j++) {<BR>if( j == i) {<BR>str += "<font color=" + color2 + ">" +
text.charAt(i) + "</font>";
<BR>
}
<BR>else {<BR>str += text.charAt(j);<BR> }<BR>}<BR>str +=
"</font></font></center>";
<BR>a.innerHTML = str;
<BR>}<BR>(i == text.length) ? i=0 : i++;
// reset after going through all letters<BR>}<BR>setInterval("changeCharColor()",
speed);
<BR>
// End -->
<BR></script></p><p><p></p><p></body></p><p></html><BR>

Efecto máquina de escribir

<!-- PRIMER PASO: Copiar dentro del tag BODY --></p><p><script


language="JavaScript"><BR><!--<BR>var isIE4 =
(navigator.appVersion.charAt(0)>=4 && (navigator.appVersion).indexOf("MSIE") !=
-1); <BR>var isNN4 = (navigator.appVersion.charAt(0)>=4 &&
(navigator.appName).indexOf("Netscape") != -1); <BR>tID = 0;<BR>i = 0;<BR>spd =
50; <BR>str= "La máquina de escribir fue creada por Remington en el año 1873. Un
siglo después la computadora se apoderaría del trono."<BR>function typeLayer()
{<BR> if(i > str.length){<BR> clearTimeout(tID);<BR> } else {<BR> msg =
str.substring(0,i);<BR> if(isNN4 == true){<BR>
document.layers['layer1'].document.write('<font face="Arial"
color="#004080">'+msg.fontsize(2)+'</font>');<BR>
document.layers['layer1'].document.close();<BR> }<BR> if(isIE4 == true){<BR>
layer1.innerHTML = '<strong><font face="Arial"
color="#004080">'+msg.fontsize(2)+'</font></strong>';<BR> }<BR> i++;<BR> tID
= setTimeout("typeLayer()",spd);<BR> }<BR>}<BR>//--><BR></script><BR><span
id="layer1" style="position: absolute; left: 10px; top: 20px"></span></p><p><!--
SEGUNDO PASO: Copiar dentro del tag BODY --></p><p><body
onload="typeLayer()" onunload="clearTimeout(tID)"><BR>

Efecto degrada

<html><BR><head><BR><title>Degradee</title><BR></head><BR><script
LANGUAGE="JavaScript"><BR><!--<BR>function toHex(dec) {<BR>var
hexCharacters = "0123456789ABCDEF"<BR>if (dec < 0)<BR>return "00"<BR>if
(dec > 255)<BR>return "FF"<BR>var i = Math.floor(dec / 16)<BR>var j = dec %
16<BR>return hexCharacters.charAt(i) + hexCharacters.charAt(j)<BR>}<BR>function
setbgColor(red, green, blue) {<BR>document.bgColor = "#" + toHex(red) +
toHex(green) + toHex(blue)<BR>}</p><p>function fade(sred, sgreen, sblue, ered,
egreen, eblue, step) {</p><p>for(var i = 0; i <= step; ++i) {<BR>// set current red
descriptor<BR>var red = Math.floor(sred * ((step - i) / step) + ered * (i / step))<BR>//
set current green descriptor<BR>var green = Math.floor(sgreen * ((step - i) / step) +
egreen * (i / step))<BR>// set current blue descriptor<BR>var blue = Math.floor(sblue *
((step - i) / step) + eblue * (i / step))<BR>// set background color according to
descriptors<BR>setbgColor(red, green, blue)<BR>}<BR>}<BR>//
--><BR></script></p><p><BR><body bgcolor="#FFFFFF" text="#000000"
bgcolor="#000000" link="#3870FF" vlink="#3870FF"<BR>alink="#3870FF"
onLoad="fade(255, 255, 255, 0, 50, 150, 32)"<BR>onUnload="fade(0, 65, 150, 255,
255, 255, 32)" bgproperties="fixed"><BR></body><BR></html></p><p>

 //Este script dirige al usuario a la escena 2 cuando se libera goScene_btn

 goScene_btn.onRelease = function (){

 gotoAndStop("Escena 2", 1);

 };

 En el script que acaba de escribir, ha utilizado el método onRelease para el objeto de


botón. La función gotoAndStop es una función de control de la línea de tiempo que permite
especificar el número de escena y de fotograma. En este caso, ha especificado el fotograma 1.

1. //la función dirige al usuario a la escena 1 cuando se libera la instancia


back_btn.
2. back_btn.onRelease = function (){
3. gotoAndStop("Escena 1", 1);
4. };
5. Las únicas diferencias entre esta función y la función de la escena 1 son el nombre del
botón y el nombre de la escena.
6. En el panel Escena, seleccione Escena 1.

Reproducción de un clip de película en tiempo de ejecución


Puede configurar el documento para reproducir un clip de película en tiempo de ejecución. Con el
método attachMovie() puede adjuntar una instancia de un clip de película en el panel Biblioteca
al escenario, aunque no haya colocado una instancia en el escenario.

Con el método attachMovie(), debe exportar el símbolo de ActionScript y asignarle un


identificador de vinculación exclusivo, que es distinto del nombre de la instancia.

1. En el panel Biblioteca, haga clic con el botón derecho del ratón en el símbolo MCTrio y
seleccione Vinculación en el menú contextual.

2. En el cuadro de diálogo Propiedades de vinculación, seleccione Exportar para ActionScript.


3. En el cuadro de texto Identificador, verifique que MCTrio aparezca como el nombre de la
vinculación.
4. Verifique que Exportar en primer fotograma esté seleccionado y, a continuación, haga clic
en Aceptar.

Los clips de película que se exportan para usarlos con ActionScript se cargan, de forma
predeterminada, antes del primer fotograma del archivo SWF que los contiene. Esto puede
producir cierta demora en la reproducción del primer fotograma. Cuando se asigna un
identificador de vinculación a un elemento, puede especificar que el clip de película se
cargue en el primer fotograma para evitar demoras de reproducción.
Uso del método attachMovie() para reproducir un clip de película
Ahora utilizará el método attachMovie() para cargar el clip de película y proporcionar un nombre
de instancia al símbolo. Puesto que la instancia del símbolo no existe en el escenario, creará el
nombre de instancia mediante programación.

1. En la línea de tiempo, seleccione el fotograma 1 de la capa Acciones.

2. En el panel Script del panel Acciones, coloque el punto de inserción al final de la última
línea de código. Presione Intro o Retorno y, a continuación, escriba lo siguiente para
añadir un comentario y crear una función:
3. //la función reproduce trio_mc cuando se libera la instancia
attachMovie_btn.
4. attachMovie_btn.onRelease = function(){

A continuación, especificará las acciones que realiza la función: reproduce el clip de


película en la línea de tiempo raíz, que es la línea de tiempo principal. En el script, hará
referencia al clip de película mediante el nombre del identificador de vinculación del cuadro
de diálogo Propiedades de vinculación (MCTrio).

Además, aunque no haya colocado una instancia del símbolo MCTrio en el escenario,
utilizará ActionScript para crear un nombre de instancia para el símbolo. El nombre de
instancia que especificará es trio_mc.

5. Con el punto de inserción al final de la última línea del script, presione Intro o Retorno. A
continuación, escriba lo siguiente:

6. _root.attachMovie("MCTrio", "trio_mc", 1);

El número 1 del script que acaba de escribir hace referencia a la profundidad de la capa en
la que debe reproducirse el clip de película.

Cada instancia de clip de película tiene su propio eje z (profundidad) que determina el
orden de apilamiento de un clip de película dentro del archivo SWF o del clip de película
del que depende. Cuando se crea un nuevo clip de película en tiempo de ejecución con el
método attachMovie(), siempre se especifica una profundidad para el nuevo clip como un
parámetro del método.
Para obtener más información sobre el método attachMovie(), consulte attachMovie()
en el Diccionario de ActionScript de la Ayuda.

Definición de las coordenadas de escenario de clip de película


Además del eje z para el clip de película, debe especificar las coordenadas x e y para colocar el
clip de película dentro del área del escenario en tiempo de ejecución.

 Presione Intro o Retorno después de la última línea del panel Script y escriba lo siguiente:

 trio_mc._x = 275;

 trio_mc._y = 200;

 };

Descarga del clip de película


Después de que se reproduzca el clip de película, necesita un modo de eliminar el clip de película
del escenario cuando el usuario vaya a la escena 2. Puede modificar el script de goScene_btn para
"descargar" el clip de película.

1. En la línea de tiempo, seleccione el fotograma 1 de la capa Acciones. A continuación, haga


clic al final de la siguiente línea del script en el panel Script, dentro de la función que dirige
al usuario a la escena 2, para colocar el punto de inserción:

2. gotoAndStop("Escena 2", 1);


3. Presione Intro o Retorno y escriba el script siguiente, que descarga el clip de película
cuando se ejecuta la función, a fin de que el clip de película deje de reproducirse cuando el
usuario vaya a la escena 2:
4. unloadMovie("trio_mc");

La función completa de goScene_btn debe tener el aspecto siguiente:


//Este script dirige al usuario a la escena 2 cuando se libera la instancia
goScene_btn
goScene_btn.onRelease = function() {
gotoAndStop("Escena 2", 1);
unloadMovie("trio_mc");
};

El script completo debe tener el siguiente aspecto:


//detener la cabeza lectora en el fotograma 1
stop();

//Este script dirige al usuario a la escena 2 cuando se libera la instancia


goScene_btn
goScene_btn.onRelease = function (){
gotoAndStop("Escena 2", 1);
unloadMovie("trio_mc");
};

//Esta función reproduce trio_mc cuando se libera la instancia


attachMovie_btn.
attachMovie_btn.onRelease = function(){
_root.attachMovie("MCTrio", "trio_mc", 1);
trio_mc._x = 275;
trio_mc._y = 200;

También podría gustarte