- TicNologiaClass

Hoy iniciamos esta sección “Códigos de Ejemplo ” con unos cuantos ejemplos en HTML, que integran pequeños códigos JavaScript y realizan funciones concretas para que podáis añadir a vuestro sitio web o simplemente ver como funciona.

Si deseáis enviarnos códigos interesantes o educativos ( HTML, JavaScript, .NET, C, C++, C#, Visual Basic, etc…) enviadnos vuestros códigos con nuestro formulario de contacto pinchando AQUI! o Pulsando “Contacto” en el pié de página de nuestro blog!

Espero vuestros códigos!!!

Redireccionar una página

Si tenéis una dirección larga, y los servidores que te dan direcciones cortas no tienen buena capacidad de almacenamiento o de tasa de transferencia de datos, con este código podéis hacer que al escribir una dirección se abra otra, solo tenéis que insertar este código en el “index.html” del dominio corto poniendo tu dirección actual donde está en verde:

<html>
  <head>
    <title>Redireccionando la página</TITLE>
      <script LANGUAGE="JavaScript">
        location.href='http://www.chipsypc.com';
      </SCRIPT>
  </HEAD>
  <body>
    <!-- Código del cuerpo de la página -->
  </BODY>
</HTML>

<HTML>

<HEAD>

<TITLE>Redireccionando la página</TITLE>

location.href='http://www.chipsypc.com';

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

Abrir una web en Pop-Up

Con este código vamos a hacer que al entrar en nuestra página automáticamente se abra otra, ej. otra Web nuestra, una sección que queremos mostrar, una publicidad, etc.

<html>
  <head>
    <title>Abriendo otra página web automáticamente</TITLE>
      <script LANGUAGE="JavaScript">
        window.open('http://www.chipsypc.com','Nueva','');
      </SCRIPT>
  </HEAD>
  <body>
    <!-- Código del cuerpo de la página -->
  </BODY>
</HTML>

<HTML>

<HEAD>

<TITLE>Abriendo otra página web automáticamente</TITLE>

window.open('http://www.chipsypc.com','Nueva','');

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

No dejar seleccionar el texto de nuestra Web

Con este código vamos a impedir que los visitantes seleccionen el texto de nuestra página para luego copiarlo a otro lado.

<html>
  <head>
    <title>Texto Bloqueado</TITLE>
      <script LANGUAGE="JavaScript">
        function disableselect(e)
        {
          return false
        }   
        function reEnable()
        {
          return true
        }
        document.onselectstart=new Function("return false")
        if(window.sidebar)
        {
          document.onmousedown=disableselect
          document.onclick=reEnable
        }
      </SCRIPT>
  </HEAD>
  <body>
    <p>
Si intentas copiar este texto no te voy a dejar!!!</p>
</BODY>
</HTML>

<HTML>

<HEAD>

<TITLE>Texto Bloqueado</TITLE>

function disableselect(e)

{

return false

}

function reEnable()

{

return true

}

document.onselectstart=new Function("return false")

if(window.sidebar)

{

document.onmousedown=disableselect

document.onclick=reEnable

}

</SCRIPT>

</HEAD>

<BODY>

<p>Si intentas copiar este texto no te voy a dejar!!!</p>

</BODY>

</HTML>

Horas restantes para finalizar el día

Con este código insertamos un pequeño reloj que indica la cuenta regresiva de las horas, minutos y segundos que faltan para finalizar el día.

<html>
  <head>
    <title>Reloj Regresivo</TITLE>      
  </HEAD>
  <body>
    <h2>
Horas para acabar el día:</h2>
<form NAME="Reloj">
      <input TYPE="text" SIZE="7" NAME="tiempo" VALUE="mm:hh:ss" TITLE="Tiempo restante para finalizar el dia">
      <script LANGUAGE="JavaScript">

        var tiempoAtras;
        updateReloj();

        function updateReloj()
        {
          var tiempo = new Date();
          var hora = 23-tiempo.getHours();
          var minutos = 59-tiempo.getMinutes();
          var segundos = 59-tiempo.getSeconds();

          tiempoAtras = (hora < 10) ? hora :hora;
          tiempoAtras += ((minutos < 10) ? ":0":":") + minutos;
          tiempoAtras += ((segundos < 10) ? ":0":":") + segundos;

          document.Reloj.tiempo.value = tiempoAtras;
          setTimeout("updateReloj()",1000);
        }
      </SCRIPT>   
    </FORM>  
  </BODY>
</HTML>

<HTML>

<HEAD>

<TITLE>Reloj Regresivo</TITLE>

</HEAD>

<BODY>

<h2>Horas para acabar el día:</h2>

var tiempoAtras;

updateReloj();

function updateReloj()

{

var tiempo = new Date();

var hora = 23-tiempo.getHours();

var minutos = 59-tiempo.getMinutes();

var segundos = 59-tiempo.getSeconds();

tiempoAtras = (hora < 10) ? hora :hora;

tiempoAtras += ((minutos < 10) ? ":0":":") + minutos;

tiempoAtras += ((segundos < 10) ? ":0":":") + segundos;

document.Reloj.tiempo.value = tiempoAtras;

setTimeout("updateReloj()",1000);

}

</SCRIPT>

</FORM>

</BODY>

</HTML>

Recomendar página

Con este código podemos hacer que si a un visitante le gustó nuestra Web, la recomiende a un amigo escribiendo su dirección de correo electrónico en la casilla, al hacer click en “Recomendar esta Web” se envía un mensaje de correo con el asunto “Pienso que te puede interesar esta página…” y en el cuerpo del mensaje aparece la dirección completa donde se encuentra el código y el título de la misma.

<html>
  <head>
    <title>Recomendar página</TITLE>
	<script TYPE="text/javascript">
		var good;

		function checkEmailAddress(field)
		{
			var goodEmail=field.value.match(/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$/);

			if(goodEmail)
			{
				good=true;
				alert('El e-mail es válido!');

			}else{
				alert('Por favor introduce un e-mail valido!');
				field.focus();
				field.select();
				good=false;
			}
		}

		u=window.location;
		m="Pienso que te puede interesar esta página...";

		function mailThisUrl()
		{
			good=false;
			checkEmailAddress(document.eMailer.address);

			if(good)
			{
				window.location="mailto:"+document.eMailer.address.value+"?subject="+m+"&body="+document.title+": "+u;
			}
		}

	</SCRIPT>	
  </HEAD>
  <body>
	<form NAME="eMailer">
		<h3>
ENVÍA ESTA PÁGINA A UN AMIGO</h3>
Indica su e-mail:
		</br>
		<input TYPE="text" NAME="address" SIZE="25">
		<input TYPE="button" VALUE="Recomienda esta web!" onclick="mailThisUrl()">
    </FORM>
  </BODY>
</HTML>

<HTML>

<HEAD>

<TITLE>Recomendar página</TITLE>

var good;

function checkEmailAddress(field)

{

var goodEmail=field.value.match(/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$/);

if(goodEmail)

{

good=true;

alert('El e-mail es válido!');

}else{

alert('Por favor introduce un e-mail valido!');

field.focus();

field.select();

good=false;

}

u=window.location;

m="Pienso que te puede interesar esta página...";

function mailThisUrl()

{

good=false;

checkEmailAddress(document.eMailer.address);

if(good)

{

window.location="mailto:"+document.eMailer.address.value+"?subject="+m+"&body="+document.title+": "+u;

}

</SCRIPT>

</HEAD>

<BODY>

<h3>ENVÍA ESTA PÁGINA A UN AMIGO</h3>

Indica su e-mail:

</br>

</FORM>

</BODY>

</HTML>

Crear un formulario o Libro de Visitas

Con este código podemos crear un formulario para que complete el visitante. O también un libro de visitas, luego que el visitante apriete el botón “enviar”, los datos serán enviados a tu casilla de correo.

<html>
	<head>
		<title>Libro de Visitas</title>
	</head>
	<body>
		<h2>
Libro de Visitas</h2>
<form action="mailto:nombre@servidor.com" method="post">
			<table>
<tr>
					<td align=left>Nombre:</td>
					<td><input type="text" size=36 name="nombre"></td>
				</tr>
<tr> 
					<td align=left>Dirección E-mail:</td>
					<td><input type="text" size=36 name="direccion"></td>
				</tr>
<tr> 
					<td align=left>Quien te recomendo esta página?:</td>
					<td><input type="text" size=36 name="procedencia"></td>
				</tr>
<tr> 
					<td align=left>Comentarios:</td>
					<td><textarea rows=5 cols=30 name="comentarios">

<html>

<head>

<title>Libro de Visitas</title>

</head>

<body>

<h2>Libro de Visitas</h2>

<table>

<tr>

<td align=left>Nombre:</td>

</tr>

<tr>

<td align=left>Dirección E-mail:</td>

</tr>

<tr>

<td align=left>Quien te recomendo esta página?:</td>

</tr>

<tr>

<td align=left>Comentarios:</td>

</tr>

</table>

</form>

</body>

</html>

Cuadro explicativo en los enlaces

Sorprende a tus visitantes con este asombroso truco. Al pasar el mouse sobre el link, aparece la explicación de ese link en un cuadro con la cantidad de palabras que queramos poner. Solo tenéis que reemplazar mis direcciones por las tuyas, y el texto deseado por el tuyo.

<script language="JavaScript">
  function escribe(frase){document.desplaza.cuadro.value=frase;}
</script>

<p>
<a href="http://www.google.es" onmouseover="escribe('Página de Google');">Web</a>
</p>

function escribe(frase){document.desplaza.cuadro.value=frase;}

</script>

<p>

</p>

Insertar un sonido o música de fondo

Si queréis que los visitantes escuchen una canción mientras visitan la Web, o simplemente recibirlos con una melodía con estilo de presentación, este es el código que estabas buscando. Solo tenéis que guardar el sonido en el directorio raíz de tu servidor e insertar el siguiente código html:

//Ejemplo 1
<bgsound src="sound1.mid">

//Ejemplo 2
<bgsound src="sound2.au" loop="infinite">

//Ejemplo 3
<bgsound src="sonido.mid" loop=none>
<width=200 height=55 autostart="true" loop="false" hidden="true">

//Ejemplo 1

//Ejemplo 2

//Ejemplo 3

<width=200 height=55 autostart="true" loop="false" hidden="true">

Se recomienda usar sonidos en formato “midi” que son los de menor peso.

Crear un link para un Download

Si queremos poner archivos para que los visitantes los puedan descargar a su PC, solo debemos subir ese archivo a nuestro servidor e insertar en nuestra Web el siguiente código HTML:

// Ejemplo descarga de archivo PDF
<a href="ejemplo.pdf">Descarga PDF</a>

1 2	// Ejemplo descarga de archivo PDF <a href="ejemplo.pdf">Descarga PDF</a>

No existe un comando que inicie la descarga. Lo que sucede es que, siempre que aparece un tipo de archivo no reconocido por el navegador, este comienza a descargarlo automáticamente. Ejemplo: Si el navegador no logra abrir un archivo “zip” (compactado), inicia la descarga automáticamente.

Subrayar un link al pasar el mouse por encima

Con este código podemos lograr ese tan conocido efecto que al pasar el mouse sobre un link, este se subraye. Podemos hacer que tenga un color antes de visitar el link, y que tenga otro una vez visitado.

<style type="text/css">
  <!--
  a:link{color:red;text-decoration:none}
  a:visited{color:gray; text-decoration:none}
  a:active{text-decoration:none}
  a:hover{color:blue; text-decoration:underline}
  -->
</style>

<p>
<a href="1.html">URL1</a>
  <a href="2.html">URL2</a>
  <a href="3.html">URL3</a>
</p>

<!--

a:link{color:red;text-decoration:none}

a:visited{color:gray; text-decoration:none}

a:active{text-decoration:none}

a:hover{color:blue; text-decoration:underline}

-->

</style>

<p>

</p>

Cambia el puntero a una mirilla de disparo!

Transforma la clásica flechita de Windows en una mira de disparo.

<style type="text/css">
<!--
body{cursor:crosshair}
-->
</style>

<!--

body{cursor:crosshair}

-->

</style>

Comentario sobre un link en la barra de estado

Al pasar el mouse sobre el link deseado, veremos en la barra de estado un comentario sobre éste.

<a href="http://wwww.chipsypc.com"
onmouseout="window.status=""
onmouseover="window.status='Aquí aparece el mensaje que tu quieras';
return true">Chipsypc.com</a>
"

<a href="http://wwww.chipsypc.com"

onmouseout="window.status=""

onmouseover="window.status='Aquí aparece el mensaje que tu quieras';

return true">Chipsypc.com</a>

Dificulta el copiado de nuestra web

Con este recurso sencillo podemos hacer más difícil el acceso al código-fuente o la copia de imágenes de nuestro sitio. Cuando el visitante haga click con el botón derecho del mouse, surgirá un mensaje creado previamente por nosotros. Recordemos que a algunas personas no les gusta este tipo de bloqueo. Nosotros tenemos que decidir si queremos incluirlo o no en nuestras páginas.

Podemos colocarlo antes de la etiqueta <html> o después de la etiqueta <body>.

<script language=JavaScript>

functionright(e)
{
 if(navigator.appName == 'Netscape'&&(e.which == 3 || e.which == 2))
 {
  alert("Coloca mensaje aquí");
  return false;
 }
 elseif(navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3))
 {
  alert("Coloca mensaje aquí");
  return false;
 }
return true;
}

document.onmousedown=right;
if(document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;

</script>

functionright(e)

{

if(navigator.appName == 'Netscape'&&(e.which == 3 || e.which == 2))

{

alert("Coloca mensaje aquí");

return false;

}

elseif(navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3))

{

alert("Coloca mensaje aquí");

return false;

}

return true;

}

document.onmousedown=right;

if(document.layers) window.captureEvents(Event.MOUSEDOWN);

window.onmousedown=right;

</script>

Nota: Para evitar este truco, también hay una forma, si entras a una página que tiene este truco que no te deja copiar imágenes o texto, solo tenéis que hacer click con el botón derecho del mouse sobre la barra de estado y sin soltarlo arrastrarlo hasta la imagen. Listo, se abrirá el menú como si la página no estuviese bloqueada a la copia. Hay que tener en cuenta que muy poca gente conoce este truco, por lo tanto puedes usar tranquilo el truco de bloqueo.

Este código html te sirve para crear un link para que el visitante pueda hacer que tu página sea la de inicio de su computadora. Con solo hacer clic sobre el link creado, tu página se iniciará automáticamente cada vez que esa persona se conecte a Internet.

<a class=chlnkstyle="FONT-WEIGHT:bold;CURSOR:hand;COLOR:#004080;FONT-FAMILY:Verdana" onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.chipsypc.com');"><font face=Arial color=#000000 size=-2><u>Establecer como página de inicio</U></FONT></a>

1	<a class=chlnkstyle="FONT-WEIGHT:bold;CURSOR:hand;COLOR:#004080;FONT-FAMILY:Verdana" onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.chipsypc.com');"><FONT face=Arial color=#000000 size=-2><U>Establecer como página de inicio</U></FONT></a>

Enviar un e-mail con Asunto y Mensaje

Con este truco podéis hacer que al hacer clic sobre una palabra, se abra el Outlook para enviar un mensaje con tu dirección, el asunto que quieras y el texto que quieras. Por ejemplo: Hacer clic aquí para mandarme un mensaje:

<a href="mailto:chipsypc@gmail.com?subject=Prueba&body=Esto es una prueba...">Pulsa aqui para enviar un correo de prueba</a>

1	<a href="mailto:chipsypc@gmail.com?subject=Prueba&body=Esto es una prueba...">Pulsa aqui para enviar un correo de prueba</a>

Abrir un link en una ventana nueva

Cuando tenemos Links en nuestras páginas y alguien hace clic sobre ellos, automáticamente se abre esa dirección en nuestra ventana. Con este truco podemos hacer que al hacer clic sobre un determinado Link, esta dirección se abra en una ventana nueva, quedando la nuestra también abierta:

TicNologiaClass

Cosas interesantes

Redireccionar una página

Abrir una web en Pop-Up

No dejar seleccionar el texto de nuestra Web

Horas restantes para finalizar el día

Recomendar página

Crear un formulario o Libro de Visitas

Cuadro explicativo en los enlaces

Insertar un sonido o música de fondo

Crear un link para un Download

Subrayar un link al pasar el mouse por encima

Cambia el puntero a una mirilla de disparo!

Comentario sobre un link en la barra de estado

Dificulta el copiado de nuestra web

Enviar un e-mail con Asunto y Mensaje

Abrir un link en una ventana nueva

You May Also Like

Publicaciones recientes

Publicación más popular

Total de visualizaciones

Páginas