Arquitectura de Sistemas Informáticos y Diseña Web: Códigos de: Trucos y Efectos HTML

Ventajas y destajas de usarlos

Su ventaja general es el ampliar la interactividad del usuario, en otras palabras el transformar los simples documento (páginas) en prácticamente aplicaciones para ciertas cuestiones.

La desventaja primordial en su utilización es la gran posibilidad de perjudicar la usabilidad en cuanto a diseño y tiempo de carga.

1. Librate de los copiones. No dejar seleccionar el texto y bloquear “Click Der” y “Ctrl”.

<BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false"> </body>

2. Muestra al visitante un mensaje (alerta) al entrar a tu sitio web.

<BODY onLoad="alert('Bienvenido a mi Página Web. Disfruta el contenido');" onUnLoad="confirm('Gracias por tu visita, espero que no sea la última');">

3. Pon en tu web un texto con Movimiento (Arriba-Abajo).

<marquee id="ejemplo" direction="up"> AQUI VA EL TEXTO QUE DESEES </marquee><a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='down';">Hacia abajo</a>---<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='up';">Hacia arriba</a>

4. Inserta el famoso botón de “Ir Arriba”. Imagen modificable (solo cambia la URL).

</script></div><div class="n"><div class="n"> <a href="#" title="Ir arriba"><img alt="Ir arriba" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwDXnvl0hnRAun8ifUgsXMX8CCwq1Plc0qgjHQYYVhKwB2_SCwsL1OpRHT3qDfbYjLnpXHjdoKfOzeUro3RYn8XphzD3Map-JGX26TzlH7GhVkmDMnEfkeJh9MeMemEBTdxnUbi0bktI0/s200/arrow8a.png" style=position:fixed;bottom:0;right:0;/></a> </div>

5. Añade una atractiva Marquesina con el texto que quieras.

<center> <div class="n"><p> <b><font color="#000000" face="georgia" size="4"><marquee width="400" scrollamount="5" bgcolor="#FFFFFF">Aquí tu texto</marquee> </font></b></p><center>

6. Contenido oculto (ejemplo: código html) con botón “Mostrar”.

1. <div class="pre-spoiler"> <span style="color: #00ffff;">Clic Para Mostrar El Contenido</span> <input type="button" value="Mostrar Contenido" style="width:80px;font-size:15px;margin:0px;padding:0px;" onclick= "if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar';}" /> </div><div> <div class="spoiler" style="display: none;"> AQUI ESCRIBEN TODO EL CONTENIDO QUE OCULTARAN YA SEA UN CHAT, REPRODUCTOR,ETC </div></div>
7. Titulo en la barra de direcciones con movimiento.
1. <SCRIPT LANGUAGE="JavaScript">var txt=" TITULO DE LA WEB ";var espera=140;var refresco=null;function rotulo_title() {document.title=txt;txt=txt.substring(1,txt.length)+txt.charAt(0);refresco=setTimeout("rotulo_title()",espera);}rotulo_title();</script>
8. Insertar un simple botón: “Imprimir Página Actual”.
1. <h2><a href="javascript:print()"><span style="color: rgb(0, 255, 255);"><span style="font-family: Arial;"><span style="font-size: x-large;">Imprimir Contenido</span></span></span></a></h2>
9. Añádele un increíble efecto eléctrico a tus enlaces.
1. <style type="text/css"> a.navbar:hover{color:red; font-weight:bold;background-image:url(http://www.nackvision.com/myspace/links/lightningline.gif);} a:hover, a.redlink:hover, a.navbar:hover {background-image:url(http://www.nackvision.com/myspace/links/lightningline.gif); text-decoration:none; border:0px solid;} a:hover img {background-image:url(http://www.nackvision.com/myspace/links/lightningline.gif); filter:alpha(finishopacity=0, style=2); } </style>
10. Texto (modificable) con un Efecto Parpadeante.
1. <script language="JavaScript"> var estado=true; setTimeout("ver()",450); function ver (){ estado=!estado; if(estado==true) texto1.style.visibility="visible"; else texto1.style.visibility="hidden"; setTimeout("ver()",450); } </script><p align="center" id="texto1" style="visibility:visible"><font face="Arial, Helvetica, sans-serif size="3">AÑADE AQUI EL TEXTO QUE QUIERAS</font></p>
11. Haz Que una Imagen se agrande al pasar el Cursor. Solo cambia la URL.
<img src="AQUI VA LA URL DE LA IMAGEN" onmouseover="this.width=500;this.height=400;" onmouseout="this.width=200;this.height=150;" width="200" height="100" />
12. Cambiar una imagen a otra al darle clic. Cambia las URLs.
<script language="javascript">

imagen1=new Image

imagen1.src="url dela imagen 1"

imagen2=new Image

imagen2.src="url dela imagen 2"

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="url dela imagen 1" name="ejemplo" onMousedown="cambiar()"">
13. Inserta una caja como esta para poner códigos HTML.

<div align="center"> <div id="preview" style= "BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; WORD-SPACING: 1px; OVERFLOW: scroll; BORDER-LEFT: #000 1px solid; WIDTH: 400px; PADDING-TOP: 1px; BORDER-BOTTOM: #000 2px solid; HEIGHT: 150px; TEXT-ALIGN: left"> <p> AQUI VA LO QUE TU QUIERAS, CAMBIA ESTE TEXTO. </p> </div></div>

14. Traductor de Google para tu Página Web o Blog.

<div><div id="google_translate_element"></div><script type="text/javascript">//<![CDATA[function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'es'}, 'google_translate_element');}//]]></script> <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script></div>

15. Botón social para compartir tu página web o blog en Taringa!.

<script type="text/javascript">(function(){var x=document.createElement('script'), s=document.getElementsByTagName('script')[0];x.async=true;x.src='http://widgets.itaringa.net/share.js';s.parentNode.insertBefore(x,s)})()</script></div><div><t:sharer data-layout="big"></t:sharer>

16. Muestra un Mensaje (Alerta) al Hacer clic en un enlace (Antes de ir).

<a href="http://aqui va la dirección URL.com" onclick="javascript:alert('Aqui va el Mensaje');">Titulo del Vínculo</a>

17. Aumenta el Tamaño del Texto de un Enlace al Pasar el Cursor.

<div id="vinc"><a href="http://direcciondetusitio.com" onmouseover="javascript: void(document.getElementById('vinc').style.fontSize='3em')" onmouseout="javascript: void(document.getElementById('vinc').style.fontSize='1em')"> Vínculo</a></div>

18. Pequeño widget que da en tiempo real el número de usuarios activos en tu web.

<script id="_wauwaa">var _wau = _wau || []; _wau.push(["classic", "zltotgacrhd9", "waa"]);

(function() {var s=document.createElement("script"); s.async=true;

s.src="http://widgets.amung.us/classic.js";

document.getElementsByTagName("head")[0].appendChild(s);

})();</script>

19. Botones Sociales de Twitter, Facebook, Google+ y Linkedin para Compartir.

<script type="text/javascript" src="http://100widgets.com/js_data.php?id=255"></script>

20. Inserta un Pequeño y Bonito Calendario en tu Página Web.

<script type="text/javascript" src="http://100widgets.com/js_data.php?id=106"></script>

Si es lo que buscabas, gracias por compartir.

21. Inhabilitar el botón derecho con mensaje en pantalla completa.

<script>

// Inhabilitar el botón derecho

var DADrccolor = "#F1F1F1";

var DADrcimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSr_IdVVBZQP1yQ-5FVzVZTD9tZ5ex_Mu9vkp7foDNQ7OWg2hZS_xCe67xWJ-vguwloCaU30y6KJl5_yAod8H0TaFGHsTYNPMSpbQa15TXuzlOC1xKOspFva9XztscsVDH5TooTVjMusg/s300/superheroe.png";

</script>

<script type="text/javascript" src="http://yourjavascript.com/2122535051/antirightclick.js"></script>

22. Efecto de sangre callendo desde la parte superior de tu web.

<img border='0' src='http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i0425d9e289ed1713/1297446540/std/image.gif' style='position:fixed; top:0; left:0; width:100%; height:150px;'/>

23. El Pajaro de Twiiter volando por toda tu página web o blog.

<script src="https://sites.google.com/site/ayudabloggers/scripts/tripleflap.js" type="text/javascript"></script>

<script type="text/javascript">

var birdSprite='https://lh3.googleusercontent.com/-StM0Csn4ktc/TYNPdDXzNGI/AAAAAAAAAds/QPZ0-DbHgtc/s1600/birdsprite.png';

var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');

var twitterAccount = 'http://twitter.com/USUARIO';

var twitterThisText ='';

tripleflapInit();

</script>

24. (Para Halloween) Una araña bajando desde la parte superior de tu sitio.

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWyL1gRaeS0udV_mqkNTRPMC59jotTwy0a83m7pL7Nnytam68sVY0f0FjEjW7_RWvr5g3HemMlXOkoq48JJAUk9_eRbjpEUGPkxFD3E38L9YCDxcFHzzK5VJktR4oWyRPXmuXJblQ7jvA/' style='position:fixed; top:0; left:0;'/>

25. Efecto de corazones de color rojo cayendo (para San Valentin).

<script language='javascript' type='text/javascript'>

//<![CDATA[

// Script original de Eloi Gallés Villaplana adaptado por -truco95.jimdo.com

var numero = 8

var velocidad = 40

var imagenamor = " http://i1041.photobucket.com/albums/b416/conanaz72/GIF/heart.gif "

var ns4arriba = (document.layers) ? 1 : 0

var ie4arriba = (document.all) ? 1 : 0

var dombrowser = (document.getElementById) ? 1 : 0

var dx, xp, yp

var am, stx, sty

var i, doc_ancho = 1024, doc_alto = 768

function amor() {

establece_dimensiones()

dx = new Array()

xp = new Array()

yp = new Array()

am = new Array()

stx = new Array()

sty = new Array();

for (i = 0; i < numero; ++ i) {

dx[i] = 0

xp[i] = Math.random()*(doc_ancho-50)

yp[i] = Math.random()*doc_alto

am[i] = Math.random()*20

stx[i] = 0.02 + Math.random()/10

sty[i] = 0.7 + Math.random()

if (document.layers) {

if (i == 0) {

document.write("<layer name="dot"+ i +"" left="15" ")

document.write("top="15" visibility="show"><img src="")

document.write(imagenamor + "" border="0"></layer>")

} else {

document.write("<layer name="dot"+ i +"" left="15" ")

document.write("top="15" visibility="show"><img src="")

document.write(imagenamor + "" border="0"></layer>")

}

} else if (document.all

|| document.getElementById) {

if (i == 0) {

document.write("<div id="dot"+ i +"" style="POSITION: ")

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")

document.write("visible; TOP: 15px; LEFT: 15px;"><img src="")

document.write(imagenamor + "" border="0"></div>")

} else {

document.write("<div id="dot"+ i +"" style="POSITION: ")

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")

document.write("visible; TOP: 15px; LEFT: 15px;"><img src="")

document.write(imagenamor + "" border="0"></div>")

}

}

}

corazon()

}

function corazon() {

for (i = 0; i < numero; ++ i) {

yp[i] += sty[i];

if (yp[i] > doc_alto) {

xp[i] = Math.random()*(doc_ancho-am[i]-30)

yp[i] = 0

stx[i] = 0.02 + Math.random()/10

sty[i] = 0.7 + Math.random()

establece_dimensiones()

}

dx[i] += stx[i];

if ( document.all ) {

var imagen = eval("dot" + i )

imagen.style.posLeft = xp[i] + am[i]*Math.sin(dx[i])

imagen.style.posTop = yp[i]

}

else if ( document.layers ) {

var imagen = eval("document.dot" + i)

imagen.left = xp[i] + am[i]*Math.sin(dx[i])

imagen.top = yp[i]

}

else if ( document.getElementById ) {

var imagen = document.getElementById( "dot" + i)

imagen.style.left = xp[i] + am[i]*Math.sin(dx[i]) + 'px'

imagen.style.top = yp[i] + 'px'

}

}

setTimeout("corazon()", velocidad)

}

function establece_dimensiones() {

if (self.innerHeight) {

doc_ancho = self.innerWidth - 50

doc_alto = self.innerHeight - 21

} else if (document.documentElement &&

document.documentElement.clientHeight) {

doc_ancho = document.documentElement.clientWidth

doc_alto = document.documentElement.clientHeight - 25

} else if (document.body) {

doc_ancho = document.body.clientWidth

doc_alto = document.body.clientHeight - 25

}

}

//]]>

</script>

<script language='javascript' type='text/javascript'>

amor()

</script>

26. Pon una cuenta regresiva en tu página web. Busca en el código la fecha y cambiala junto con los textos.

<center><span class="Apple-style-span" style="color: red; font-family: 'Trebuchet MS', sans-serif;">Faltan solamente</span></center><center><script language="JavaScript" type="text/javascript">

//<![CDATA[

TargetDate = "05/15/17 09:10 PM";

BackColor = "white";

ForeColor = "black";

CountActive = true;

CountStepper = -1;

LeadingZero = true;

DisplayFormat = "%%D%% Días, %%H%% Horas, %%M%% Minutos, %%S%% Segundos.";

FinishMessage = "Feliz fin del mundo!!!";

//]]>

</script><script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js" type="text/javascript">

</script></center><center><span class="Apple-style-span" style="color: red; font-family: 'Trebuchet MS', sans-serif;">Para el fin del mundo</span></center>

27. Saludo al visitante dependiendo de la hora (ej: Buenas tardes).

<center>

<span style="font-size: large;"><span class="Apple-style-span" style="color: red;"><script language="JavaScript" type="text/javascript">

//<![CDATA[



//]]>

</script></span></span></center>

28. Opciones en casilla que abren un enlace al seleccionarse. Sigue lo que se dice en el código para modificar los textos.

<form>

<ul>

<li style="background-image:none;">

<input value="ON" onclick="RubicusFrontendIns.location='URL del enlace 1'; return true;" type="checkbox" />Título del enlace 1

</li>

<li style="background-image:none;">

<input value="ON" onclick="RubicusFrontendIns.location='URL del enlace 2'; return true;" type="checkbox" />Título del enlace 2

</li>

<li style="background-image:none;">

<input value="ON" onclick="RubicusFrontendIns.location='URL del enlace 3'; return true;" type="checkbox" />Título del enlace 3

</li>

<li style="background-image:none;">

<input value="ON" onclick="RubicusFrontendIns.location='URL del enlace 4'; return true;" type="checkbox" />Título del enlace 4

</li>

</ul>

</form>

29. Insertar un menu despegable con boton de continuidad. Para cambiar los textos tan solo sigue lo que hay en el código.

<script language="JavaScript" type="text/javascript">

//<![CDATA[

function CC_go(form) {var myindex=form.dest.selectedIndex

window.open(form.dest.options[myindex].value, target="_parent", "toolbar=yes,scrollbars=yes,location=yes"); }

//]]>

</script>

<form name="CC_LinkForm" id="CC_LinkForm">

<select name="dest" size="1">

<option selected="selected" value="">

Selecciona Algo

</option>

<option value=" enlace número uno">

Titulo número 1

</option>

<option value="enlace número 2">

Título número 2

</option>

<option value="enlace número 3">

Titulo número 3

</option>

</select>

<p>

<input type="button" value="Ir ahí" onclick="CC_go(this.form)" />

</p>

</form>

30. Colocar una imagen flotante (estatica) con opción para cerrar. Sustituye donde dice “URL de tu imagen aqui” por la dirección URL de la imagen a poner.

<div id="anuncio" style="right:100px; bottom:0px; position: fixed;">

<div align="right" style="margin-bottom:-30px;">

<b><a href="javascript:closeit()"><font face="Courier" size="1">#CERRAR</font></a></b>

</div>

<br />

<img border="0" src="URL de tu imagen aquí" alt="" /> <script type="text/javascript">

//<![CDATA[

function closeit(){

document.getElementById("anuncio").style.visibility = "hidden";

}

//]]>

</script>

</div>

<div class="clear">

</div>

31. Pequeño widget de Horoscopos.

<p align="center"> <font color="#0C0505"><b><font class="navtext"><font face="Verdana" style="font-size:

9pt">HOROSCOPO</font><font class="content" size="1"><br /></font></font> <font class="navtext"><font face= "Verdana"

size="1">Descubre Tu Destino Para</font><font class="navtext"><br /></font> <font face="Verdana" size="1"><font class="navtext">El Dia

de Hoy</font><br /></font></font></b></font><b><font class="navtext" color="#0C0505"><font face="Verdana"

color="#0C0505" size="1"><br /></font> <select style= "border-style:solid; border-width:1px; VISIBILITY: visible; font-family:Verdana; font-size:8pt;

color:#0c0505; font-weight:bold; padding-left:5px; padding-right:6px; padding-top:1px; padding-bottom:1px; background-color:#ffffff" onchange=

"if(this.options[1].selected)

window.open('http://www.horoscopofree.com/misc/partnership/iframe/aries_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');

else if(this.options[2].selected)

window.open('http://www.horoscopofree.com/misc/partnership/iframe/taurus_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');

else if(this.options[3].selected)

window.open('http://www.horoscopofree.com/misc/partnership/iframe/gemini_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');

else if(this.options[4].selected)

window.open('http://www.horoscopofree.com/misc/partnership/iframe/cancer_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');

else if(this.options[5].selected)

window.open('http://www.horoscopofree.com/misc/partnership/iframe/leo_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');

else if(this.options[6].selected)

window.open('http://www.horoscopofree.com/misc/partnership/iframe/virgo_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');

else if(this.options[7].selected)

window.open('http://www.horoscopofree.com/misc/partnership/iframe/libra_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');

else if(this.options[8].selected)

window.open('http://www.horoscopofree.com/misc/partnership/iframe/scorpio_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');

else if(this.options[9].selected)

window.open('http://www.horoscopofree.com/misc/partnership/iframe/sagittarius_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');

else if(this.options[10].selected)

window.open('http://www.horoscopofree.com/misc/partnership/iframe/capricorn_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');

else if(this.options[11].selected)

window.open('http://www.horoscopofree.com/misc/partnership/iframe/aquarius_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');

else if(this.options[12].selected)

window.open('http://www.horoscopofree.com/misc/partnership/iframe/pisces_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');"

name="SucreVip" size="1"> <option selected="selected"> Elige tu signo

</option> <option> Aries </option>

<option> Tauro </option>

<option> Geminis </option> <option>

Cancer </option> <option>

Leo </option> <option> Virgo

</option> <option> Libra </option>

<option> Escorpio </option>

<option> Sagitario </option> <option>

Capricornio </option> <option>

Acuario </option> <option> Piscis

</option> </select></font></b></p>

<table> <tr> <td height="27" class="edit_rb_footer" id="edit_rb_footer_1">

</td> </tr></table>;

32. Un solo botón y varios enlaces. Fijate lo que hay que cambiar, es facil.

<center><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><script language="JavaScript" type="text/javascript">

//<![CDATA[



var timerID = null

var timerRunning = false

var charNo = 0

var charMax = 0

var lineNo = 0

var lineMax = 3

var lineArr = new Array(lineMax)

var urlArr = new Array(lineMax)

lineArr[1] = "Texto número 1"

urlArr[1] = "Enlace número 1"

lineArr[2] = "Texto número 2"

urlArr[2] = "Enlace número 2"

lineArr[3] = "Texto número 3"

urlArr[3] = "Enlace número 3"

var lineText = lineArr[1]

function StartShow() {

StopShow()

ShowLine()

timerRunning = true

}

function FillSpaces() {

for (var i = 1; i <= lineWidth; i++) {

spaces += " "

}

}

function StopShow() {

if (timerRunning) {

clearTimeout(timerID)

timerRunning = false

}

}

function ShowLine() {

if (charNo == 0) {

if (lineNo < lineMax) {

lineNo++

}

else {

lineNo = 1

}

lineText = lineArr[lineNo]

charMax = lineText.length

}

if (charNo <= charMax) {

document.formDisplay.buttonFace.value = lineText.substring(0, charNo)

charNo++

timerID = setTimeout("ShowLine()", 100)

}

else {

charNo = 0

timerID = setTimeout("ShowLine()", 3000)

}

}

function GotoUrl(url)

{

RubicusFrontendIns.location.href = url

}

document.write("<form name="formDisplay">");

document.write("<input type="button" name="buttonFace" value="&{lineText}" size="18" onClick="GotoUrl(urlArr[lineNo])">");

document.write("</form>");

StartShow();

//]]>

</script></span></center>

33. Texto que cambia al actuaizarse la página. Edita los textos en el código.

<script language="JavaScript" type="text/javascript">

//<![CDATA[

hoje = new Date()

numero_de_textos = 4

segundos = hoje.getSeconds()

numero = segundos % numero_de_textos

if (numero == 0){

texto = "Texto número 1"

}

if (numero == 01){

texto = "Texto número 2"

}

if (numero == 02){

texto = "Texto número 3"

}

if (numero == 03){

texto = "Texto número 4"

}

document.write('' + texto +'')

//]]>

</script>

34. Widget para mostrar la fecha exacta en tu web.

<p style="text-align: center;"> <iframe width="200" height="200" scrolling="no"

src="http://pagina-del-dia.euroresidentes.es/gadget-dia-de-hoy.php?fondo=Rojo.png&texto=FFFFFF" frameborder="0"></iframe></p>

35. Crear un boton para abrir un enlace. Configuralo.

<input type="button" value="Abrir" onclick="window.open('Aqui la direccion que quieres que se abra')" />

36. Actualizar página con botón. Texto modificable.

<form method="post">

<input type="button" value="Actualizar Página" onclick="RubicusFrontendIns.location.reload()" />

</form>

37. Lista de enlaces en movimiento (marquesina) facil de entender para modificar.

<marquee direction="up" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="1" style="border: 2px solid #000; height: 200px; padding: 3px; text-align: center; width: 200px;">

<a href="Enlace 1">Título 1</a><br />

<a href="Enlace 2">Título 2</a><br />

<a href="Enlace 3">Título 3</a>

</marquee>

38. Cerrar la ventana en la que se está con botón. Texto editable.

<input type="button" value="Cerrar Ventana" onclick="window.close()" />

39. Redireccionar a otra página con cuenta regresiva (3 s). Hay que configurar.

<form name="redirect" id="redirect">

<center>

<font face="Arial">Serás redireccionado en<br />

<br /></font>

<form>

<font face="Arial"><input type="text" size="3" name="redirect2" /></font>

</form>

<font face="Arial">segundos</font>

</center>

<script type="text/javascript">

//<![CDATA[



//]]>

</script> 

</form>

40. Enmarcar un texto con borde configurable.

<p style="border: ridge #FF0000 2px"> Aquí va lo que quieres enmarcar</p>

41. Poner enaces y un comentario al pasar el mouse en un cuadro de texto.

<p>

<script language="JavaScript"></script>

</p>

<table border="0">

<tr>

<td width="200"><p align="center"><strong>Opciones.</strong></p>

<p><a href="http://www.CheNico.com"

onmouseover="escribe(' Página principaln ----------------nn Cuando hagas Click en este enlace irás directamente a la página de inicio de mi web');">Página

principal</a><br>

<a href="http://usuarios.lycos.es/pauluk/trucosprin.htm"

onmouseover="escribe(' Trucos PCn -----------nn Este enlace te llevará a la página de Trucos PC en la que podés encontrar muchos más trucos interesantes para realizar e incluir en tus páginas web');">Trucos PC</a><br>

<a href="http://usuarios.lycos.es/pauluk/GLOSARIO.HTM"

onmouseover="escribe(' Glosarion -------------- nn Diccionario de Términos Informáticos. Enterate el significado de esas palabras de computación que decís todos los días pero que no sabés exactamente qué significa.');">Glosario</a><br>

</p>

</td>

<td><form name="desplaza">

<p><textarea name="cuadro" rows="8" cols="30"

wrap="physical"></textarea></p>

</form>

</td>

</tr>

</table>

42. Sbreponer un texto sobre otro.

<P><CENTER><BR>

<BR>

<SPAN style="z-index: 1;

font-family:Verdana

font-weight: bold;

font-size: 30pt;

color: #FF9900">AQUI EL PRIMER TEXTO</SPAN><BR>

<SPAN style="position: relative;

top: -32px;

left: 0px;

z-index: 2;

font-family: Verdana, Arial, Helvetica;

font-size: 28pt;

color: #006699">SEGUNDO TEXTO</SPAN><BR>

<BR>

<BR>

<script>function src() { window.location = "view-source:" +

window.location.href } </script></CENTER></P>

43. Texto que aparece con increible efecto fade.

<script language="JavaScript1.2">var delay=3000 //pausa (en milisegundos)

var fcontent=new Array()

begintag='<font face="Arial" size=2>' //tag que abre los mensajes

fcontent[0]="<b></b><br><br>Crea tu propia pagina personal."

fcontent[1]="Monta tu pagina con FrontPage Express , veras que es muy facil."

fcontent[2]="En estas paginas encontraras los recursos y la manera de poder realizarlo de forma muy sencilla."

closetag='</font>'

var fwidth=150 //ancho

var fheight=150 //alto

///No editar/////////////////

var ie4=document.all&&!document.getElementById

var ns4=document.layers

var DOM2=document.getElementById

var faderdelay=0

var index=0

if (DOM2)

faderdelay=2000

//function to change content

function changecontent(){

if (index>=fcontent.length)

index=0

if (DOM2){

document.getElementById("fscroller").style.color="rgb(255,255,255)"

document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag

colorfade()

}

else if (ie4)

document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag

else if (ns4){

document.fscrollerns.document.fscrollerns_sub.document.write(begintag+fcontent[index]+closetag)

document.fscrollerns.document.fscrollerns_sub.document.close()

}

index++

setTimeout("changecontent()",delay+faderdelay)

}

// colorfade() partially by Marcio Galli for Netscape Communications. ////////////

frame=20;

hex=255 // Initial color value.

function colorfade() {

// 20 frames fading process

if(frame>0) {

hex-=10; // increase color value

document.getElementById("fscroller").style.color="rgb("+hex+","+hex+","+hex+")";// Set color value.

frame--;

setTimeout("colorfade()",20);

}

else{

document.getElementById("fscroller").style.color="rgb(255,0,0)";

frame=20;

hex=255

}

}

if (ie4||DOM2)

document.write('<div id="fscroller" style="border:1px solid ;width:'+fwidth+';height:'+fheight+';padding:2px"></div>')

window.onload=changecontent</script><ilayer id="fscrollerns" width=&{fwidth}; height=&{fheight};><layer id="fscrollerns_sub" width=&{fwidth}; height=&{fheight}; left=0 top=0></layer></ilayer>

44. Texto animado y cambiando en el titulo de la pestaña.



<SCRIPT LANGUAGE="JavaScript">

var message = new Array();

// Set your messages below -- follow the pattern.

// To add more messages, just add more elements to the array.

message[0] = "www.creatupropiaweb.com";

message[1] = "Codigos JavaScripts";

message[2] = "Trucos Diseño";

message[3] = "Musica Midi";

message[4] = "Juegos Flash";

message[5] = "Tutoriales";

message[6] = "... Todo y MUCHO mas GRATIS";

// Set the number of repetitions (how many times the arrow

// cycle repeats with each message).

var reps = 2;

var speed = 200; // Set the overall speed (larger number = slower action).

// DO NOT EDIT BELOW THIS LINE.

var p = message.length;

var T = "";

var C = 0;

var mC = 0;

var s = 0;

var sT = null;

if (reps < 1) reps = 1;

function doTheThing() {

T = message[mC];

A();

}

function A() {

s++;

if (s > 8) { s = 1;}

// you can fiddle with the patterns here...

if (s == 1) { document.title = '||||||====||| '+T+' -----'; }

if (s == 2) { document.title = '|||=|||===||| '+T+' -----'; }

if (s == 3) { document.title = '|||==|||==||| '+T+' -----'; }

if (s == 4) { document.title = '|||===|||=||| '+T+' -----'; }

if (s == 5) { document.title = '|||====|||||| '+T+' -----'; }

if (s == 6) { document.title = '|||===|||=||| '+T+' -----'; }

if (s == 7) { document.title = '|||==|||==||| '+T+' -----'; }

if (s == 8) { document.title = '|||=|||===||| '+T+' -----'; }

if (C < (8 * reps)) {

sT = setTimeout("A()", speed);

C++;

}

else {

C = 0;

s = 0;

mC++;

if(mC > p - 1) mC = 0;

sT = null;

doTheThing();

}

}

doTheThing();

// End -->

</script>

45. La mejor marquesina que podras ver en tu vida. Cambia el texto.

<script language="JavaScript">



// This Script And Over 400 Others Found At

// Java City 2000 http://www.jc2k.com



</script>

<script language="JavaScript">

document.write('<form name="Active" onSubmit="0">')

document.write('<input type="text" name="ASCII" size="50">')

document.write('</form>')

Activate()

</script>

46. Pon un sonido o música de fondo. Solo coloca su URL.

<BGSOUND SRC="sonido.mid" LOOP=none>

<WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">

¿Como poner los códigos HTML en tu página web o blog?

Para hacero he creado un articulo especial, lo puedes encontrar aqui, en el esta el tutorial para los sistemas de desarrollo web mas utilizados en el mundo de habla hispana.

¿Buscabas mas que trucos y efectos basicos?

En en este sitio hay mucho mas que eso. Aquí se te muestra todo lo que puedes poner en tu web, sin importar con que programa este creada.

Los códigos básicos (como los anteriores) están pasando de moda. Ve algunos widgets o plugins para tu página web increibles.

A continuación algunos de los artículos con lo que posiblemente andes buscando.

17 nov 2017

Códigos de: Trucos y Efectos HTML | TODOS LOS QUE HAY

7. Titulo en la barra de direcciones con movimiento.

8. Insertar un simple botón: “Imprimir Página Actual”.

9. Añádele un increíble efecto eléctrico a tus enlaces.

10. Texto (modificable) con un Efecto Parpadeante.

11. Haz Que una Imagen se agrande al pasar el Cursor. Solo cambia la URL.

12. Cambiar una imagen a otra al darle clic. Cambia las URLs.

13. Inserta una caja como esta para poner códigos HTML.

14. Traductor de Google para tu Página Web o Blog.

15. Botón social para compartir tu página web o blog en Taringa!.

16. Muestra un Mensaje (Alerta) al Hacer clic en un enlace (Antes de ir).

17. Aumenta el Tamaño del Texto de un Enlace al Pasar el Cursor.

18. Pequeño widget que da en tiempo real el número de usuarios activos en tu web.

19. Botones Sociales de Twitter, Facebook, Google+ y Linkedin para Compartir.

20. Inserta un Pequeño y Bonito Calendario en tu Página Web.

Si es lo que buscabas, gracias por compartir.

21. Inhabilitar el botón derecho con mensaje en pantalla completa.

22. Efecto de sangre callendo desde la parte superior de tu web.

23. El Pajaro de Twiiter volando por toda tu página web o blog.

24. (Para Halloween) Una araña bajando desde la parte superior de tu sitio.

25. Efecto de corazones de color rojo cayendo (para San Valentin).

26. Pon una cuenta regresiva en tu página web. Busca en el código la fecha y cambiala junto con los textos.

27. Saludo al visitante dependiendo de la hora (ej: Buenas tardes).

28. Opciones en casilla que abren un enlace al seleccionarse. Sigue lo que se dice en el código para modificar los textos.

29. Insertar un menu despegable con boton de continuidad. Para cambiar los textos tan solo sigue lo que hay en el código.

30. Colocar una imagen flotante (estatica) con opción para cerrar. Sustituye donde dice “URL de tu imagen aqui” por la dirección URL de la imagen a poner.

31. Pequeño widget de Horoscopos.

32. Un solo botón y varios enlaces. Fijate lo que hay que cambiar, es facil.

33. Texto que cambia al actuaizarse la página. Edita los textos en el código.

34. Widget para mostrar la fecha exacta en tu web.

35. Crear un boton para abrir un enlace. Configuralo.

36. Actualizar página con botón. Texto modificable.

37. Lista de enlaces en movimiento (marquesina) facil de entender para modificar.

38. Cerrar la ventana en la que se está con botón. Texto editable.

39. Redireccionar a otra página con cuenta regresiva (3 s). Hay que configurar.

40. Enmarcar un texto con borde configurable.

41. Poner enaces y un comentario al pasar el mouse en un cuadro de texto.

42. Sbreponer un texto sobre otro.

43. Texto que aparece con increible efecto fade.

44. Texto animado y cambiando en el titulo de la pestaña.

45. La mejor marquesina que podras ver en tu vida. Cambia el texto.

46. Pon un sonido o música de fondo. Solo coloca su URL.

¿Como poner los códigos HTML en tu página web o blog?

¿Buscabas mas que trucos y efectos basicos?

No hay comentarios: