Hola hoy les vengo con mi 3 post de ayuda para usuarios y para moderadores espero que sea de su agrado por que en el 2 post que tuve fue muy buena la calificacion que le dieron amis trucos.
Poco a poco ire terminando el post por eso le pido el favor a nixoweb o a otros moderadores o usuarios que controle todo tipo de trucos que valla mostrando en el post me refiero a que si tengo trucos repetidos,no funcionan o que son muy comunes avisenmen
El post de trucos se compone de la siguiente manera:
Cita: Trucos HTLM - Ingresados:30 Faltan:0 - Comprovados:30
Trcuso HTLM
1.Links en una misma pagina
Comúnmente llamados marcadores. Estos enlaces permiten ir a un lugar específico dentro de una misma página. Es muy utilizado cuando el scroll es demasiado largo, ya que permite ofrecer al usuario la posibilidad de ir al principio, final o cualquier sector de la página en forma rápida.
La creación de un marcador se divide en dos pasos: crear un enlace de origen y otro destino.
<-- Codigo ofrecido por wedmasterayuda.es.tl -->
Link origen:
Código: <a href="#seccion1">Sección 1</a>
<a href="#seccion2">Sección 2</a>
Link destino:
Código: <p><a name="seccion1">Sección 1:</a> Este párrafo contiene...</p>
<p><a name="seccion2">Sección 2:</a> Este párrafo contiene...</p>
El enlace origen es realizado como cualquier otro, con la diferencia de que utilizamos el signo numeral (#) para especificar de qué tipo de enlace se trata. Y el enlace destino no sería exactamente un enlace, sino un forma de denominar y clasificar el destino.
Por defecto, existe un marcador muy útil, el que se utiliza para ir hacia el comienzo de la página:
Código: <a href="#top">Ir Arriba</a>
2.
Insertar imagenes dentro de un boton de Formulario
Para dar mas vistosidad a nuestros botones, ademas de utilizar hojas de estilos css podemos utilizar este codigo, el cual nos permite insertar imagenes dentro de un boton de formulario.
Código: <-- Codigo ofrecido por wedmasterayuda.es.tl -->
<button name="boton" type="submit"><img src="/tutores/images/mundo.gif"> Texto de Boton <img src="/tutores/images/mundo2.gif"></button>
3.Efecto al entrar o salir en pagina - Uso de Meta
Con el simple uso de la cabecera meta en nuetras paginas conseguimos un efecto al entrar o salir de la pagina
Esta etiqueta debe estar insertada entre las etiquetas HEAD de nuestras paginas
Código:
<-- Codigo ofrecido por desparchemusical.es.tl -->
<head>
<meta http-equiv="Page-Exit" content="revealTrans(Duration=2, Transition=23)">
</head>
4.Permite que tus visitas busquen en wedmasterayuda.es.tl
Este seria el formulario que puedes ofrecer a tus visitantes para que realicen busquedas de codigos en wedmasterayuda.es.tl
Código:
<-- Codigo ofrecido por wedmasterayuda.es.tl -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<form action="http://wedmasterayuda.es.tl" method="post" name="form1" id="form1" style="margin:0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="61%" align="center" valign="top">
<input name="q" type="text" class="formfield" id="q" value="" size="30" nFocus="this.value=''">
<input name="buscar" type="submit" id="buscar" value="Buscar">
<input name="m" type="hidden" id="accion" value="buscar">
<input name="c" type="hidden" id="t" value="0">
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
5.detectar error en carga de imagen y mostrar imagen de error
Esta sencilla linea de codigo detecta cuando una imagen no existe o no puede ser cargada y en su lugar muestra otra.
Código:
<-- Codigo ofrecido por desparhcemusical.es.tl -->
<img src="imagen.gif" onerror="this.onerror=null;this.src='/tutores/images/mundo2.gif';">
6.Combinar frames o marcos horizontales y verticales
Con estas lineas mostramos varias paginas dentro de frames o marcos de forma vertical y horizontal. En la linea 2 " frameset rows " indica horizontal o celdas, abrirá un marco con la url
Código:
<-- Codigo ofrecido por wedmasterayuda.es.tl -->
<html>
<frameset rows="50%,50%">
<frame src="http://desparchemusical.es.tl">
<frameset cols="25%,75%">
<frame src="http://www.yahoo.com">
<frame src="http://www.google.com">
</frameset>
</frameset>
</html>
7.El mas simple scroll de noticias - marquee
Tal y como el titulo, este seria una de las formas mas sencillas de crear un scroll. Utiliza algo de javascript, aunque solo para iniciar y parar el scroll cuando pasamos el raton. Tambien se ayuda
Código:
<-- Codigo ofrecido por wedmasterayuda.es.tl -->
<marquee onmouseover=this.stop() onmouseout=this.start() direction="up" scrollAmount="5" style="width:200;height:250">
<strong>Noticias:</strong><br>
<br>
Pueden incluirse todo tipo de tags html<br>
Imagenes<br>
<img src="/tutores/images/mundo3.gif"> <br>
Tablas<br>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<br>
<a href="#">Enlaces </a>
</marquee>
8.Limpiar campo de formulario al pulsar - Onclick
Conseguimos limpiar un campo de formulario al hacer click con el mouse o raton.
Código: <-- Codigo ofrecido por wedmasterayuda.es.tl -->
<form name="limpiar" method="post" action="#">
<input type="text" name="campo" size="40" maxlength="40" Value="Pulsa para limpiar" onclick="this.value=''";>
</form>
9.Boton para añadir contactos de Hotmail
Este simple boton mediante controles activex permite a tus usuarios y vitiantes que te añadan a tu lista de cotnactos de Hotmail.
Solo modifica el E-mail
Código: <-- Codigo ofrecido por desparhcemusical.es.tl -->
<object classid="clsid:FB7199AB-79BF-11d2-8D94-0000F875C541" codetype="application/x-oleobject" id="objMessengerApp" width="0" height="0"></object>
<object classid="clsid:F3A614DC-ABE0-11d2-A441-00C04F795683" codetype="application/x-oleobject" id="objMessenger" width="0" height="0" codebase="#Version=2,0,0,83"></object>
<input type="button" onclick="objMessengerApp.LaunchAddContactUI('tu_hotmail@hotmail.com');" value="Añademe a tus contactos de Hotmail">
10.Imagen de Fondo estatica
Esta simple linea de codigo consigue que nuestra imagen de fondo de pagina no se mueva o bien sea estatica. Debemos insertar bgproperties="f ixed" en la etiqueta Body.
Código: <-- Codigo ofrecido por wedmasterayuda.es.tl -->
<body bgproperties="fixed">
11.Cambiar color de celda al pasar el mouse
Aunque tambien podria estar este codigo en javascript lo hemos incluido en esta sección por su simpleza. Al pasar el mouse o raton por encima de la celda, esta cambia de color.
Código:
<-- Codigo ofrecido por wedmasterayuda.es.tl -->
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td onmouseover='this.style.background="#cc0000"' onmouseout='this.style.background="white"'>
Este seria el texto dentro de una celda
</td>
</tr>
</table>
12.Evitar que visitantes cambien el tamaño de texto
Debido a la gran variedad de resoluciones y navegadores, el diseño de tu pagina puede ser distinto segun navegador, resolucion. Una forma de que todos los visitantes vean tus textos del mismo tamaño
Código: <-- Codigo ofrecido por wedmasterayuda.es.tl -->
<p style="font-size:10pt;">Este es mi texto</p>
13.Justificar texto
Esta seria una de las formas de justificar un texto con simple html
Código: <-- Codigo ofrecido por desparchemusical.es.tl -->
<div style="text-align:justify">tu texto<br>mas texto</div>
14.
Ventana pop-up siempre en primer plano
Al agregar esta orden a tu pagina pop-up permanecerá en primer plano hasta que sea cerrada.Mientras no se cierre las demas estarán en segundo plano.
Código:
<-- Codigo ofrecido por wedmasterayuda.es.tl -->
<body onblur="self.focus();">
Esta ventana permanecera en primer plano hasta que se cierre
15.Texto subrayado
Para que su texto sea más importante, ¿porqué no subrayarlo? Utilice simplemente la etiqueta Font y un atributo de hoja de estilo.
Solo deves espicificar el color que en este caso nosotros utilizamos #CCFF00
Código:
<-- Codigo ofrecido por wedmasterayuda.es.tl -->
Bienvenido a <FONT Style="background-color : #CCFF00">Tutores.org</FONT>
16.Menu dinamico con descripcion de enlaces
Practico menu de enlaces con un bonito efecto de movimiento de celdas y descripcion de los enlaces. Este menu utiliza hojas de estilo y javascript.
Código:
<-- Codigo ofrecido por wedmasterayuda.es.tl -->
<head>
<style>
.Borde_dentro { width:90px;
margin-left:10px;
border:1px solid #666666 }
.Borde_fuera { width:90px;
margin-left:0px;
border:1px solid #333333 }
A.color_enlace:link {color:#666666; text-decoration:none;}
A.color_enlace:visited {color:#666666; text-decoration:none;}
A.color_enlace:active {color:#666666; text-decoration:none;}
A.color_enlace:hover {color:#FF0000; text-decoration:underline;}
</style>
<script language="JavaScript1.2">
offel_mensaje = "Tutores.org"
function mi_mensaje(which,el_mensaje){
if (document.all||document.getElementById){
which.className='Borde_dentro'
if (document.getElementById) {document.getElementById("el_mensaje").innerHTML = el_mensaje}
else {el_mensaje.innerHTML = el_mensaje}
}
}
function caja_fuera(which){
if (document.all||document.getElementById){
which.className='Borde_fuera'
if (document.getElementById) {document.getElementById("el_mensaje").innerHTML = offel_mensaje}
else {el_mensaje.innerHTML = offel_mensaje}
}
}
</script>
</head>
<body bgcolor="#ffffff">
<table cellpadding="0" cellspacing="0" width="100">
<tr>
<td align="center">
<table cellpadding="3" cellspacing="0" bgcolor="#cc0000" class="Borde_fuera">
<tr>
<td height="22" bgcolor="#666666"><div align="center"><font color="#FFFFFF" size="2" face="Arial"><strong>Menu</strong></font></div></td>
</tr>
</table>
<table cellpadding="3" cellspacing="0" class="Borde_fuera" onMouseover="mi_mensaje(this,'Descripcion para Enlace 1.')" onMouseout="caja_fuera(this)">
<tr>
<td><font color="#666666" size="2" face="Arial"><a class="color_enlace" href="#" target="_blank">Enlace 1</a></font></td>
</tr>
</table>
<table cellpadding="3" cellspacing="0" class="Borde_fuera" onMouseover="mi_mensaje(this,'Descripcion para Enlace 2.')" onMouseout="caja_fuera(this)">
<tr>
<td><font color="#666666" size="2" face="Arial"><a class="color_enlace" href="#" target="_blank">Enlace 2</a></font></td>
</tr>
</table>
<table cellpadding="3" cellspacing="0" class="Borde_fuera" onMouseover="mi_mensaje(this,'Descripcion para Enlace 3.')" onMouseout="caja_fuera(this)">
<tr>
<td><font color="#666666" size="2" face="Arial"><a class="color_enlace" href="#" target="_blank">Enlace 3</a></font></td>
</tr>
</table>
<table cellpadding="3" cellspacing="0" class="Borde_fuera" onMouseover="mi_mensaje(this,'Descripcion para Enlace 4.')" onMouseout="caja_fuera(this)">
<tr>
<td><font color="#666666" size="2" face="Arial"><a class="color_enlace" href="#" target="_blank">Enlace 4</a></font></td>
</tr>
</table>
<table cellpadding="3" cellspacing="0" class="Borde_fuera" onMouseover="mi_mensaje(this,'Descripcion para Enlace 5.')" onMouseout="caja_fuera(this)">
<tr>
<td><font color="#666666" size="2" face="Arial"><a class="color_enlace" href="#" target="_blank">Enlace 5</a></font></td>
</tr>
</table>
<table cellpadding="1" cellspacing="0" bgcolor="#666666" width="90">
<tr>
<td>
<table cellpadding="3" cellspacing="0" bgcolor="#666666" width="88" height="100">
<tr>
<td align="left" valign="top" bgcolor="#666666"><font id="el_mensaje" color="#FFFFFF" size="2" face="Arial"><strong>wedmasterayuda.es.tl</strong></font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
17.Simple menu al pulsar boton derecho
Este podriamos decir que es una de las formas mas sencillas de crear un menu al pulsar el boton derecho, el cual soporta imagenes e incluso cualquier tipo de html.
Código: <-- Codigo ofrecido por wedmasterayuda.es.tl -->
<HTML>
<HEAD>
<style type="text/css">
A:link {color: #808080;text-decoration:none;} A:visited {color: #808080;text-decoration:none;} A:hover {color: #C0C000;text-decoration:underline;}
#contextMenu {
position: absolute;
visibility: hidden;
width: 150px;
background-color: grey;
layer-background-color: lightgrey;
border: 2px outset white;
}
</style>
<script>
var menu;
function hideMenu() { document.all.contextMenu.style.visibility="hidden"; }
function showMenu (evt) {
if (document.all) {
if (event.type == "contextmenu") {
document.all.contextMenu.style.pixelLeft = event.clientX;
document.all.contextMenu.style.pixelTop = event.clientY;
document.all.contextMenu.style.visibility=='visible'?document.all.contextMenu.style.visibility='hidden':document.all.contextMenu.style.visibility='visible';
return false;
}
}
else if (document.layers) {
if (evt.which == 3) {
document.contextMenu.left = evt.x;
document.contextMenu.top = evt.y;
document.contextMenu.onmouseout = function (evt) { this.visibility = 'hide'; };
document.contextMenu.visibility=='show'?document.contextMenu.visibility='hide':document.contextMenu.visibility='show';
return false;
}
}
return true;
}
if (document.all) {
document.oncontextmenu = showMenu;
document.onclick = hideMenu;
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = showMenu;
}
</script>
</HEAD>
<BODY onclick="showMenu('Event.MOUSEDOWN')">
<DIV ID="contextMenu">
<img src="/images/colors.gif"> <A HREF="http://www.google.com">google</A>
<BR>
<img src="/images/colors.gif"> <A HREF="http://www.yahoo.com">Yahoo</A>
<br>
<img src="/images/colors.gif"> <A HREF="http://www.Altavista.com">Altavista</A>
</DIV>
</BODY>
</HTML>
18.Mostrar mensaje de carga de pagina
Este script esta muy solicitado por los webmasters, consigue mostrar un mensaje de " cargando pagina, por favor espere ... " Mientras se complete la carga de una pagina.
Código:
<-- Codigo ofrecido por desparchemusical.es.tl -->
<head>
<style TYPE="text/css">
#cache {
position:absolute; top:200px; z-index:10; visibility:hidden;
}
</style>
</head>
<body onLoad="cacheOff()">
<DIV ID="cache">
<TABLE WIDTH=400 BGCOLOR=#FFFF00 BORDER=0 CELLPADDING=2 CELLSPACING=0>
<TR><TD ALIGN=center VALIGN=middle>
<TABLE WIDTH=100% BGCOLOR=#000000 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR><TD ALIGN=center VALIGN=middle bgcolor="#CC0000" bordercolor="#FFFF00">
<p align="center">
<font face="Courrier" size="4" color="#FFFFFF">
<span style="background-color: #cc0000">Cargando pagina por favor espere...</span>
</font>
</p>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</DIV>
<p align="center">
<font color="#0000FF">
<script LANGUAGE="JavaScript">
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { cach = document.cache }
else if (dom) { cach = document.getElementById("cache").style }
else if (iex) { cach = cache.style }
Longitud = screen.width;
cach.left = Math.round((Longitud/2)-200);
cach.visibility = "visible";
function cacheOff()
{
cach.visibility = "hidden";
}
</script>
<b><font color="#006600">Aqui deberia estar tu contenido</font></b></font>
<p align="center">Segun el peso de la pagina y la velocidad de carga podria no mostrarse el mensaje</p>
<p align="center"> </p>
<p align="center"> </p>
</BODY>
19.Ventana con info al pasar el raton sobre texto
Al pasar el mouse o raton sobre un texto se muestra una ventana ( layer ) con el contenido o descripcion que hayamos indicado, imitando a " ALT " de las imagenes. Muy bueno para mostrar inf
Código:
<-- Codigo ofrecido por desparchemusical.es.tl -->
<HEAD>
<style>
#ejemplo1 {
position:absolute;
width:150px;
height:100px;
color:blue;
background-color:#ff9999;
text-align:center;
visibility:hidden;
z-index:10;
}
#ejemplo2 {
position:absolute;
width:150px;
height:100px;
color:blue;
background-color:#FDF5E6;
text-align:center;
visibility:hidden;
z-index:10;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function ver_ejemplo(user,ValueShow) {
var mousex = window.event.x;
var mousey = window.event.y;
user.style.visibility = ValueShow;
user.style.left = mousex + 5;
user.style.top = mousey;
}
</script>
</HEAD>
<BODY>
<br>
<font color="red">
<a onmouseover="ver_ejemplo(ejemplo1,'visible')" onmouseout="ver_ejemplo(ejemplo1,'hidden')">
Ejemplo 1
</a>
<br><br>
<a onmouseover="ver_ejemplo(ejemplo2,'visible')" onmouseout="ver_ejemplo(ejemplo2,'hidden')">
Ejemplo 2
</a>
<div id="ejemplo1">
<table border="no" width="148">
<tr valign="middle">
<td height="98" align="center"><font color=#990000> Primer ejemplo<br>
tutores.org<br>
<br>
Anuncio </font>
</td></tr></table>
</div>
<div id="ejemplo2">
<table border="yes" bordercolor="#cc0000" width="148">
<tr valign="middle">
<td height="98" align="center"><font color=Blue> Segundo ejemplo<br>
Anuncio<br>
<br>
wedmasterayuda<br>
</font>
</td></tr></table>
</div>
20.Imagen moviendose por pantalla
Este divertido codigo muestra una imagen que hayamos definido por moviendose por toda la pantalla. Puede ser muy util para mostrar anuncios.
Código:
<-- Codigo ofrecido por desparchemusical.es.tl -->
<SCRIPT language="JavaScript1.2">
var imagem="/images/mundo.gif"
if (document.layers)
{document.write("<LAYER NAME='animacion' LEFT=10 TOP=10><img src='"+imagem+"' ></LAYER>")}
else if (document.all){document.write("<div id='animacion' style='position:absolute;top:10px;left:10px;width:17px;height:22px;z-index:50'><img src='"+imagem+"'></div>")}
conta=-1;
move=1;
function curva(){
abc=new Array(0,1,1,1,2,3,4,0,6,-1,-1,-1,-2,-3,-4,0,-6)
for (i=0; i < abc.length; i++)
{var C=Math.round(Math.random()*[i])}
iniciar=abc[C];
setTimeout('curva()',1900);
return iniciar;
}
ypos=10;
xpos=10;
movimento = 60;
function moveR(){
camino=movimento+=iniciar;
y = 4*Math.sin(camino*Math.PI/180);
x = 6*Math.cos(camino*Math.PI/180);
if (document.layers){
ypos+=y;
xpos+=x;
document.animacion.top=ypos+window.pageYOffset;
document.animacion.left=xpos+window.pageXOffset;
}
else if (document.all){
ypos+=y;
xpos+=x;
document.all.animacion.style.top=ypos+document.body.scrollTop;
document.all.animacion.style.left=xpos+document.body.scrollLeft;
}
T=setTimeout('moveR()',50);
}
function edges(){
if (document.layers){
if (document.animacion.left >= window.innerWidth-40+window.pageXOffset)movimento=Math.round(Math.random()*45+157.5);
if (document.animacion.top >= window.innerHeight-30+window.pageYOffset)movimento=Math.round(Math.random()*45-112.5);
if (document.animacion.top <= 2+window.pageYOffset) movimento = Math.round(Math.random()*45+67.5);//OK!
if (document.animacion.left <= 2+window.pageXOffset) movimento = Math.round(Math.random()*45-22.5);//OK!
}
else if (document.all)
{
if (document.all.animacion.style.pixelLeft >= document.body.offsetWidth-45+document.body.scrollLeft)movimento=Math.round(Math.random()*45+157.5);
if (document.all.animacion.style.pixelTop >= document.body.offsetHeight-35+document.body.scrollTop)movimento=Math.round(Math.random()*45-112.5);
if (document.all.animacion.style.pixelTop <= 2+document.body.scrollTop) movimento = Math.round(Math.random()*45+67.5);//OK!
if (document.all.animacion.style.pixelLeft <= 2+document.body.scrollLeft) movimento = Math.round(Math.random()*45-22.5);//OK!
}
setTimeout('edges()',100);
}
function movimiento(){
curva();
moveR();
edges();
}
if (document.all||document.layers)
movimiento()
</script>
21.Mostrar en marquesina info al pasar el mouse
El ejemplo muestra como al pasar el raton o mouse sobre un texto, se muestra un aviso en forma de marquesina con la informacion que hayamos indicado. Este codigo tambien puede aplicarse a enlaces, im
Código: <-- Codigo ofrecido por desparchemusical.es.tl -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function showtip2(current,e,text){
if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}
else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}
</script>
</HEAD>
<BODY>
<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:#CCCCCC;z-index:10"></div>
<div align="CENTER" name="divTest" onMouseover="showtip2(this,event,'Este seria un ejemplo del texto que mostramos!');" onMouseout="hidetip2();" STYLE="cursor: hand">
<TABLE border="0" cellpadding="0" cellspacing="0"><TR>
<TD COLSPAN="7"> Pasa el mouse
</TABLE>
<p></div>
22.Limite de caracteres en un formulario
Con este sencillo script conseguimos limitar el numero de caracteres en un formulario, en el ejemplo mostramos un campo de texto y uno multiple.
Código:
<-- Codigo ofrecido por wedmasterayuda -->
<html>
<head>
<title>Tutores.org</title>
<script>
var ns6=document.getElementById&&!document.all
function restrictinput(maxlength,e,placeholder){
if (window.event&&event.srcElement.value.length>=maxlength)
return false
else if (e.target&&e.target==eval(placeholder)&&e.target.value.length>=maxlength){
var pressedkey=/[a-zA-Z0-9\.\,\/]/ //Detectamos los caracteres alfanumericos
if (pressedkey.test(String.fromCharCode(e.which)))
e.stopPropagation()
}
}
function countlimit(maxlength,e,placeholder){
var theform=eval(placeholder)
var lengthleft=maxlength-theform.value.length
var placeholderobj=document.all? document.all[placeholder] : document.getElementById(placeholder)
if (window.event||e.target&&e.target==eval(placeholder)){
if (lengthleft<0)
theform.value=theform.value.substring(0,maxlength)
placeholderobj.innerHTML=lengthleft
}
}
function displaylimit(theform,thelimit){
var limit_text='<b><span id="'+theform.toString()+'">'+thelimit+'</span></b> caracteres para el limite'
if (document.all||ns6)
document.write(limit_text)
if (document.all){
eval(theform).onkeypress=function(){ return restrictinput(thelimit,event,theform)}
eval(theform).onkeyup=function(){ countlimit(thelimit,event,theform)}
}
else if (ns6){
document.body.addEventListener('keypress', function(event) { restrictinput(thelimit,event,theform) }, true);
document.body.addEventListener('keyup', function(event) { countlimit(thelimit,event,theform) }, true);
}
}
</script>
</head>
<body>
<form name="sampleform">
<input type="text" name="george" size=20><br>
<script>
displaylimit("document.sampleform.george",10) //limite del campo
</script>
<p>
<textarea name="john" cols=25 rows=15></textarea><br>
<script>
displaylimit("document.sampleform.john",20) //Limite del text area
</script>
</form>
</body>
</html>
23.Formulario Flasheante
Simple codigo dhtml el cual permite que un formulario brille o haga destellos class=&qu ot;flashit" - debe darse a cualquier elemento de formulario para que brille
Código:
<-- Codigo ofrecido por desparchemusical.es.tl -->
<html>
<head>
<title>desparchemusical.es.tl</title>
</head>
<body>
<form>
<input type="submit" value="enviar" class="flashit">
</form>
<form>
<input type="name" value="Escribe tu email" class="flashit">
</form>
</body>
<script language="JavaScript1.2">
var flashcolor="red"
var flashinterval=1000
var formcollect=document.getElementsByTagName? document.getElementsByTagName("FORM") : document.all? document.all.tags("FORM") : new Array()
var flashcollect=new Array()
for (i=0; i<formcollect.length; i++){
for (e=0; e<formcollect[i].elements.length; e++){
if (formcollect[i].elements[e].className=="flashit")
flashcollect[flashcollect.length]=formcollect[i].elements[e]
}
}
function flashelements(){
for (f=0; f<flashcollect.length; f++){
if (flashcollect[f].style.color=='')
flashcollect[f].style.color=flashcolor
else
flashcollect[f].style.color=""
}
}
if (flashcollect.length>0)
setInterval("flashelements()",flashinterval)
</script>
</body>
</html>
24.Efecto Neon
Mostramos un texto con efecto luces de neon
Código: <-- Codigo ofrecido por desparhcemusical.es.tl -->
<body bgcolor="#000000"><h2>
<script language="JavaScript1.2">
//Codigo obtenido en desparchemusical.es.tl
//Datos a modificar
var message="Desparhcemusical"
var neonbasecolor="gray"
var neontextcolor="yellow"
var flashspeed=100 ///Velocidad del neon en milisegundos
///No modificar despues de esta linea
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
crossref(n).style.color=neontextcolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>
</h2>
25.Efecto en imagen - Disolver
Gran efecto con el que conseguimos que una imagen aparezca como si esteviera disolviendose
Debemos modificar el path hacia la imagen transition=12,duration= seria la velocidad de la transicion
Código: <-- Codigo ofrecido por wedmasterayuda.es.tl -->
<SCRIPT FOR=window EVENT=onload LANGUAGE=Javascript>
dissolver.filters[0].Apply();
dissolver.innerHTML = "<img src=/tutores/images/mundo.gif>";
dissolver.filters[0].Play();
</script>
<div id="dissolver" style="position:relative;
width:347; height:330; top:20; left:30; filter:revealTrans (transition=12,duration=8)">
</div>
26.Celdas con colores diferentes al paso del mouse
El ejemplo muestra una tabla con varias celdas en un color predefinido, pero al pasar el raton o mouse ( onmouseover ) esta cambia de color, pero al retirar elmouse vuelve a su color natural. Cada t
Código:
<-- Codigo ofrecido por wedmasterayuda.es.tl -->
<div align="center">
<center>
<table border="2" cellpadding="0" cellspacing="0" width="200" height="40" bgcolor="#990000">
<tr>
<TD onmouseover="bgColor='green'" onmouseout="bgColor='#990000'" vAlign=center align=middle width=117 height=12>
<DIV align=left>
<p align="center"><b><font color="#FFFFFF" size="4" face="Verdana">Scripts</font></b>
</div></td>
<TD onmouseover="bgColor='blue'" onmouseout="bgColor='#990000'" vAlign=center align=middle width=117 height=12> <DIV align=left>
</td>
</tr>
<tr>
<TD onmouseover="bgColor='#FFFF00'" onmouseout="bgColor='#990000'" vAlign=center align=middle height=12>
<DIV align=left> </div></td>
<TD onmouseover="bgColor='orange'" style="CURSOR: hand"
onmouseout="bgColor='#990000'" vAlign=center align=middle height=12> <DIV align=left>
<p align="center"><b><font color="#FFFFFF" size="4" face="Verdana">Codigos</font></b>
</div></td>
</tr>
<tr>
<TD onmouseover="bgColor='brown'" onmouseout="bgColor='#990000'" vAlign=center align=middle width=117 height=12>
<div align="center"><b><font color="#FFFFFF" size="4" face="Verdana">Foros</font></b>
</div></td>
<TD onmouseover="bgColor='pink'" style="CURSOR: hand"
onmouseout="bgColor='#990000'" vAlign=center align=middle width=117 height=12>
<DIV align=left>
<p align="center"><b></b>
</div></td>
</tr>
</table>
</center>
</div>
27.Enlace o boton flotante - Ir a tope de pagina
Este script sirve ofrecer a nuestros visitantes un enlace o boton para ir al inicio de pagina " top ". El enlace o boton se encuentra en un layer o capa flotante.
Código:
<-- Codigo ofrecido por desparchemusical.es.tl -->
<head>
<SCRIPT LANGUAGE="JavaScript">
function flotante () {
if (document.all) {
document.all.boton_flotante.style.pixelTop = document.body.scrollTop;
}
else if (document.layers) {
document.boton_flotante.top = window.pageYOffset;
}
else if (document.getElementById) {
document.getElementById('boton_flotante').style.top = window.pageYOffset + 'px';
}
}
if (document.all)
window.onscroll = flotante;
else
setInterval ('flotante()', 100);
function initButton () {
if (document.all) {
document.all.boton_flotante.style.pixelLeft = document.body.clientWidth - document.all.boton_flotante.offsetWidth;
document.all.boton_flotante.style.visibility = 'visible';
}
else if (document.layers) {
document.boton_flotante.left = window.innerWidth - document.boton_flotante.clip.width - 15;
document.boton_flotante.visibility = 'show';
}
else if (document.getElementById) {
document.getElementById('boton_flotante').style.left = (window.innerWidth - 35) + 'px';
document.getElementById('boton_flotante').style.visibility = 'visible';
}
}
</script>
</HEAD>
<BODY onLoad="initButton()">
<SPAN ID="boton_flotante" STYLE="position: absolute; visibility: hidden; top: 0px;">
<A HREF="javascript: window.scrollTo(0, 0); void 0" ONMOUSEOVER="window.status = 'top'; return true;" ONMOUSEOUT="window.status = ''; return true;">Arriba<br>
</A> </SPAN>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Contenido
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Contenido
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
28.Logo Flotante con enlace en pie de pagina
Si queremos mostrar el logo de nuestra web con un enlace, y que se muestre en la parte inferior derecha de nuestras paginas. El logo aparece flotante, es decir que pasará sobre los textos de la pagina
Código:
<-- Codigo ofrecido por wedmasterayuda.es.tl -->
<head>
<SCRIPT LANGUAGE="JavaScript">
function las_variables() {
imgwidth=150;
imgheight=75;
if (navigator.appName == "Netscape") {
horz=".left";
vert=".top";
docStyle="document.";
styleDoc="";
innerW="window.innerWidth";
innerH="window.innerHeight";
offsetX="window.pageXOffset";
offsetY="window.pageYOffset";
}
else {
horz=".pixelLeft";
vert=".pixelTop";
docStyle="";
styleDoc=".style";
innerW="document.body.clientWidth";
innerH="document.body.clientHeight";
offsetX="document.body.scrollLeft";
offsetY="document.body.scrollTop";
}
}
function comprueba_situacion() {
objectXY="a_movimiento";
var availableX=eval(innerW);
var availableY=eval(innerH);
var currentX=eval(offsetX);
var currentY=eval(offsetY);
x=availableX-(imgwidth+30)+currentX;
y=availableY-(imgheight+20)+currentY;
movimiento();
setTimeout("comprueba_situacion()",10);
}
function movimiento() {
eval(docStyle + objectXY + styleDoc + horz + "=" + x);
eval(docStyle + objectXY + styleDoc + vert + "=" + y);
}
</SCRIPT>
</head>
<BODY onload="las_variables(); comprueba_situacion();">
<div id="a_movimiento" style="position:absolute; visibility:show; left:235px; top:-50px; z-index:2">
<table width=10 bgcolor=#ffffff><td>
<a href="http://www.tutores.org" onmouseover="window.status='Visita nuestro site';return true" onmouseout="window.status='';return true"><center><img src="/tutores/images/mundo.gif" alt="Tutores.org" border="0"></center></a></font></td>
</table>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
CONTENIDO DE PAGINA
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
29.Ventana popup Anti-Bloqueo
Al mostrar en nuestras páginas ventanas popup muchos de los visitantes tienen software instalado para impedir que se muestren o para bloquear los popups. Este codigo muestra un anuncio en página el cual evita que nos bloqueen nuestros anuncios.
Código: <-- Codigo ofrecido por wedmasterayuda.es.tl -->
<head>
<script type="text/javascript">
function esconde_anuncio(divId)
30.Calendario anual y mensual
Fantastico calendario, el cual muestra de forma anual o mensual pudiendo ser modificado el año con lo que conseguimos un calendario casi perpetuo.
Código: <-- Codigo ofrecido por wedmasterayuda.es.tl -->
<html>
<head>
<title>Calendario en Javascript</title>
<script langage="JavaScript">
date=new Date();
annee=date.getFullYear();
mois=date.getMonth();
los_meses=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
los_meses2=["J","F","M","A","M","J","J","A","S","O","N","D"];
los_dias=["D","L","M","M","J","V","S","D"];
function Mois()
{
for(i=0;i<7;i++)
{
calendrier+="<td width='"+100/7+"%'>"+los_dias[i+1]+"</td>";
}
calendrier+="</tr>";
afficher.setYear(document.Calendrier.Annee.value);
afficher.setMonth(document.Calendrier.Mois.value);
afficher.setDate(31);
if(afficher.getDate()!=31)afficher.setDate(31-afficher.getDate());
afficher.setMonth(document.Calendrier.Mois.value);
nbjours=afficher.getDate();
nbsem=Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,nbjours);
nbsem=Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,nbjours);
nbsem-=Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,1)-1;
boutmois=new Date(document.Calendrier.Annee.value,document.Calendrier.Mois.value,nbjours);
if(boutmois.getDay()==0)
{
nbsem--;
}
boutmois=new Date(document.Calendrier.Annee.value,document.Calendrier.Mois.value,1);
if(boutmois.getDay()==0)
{
nbsem++;
}
h=1;
for(i=0;i<nbsem;i++)
{
calendrier+="<tr align='center'>";
for(j=1;j<=7;j++,h++)
{
afficher.setDate(h);
if((afficher.getDay()==j||(afficher.getDay()==0&&j==7))&&afficher.getMonth()==document.Calendrier.Mois.value)
{
Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,h-1)
Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,h-1)
calendrier+="<td title='Semaine N°"+Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,h-1)+"'>";
calendrier+=afficher.getDate();
}
else
{
calendrier+="<td> ";
h--;
}
calendrier+="</td>";
}
calendrier+="</tr>";
}
calendrier+="</table>";
document.getElementById("Cal").innerHTML=calendrier;
document.getElementById("SelMois").style.visibility="visible";
}
function Annee()
{
calendrier+="<td width='"+100/13+"%'> </td>";
for(i=0;i<12;i++)
{
calendrier+="<td width='"+100/13+"%'>"+los_meses2[i]+"</td>";
}
calendrier+="</tr>";
afficher.setYear(document.Calendrier.Annee.value);
for(i=0;i<31;i++)
{
afficher.setDate(i+1);
calendrier+="<tr align='center'>";
calendrier+="<td bgcolor='#00FFFF'>"+(i+1)+"</td>";
for(j=0;j<12;j++)
{
afficher.setMonth(j);
switch((i%2)+(j%2))
{
case 2:calendrier+="<td bgcolor='#C0C0C0'";break;
case 1:calendrier+="<td bgcolor='#E0E0E0'";break;
case 0:default:calendrier+="<td";
}
if(afficher.getDate()!=i+1)
{
calendrier+="> ";
afficher.setDate(i+1);
}
else
{
calendrier+=" title='Semaine N°"+Sem(document.Calendrier.Annee.value,j,i)+"'>";
calendrier+=los_dias[afficher.getDay()];
}
calendrier+="</td>";
}
calendrier+="</tr>";
}
calendrier+="</table>";
document.getElementById("Cal").innerHTML=calendrier;
document.getElementById("SelMois").style.visibility="hidden";
}
function Mode()
{
mode=document.Calendrier.Modes.value;
calendrier="<table style='font-size:9' width='100%' border='1'>";
calendrier+="<tr align='center' bgcolor='#00FFFF'>";
afficher=new Date();
if(mode==1){Mois();}
else{Annee();}
}
function Sem(A,M,J)
{
date.setYear(A);
date.setMonth(M);
date.setDate(J);
date2=new Date(A,0,1);
x=1;
do
{
date2.setDate(x);
x++;
}
while(date2.getDay()!=1);
temps=date.getTime()-date2.getTime()+24*60*60*1000;
sem=temps/(1000*60*60*24*7);
return Math.ceil(sem);
}
</script>
</head>
<body onload="javascript:window.status='C A L E N D A R I O';Mode()" onselectstart="return false" oncontextmenu="return false" style="cursor:default">
<div align="right" ID=tableau>
<form name="Calendrier">
<table style='font-size:9'>
<tr align="center">
<td>
<select name="Modes" tabindex="0" onchange="Mode()">
<option value="0">Anual</option>
<option selected value="1">Mensual</option>
</select>
</td>
<td>
<div id=SelMois>
<select name="Mois" tabindex="1" onchange="Mode()">
<script langage="JavaScript">
for(i=0;i<12;i++)
{
document.write("<option ");
if(i==mois)document.write("selected ");
document.write("value='"+i+"'>"+los_meses[i]+"</option>");
}
</script>
</select>
</div>
</td>
<td>
<select name="Annee" tabindex="2" onchange="Mode()">
<script langage="JavaScript">
for(i=(annee-50);i<(annee+51);i++)
{
document.write("<option ");
if(i==annee)document.write("selected ");
document.write("value='"+i+"'>"+i+"</option>");
}
</script>
</select>
</td>
</tr>
<tr align="center">
<td colspan="3">
<div align="center" ID=Cal>
</div>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
{ if (document.layers) document.layers[divId].visibility = 'hide';
else if (document.all) document.all[divId].style.visibility = 'hidden';
else if (document.getElementById) document.getElementById(divId).style.visibility = 'hidden';
}
function mostrar_anuncio(divId)
{ state=typeof topPos;
if(state=='undefined') topPos=-260;
if(topPos < 75)
{ topPos+=3;
if (document.layers) document.layers[divId].top = topPos;
else if (document.all) document.all[divId].style.top = topPos;
else if (document.getElementById) document.getElementById(divId).style.top = topPos;
setTimeout("mostrar_anuncio('pop');",25);
}
}
</script>
</head>
<BODY onload="mostrar_anuncio('pop')">
<script type="text/javascript">
if (parseInt(navigator.appVersion) >= 4 && navigator.javaEnabled())
{ document.write('<div id="pop" style="position:absolute;top:-260;">');
document.write('<table cellpadding="0" cellspacing="2" bgcolor="#7FA3C7" border="0"><tr><td><table cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" border="0">');
document.write('<tr><td align="right" height="24"><a href="javascript:void(0)" onclick="esconde_anuncio(\'pop\')"><img src="/tutores/images/x.gif" border="0" alt="Cerrar Ventana"></a></td></tr>');
document.write('<tr><td align="center"><font size="5"><b><i>Puedes introducir textos, imagenes, flash y enlaces\'</b></font><br><br><img src="/tutores/images/profe.gif"><br><br><b><a href="#">Textos con enlaces!</a></b><br><br></td></tr>');
document.write('</table></td></tr></table>');
document.write('</div>');
if (document.layers) document.layers.pop.left = ((window.innerWidth / 2) - (330 / 2));
else if (document.all) document.all.pop.style.left = ((document.body.offsetWidth / 2) - (330 / 2));
else if (document.getElementById) document.getElementById("pop").style.left = ((window.innerWidth / 2) - (330 / 2));
}
</script>
</body>
Estos son todos los trucos HTLM pero todavia faltan mas asi que disfruten con estos pocos y dejen mensajes en este post sobre que te parece o que no te parecen mis trucos o si hay errores solo disfruta.
Mis paguinas son:
http://desparhcemusical.es.tl/
http://wedmasterayuda.es.tl/
Ultima edición por desparchemusical el Dom Jul 13, 2008 4:03 pm; editado 18 veces
|