Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje11-07-2008, 16:04 (UTC)    
Título del mensaje: <-- GRANDES trucos para tu web --> &#168; 3

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>&nbsp;</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>&nbsp";
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+"%'>&nbsp</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+=">&nbsp";
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/
Código:


Ultima edición por desparchemusical el Dom Jul 13, 2008 4:03 pm; editado 18 veces
Mensaje11-07-2008, 17:04 (UTC)    
Título del mensaje:

lo único que falta es que para que funcione el Ir arriba deben ir a Texto por encima de la página y poner:

<a name="top"></a>
Mensaje11-07-2008, 17:08 (UTC)    
Título del mensaje:

nixoweb escribió:
lo único que falta es que para que funcione el Ir arriba deben ir a Texto por encima de la página y poner:

<a name="top"></a>



Estas en todo lo correcto si que sabes
Mensaje12-07-2008, 00:38 (UTC)    
Título del mensaje:

Has dividido los códigos en secciones?, pues el código 11 dice algo de que ese código debía ir en la sección Javascript o algo de eso. no veo las secciones.

otra cosa: el código 29 y 15 no funcionan.


Ultima edición por nixoweb el Vie Jul 11, 2008 8:42 pm; editado 1 vez
Mensaje12-07-2008, 00:45 (UTC)    
Título del mensaje:

nixoweb escribió:
Has dividido los códigos en secciones?, pues el código 11 dice algo de que ese código debía ir en la sección Javascript o algo de eso. no veo las secciones.

otra cosa: el código 29 y 15 no funcionan.



Agradesco tu informes de errores pero te quiero decir algo es que hacer un post de estos es un pocco complicado y la organizacion de codigos es un poco dificil para el sabado todo estara perfectamente arreglado y los errores permiteme verlos y los arreglo
Mensaje12-07-2008, 01:15 (UTC)    
Título del mensaje:

ok
Mensaje12-07-2008, 20:46 (UTC)    
Título del mensaje:

nixoweb escribió:
ok



Por favor disculpenmen mi ausencia es que hoy es un dia muy tenso y ocupado para mi disculpenmen por mi ausencia en este dia
Mensaje12-07-2008, 22:56 (UTC)    
Título del mensaje:

Sugiero algo, la verdad ni leo este post por una razon, es muy complicado y aburridor leer tantos codes juntos y mas aun, cuando deforman el post, lo siento pero digo lo ke pienso y opino ke deberias usar esta web:
http://textsnip.com/
donde con solo introducir el code ke kieras publicar, lo metes en esa cajita y luego das clic en donde dice "get my url" y esa seria la url ke copiaras aki, asi seria mas legible este post y no se deformaria como esta ahora
Mensaje13-07-2008, 04:05 (UTC)    
Título del mensaje:

stan buenos (Y)
Mensaje13-07-2008, 06:58 (UTC)    
Título del mensaje:

LA VERDAD ES QUE DE LOS 6 QUE ME INTERESARON PROBE, NINGUNO FUNCIONA. sALUDOS.
______________
http://www.juanpablodelacruz.com
Mensaje13-07-2008, 20:02 (UTC)    
Título del mensaje:

delacruzgarcia escribió:
LA VERDAD ES QUE DE LOS 6 QUE ME INTERESARON PROBE, NINGUNO FUNCIONA. sALUDOS.



La verdad todos funcionan ya los arregle todos seguramente mirastes mal y a un truco que parece javasricpt y no lo es miren bien su contenido aver si es javascript y
para didita lo que te quiero decir es que puede ser aburrido este estilo pero de todas maneras le es util para algunos usuarios.
Mensaje29-07-2008, 14:33 (UTC)    
Título del mensaje: ayuda sobre la 30

necesito que me ayuden a decir como se marcan los dias me seria de muy gran ayuda

yo esque no soy muy listo en estos temas

es la pregunta 30
Mensaje29-07-2008, 19:29 (UTC)    
Título del mensaje:

desparchemusical escribió:

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:
<head>
<script type="text/javascript">
function esconde_anuncio(divId)

Y cual es el codigo para agregar el pop up?
Ya que hay una gran cantidad de poner ventanas emergentes, otra cosa, estás seguro que esa etiqueta no hay que cerrarla?
Código:
<head>
<script type="text/javascript">
function esconde_anuncio(divId)
</script>
</head>
Mensaje29-07-2008, 21:43 (UTC)    
Título del mensaje:

Pues es un error que se me paso muchas gracias por el aviso es que es dificil analizar tantos codigos ppero gracioas por la correcion
Mensaje30-07-2008, 00:57 (UTC)    
Título del mensaje:

desparchemusical escribió:
Pues es un error que se me paso muchas gracias por el aviso es que es dificil analizar tantos codigos ppero gracioas por la correcion
Y cual es el code para agregar el pop up, has probado si resulta?
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group