harry potter - efectos visuales y de imagenes

EFECTOS VISUALES Y DE IMAGEN.

CÓDIGO 0151

Cambia de imagen al pasar el ratón.

Cuando pasa el ratón sobre una imagen aparece otra en su lugar.

<html>
                                    <head>
                                    <title>Cambia de imagen al pasar el raton sobre ella</title>
                                    <script language="JavaScript" type="text/javascript">
                                    if (document.images)
                                    {
                                    var maker1 = new Image();
                                    maker1.src="http://www.uterra.com/images_uterra/demos_script/demo_script0002.jpg";
                                    }
                                    </script>
                                    </head>
                                    <body>
                                    <a href="http://www.uterra.com" onMouseOver="if (document.images)
                                    document.maker1.src='http://www.uterra.com/images_uterra/demos_script/demo_script0001.jpg';"
                                    onMouseOut="if (document.images) document.maker1.src='http://www.uterra.com/images_uterra/demos_script/demo_script0002.jpg';">
                                    <img src="http://www.uterra.com/images_uterra/demos_script/demo_script0003.jpg" width="125" height="125"
                                    name="maker1" border="3" alt="pulsa" style="border-style: solid; border-color: #FF0000"></a>
                                    </body>
                                    </html>

Ver demostración

CÓDIGO 0152

Refleja una imagen en el agua.

Curioso efecto de reflejo de una imagen en el agua.

<html> <head> <title>Reflejo de una imagen en el agua</title> </head> <body> <center> <img id="reflect" src="http://www.uterra.com/images_uterra/demos_script/demo_script0007.jpg" width="125" height="125"><br> <script language="JavaScript1.2"> function f1(){ setInterval("mdiv.filters.wave.phase+=10",100); } if (document.all){ document.write('<img id=mdiv src="'+document.all.reflect.src+'" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()">') window.onload=f1 } </script> </center> </body> </html>

Ver demostración

CÓDIGO 0153

Imagen que cambia cada cierto tiempo.

Con este código puedes tener dos imágenes que se cambia de manera alternativa continuamente.

<html> <head> <title>Imagenes que cambian cada cierto tiempo</title> <script language="JavaScript"> var estado=true; setTimeout("cambio()",500); function cambio() { estado=!estado; if(estado==true) img.src="http://www.uterra.com/images_uterra/demos_script/demo_script0003.jpg" else img.src="http://www.uterra.com/images_uterra/demos_script/demo_script0004.jpg" setTimeout("cambio()",500); } </script> </head> <body> <img name="img" src="http://www.uterra.com/images_uterra/demos_script/demo_script0004.jpg" width="125" height="125"> </body> </html>

Ver demostración

CÓDIGO 0154

Efecto de marca de agua.

Este script hace que puedas tener una imagen siempre visible con independencia de si el visitante desplaza la página, la imagen siempre aparece en el borde inferior derecho.

<html> <head> <title>Marca de Agua</title> <script language="JavaScript"> var IW= 0; var IH= 0; var PX= 0; var PY= 0; var ZIN= 0; var us= null; var IMGW= 125; var IMGH= 125; var LSAFETY= 18; var TSAFETY= 14; function branding() { oldIW= IW; oldIH= IH; oldPX= PX; oldPY= PY; if (navigator.appName == 'Netscape') { if ((window.innerHeight != oldIH)||(window.innerWidth != oldIW)||(window.pageXOffset != oldPX)||(window.pageYOffset != oldPY)) { if (us == null) { for (i=0; i<document.layers.length; i++) { us= document.layers[i]; if (us.id == "Valley") break; } } if (us != null) { us.visibility= "hide"; IH= window.innerHeight; IW= window.innerWidth; PX= window.pageXOffset; PY= window.pageYOffset; (IH > IMGH) ? us.top= (IH+PY-(IMGH+TSAFETY)) : us.top= 0; (IW > IMGW) ? us.left= (IW+PX-(IMGW+LSAFETY)) : us.left= 0; //alert('document.layers.length: ' + document.layers.length); for (i=0; i<document.layers.length; i++) { templay= document.layers[i]; // alert('document.layers[' + i + '].id: ' + document.layers[i].id); if (templay.zIndex > ZIN) ZIN= (templay.zIndex + 1); } us.zIndex= ZIN; us.visibility= "show"; } } } else{ if (navigator.appVersion.indexOf("Mac") == -1) { if ((document.body.clientHeight != oldIH)||(document.body.clientWidth != oldIW)||(document.body.scrollLeft != oldPX)||(document.body.scrollTop != oldPY)) { alldivs= document.all.tags("DIV"); if (us == null){ for (i=0; i<alldivs.length; i++) { us= alldivs(i); if (us.id == "Valley") break; } } if (us != null){ us.style.display= "none"; IH= document.body.clientHeight; IW= document.body.clientWidth; PX= document.body.scrollLeft; PY= document.body.scrollTop; us.style.top= (IH+PY-(IMGH+TSAFETY)+12); us.style.left=(IW+PX-(IMGW+LSAFETY)+15); for (i=0; i<alldivs.length; i++){ templay= alldivs(i); if (templay.style.zIndex > ZIN) us.style.zindex= (templay.style.zIndex + 1); } us.style.display= ""; } } } } } if ((document.all) || (document.layers)){ setInterval("branding()",100); } </SCRIPT> </head> <BODY> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <p><font color="#000000">UTERRA.COM</font></p> <font color="#000000">UTERRA.COM</font></p> <DIV CLASS="Watermark" ID="Watermark" STYLE="position:absolute;top:0;visibility:hide;" ALIGN="right"> <A HREF="http://www.uterra.com"><IMG SRC="http://www.uterra.com/images_uterra/demos_script/demo_script0007.jpg" ALT="UTERRA.COM" WIDTH=125 HEIGHT=125 BORDER=0></A> </DIV> </BODY> </html>

Ver demostración

CÓDIGO 0155

Efecto de burbujas.

Con este script podrás crear un atractivo efecto de burbujas con imágenes para tu Web.

<html> <head> <TITLE>Llamativo efecto de burbujas</TITLE> </head> <body> <p align="center"> <script language="JavaScript1.2"> var no = 15; // numero de imagenes que se desplazan var speed = 30; // velocidad del desplazamiento var snow = new Array(); snow[0] = "http://www.uterra.com/images_uterra/demos_script/demo_script0004.jpg" snow[1] = "http://www.uterra.com/images_uterra/demos_script/demo_script0005.jpg" snow[2] = "http://www.uterra.com/images_uterra/demos_script/demo_script0006.jpg" var ns4up = (document.layers) ? 1 : 0; // browser sniffer var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 800, doc_height = 1800; if (ns4up||ns6up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); j = 0; for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables if (ns4up) { // set layers if (i == 0) { document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><img src=""+ snow[j] + "" border="0"></layer>"); } else { document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><img src=""+ snow[j] + "" border="0"></layer>"); } } else if (ie4up||ns6up) { if (i == 0) { document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;"><img src="" + snow[j] + "" border="0"></div>"); } else { document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;"><img src="" + snow[j] + "" border="0"></div>"); } } if (j == (snow.length-1)) { j = 0; } else { j += 1; } } function snowNS() { // Netscape main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] -= sty[i]; if (yp[i] < -50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = doc_height; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = self.innerWidth; doc_height = self.innerHeight; } dx[i] += stx[i]; document.layers["dot"+i].top = yp[i]; document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowNS()", speed); } function snowIE_NS6() { // IE main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] -= sty[i]; if (yp[i] < -50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = doc_height; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = ns6up?window.innerWidth-5:document.body.clientWidth; doc_height = ns6up?window.innerHeight-5:document.body.clientHeight; } dx[i] += stx[i]; if (ie4up){ document.all["dot"+i].style.pixelTop = yp[i]; document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]); } else if (ns6up){ document.getElementById("dot"+i).style.top=yp[i]; document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]); } } setTimeout("snowIE_NS6()", speed); } if (ns4up) { snowNS(); } else if (ie4up||ns6up) { snowIE_NS6(); } </script> <a href="http://www.uterra.com">www.uterra.com</a> </body> </html>

Ver demostración

CÓDIGO 0156

Efecto de apertura.

Con este script podrás simular un efecto de apertura en tu página similar a una persiana.

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

Ver demostración

Página anterior

Página siguiente