// Creamos el formulario auxiliar
var form = document.createElement( "form" );

// Le añadimos atributos como el name, action y el method
form.setAttribute( "name", "formulario" );
form.setAttribute( "action", "" );
form.setAttribute( "method", "post" );

// Creamos un input para enviar el valor
var input = document.createElement( "input" );

// Le añadimos atributos como el name, type y el value
input.setAttribute( "name", "prueba" );
input.setAttribute( "type", "hidden" );
input.setAttribute( "value", "Soy una prueba" );

// Añadimos el input al formulario
form.appendChild( input );

// Añadimos el formulario al documento
document.getElementsByTagName( "body" )[0].appendChild( form );

// Hacemos submit
document.formulario.submit();

A modo de explicación, lo que hacemos es, en cualquier evento que tendrás que especificar, creamos un formulario auxiliar, donde le insertamos un input invisible con un valor y hacemos submit para que dichos datos se envíen a la página web especificada en el atributo action del formulario. De esta forma estamos enmascarando el envío de parámetros por POST usando Javascript.

Por defecto contamos con etiquetas en HTML para este fin, pero Mootip, un hint desarrollado en Javascript – Mootools, nos ofrece muchas más posibilidades y un diseño más moderno y minimalista, aparte de ser un recurso totalmente gratuito y desarrollado por nosotros. Conozcamos un poco más a Mootip.

Ejemplo de Hint con Mootip

¿Qué podemos hacer con Mootip: Hint desarrollado en Javascript – Mootools?

Podemos mostrar texto, imágenes y videos en un pequeño hint, pudiéndolo posicionar a nuestro antojo o dejar que se posicione correctamente automáticamente.

Instalación de Mootip: Hint desarrollado en Javascript – Mootools

En primer lugar deberemos descargar Mootip y descomprimir los archivos en nuestro proyecto. También deberemos descargar la librería de Mootools y alojarlo también en el proyecto.

A continuación deberemos de incluir los archivos javascript y el archivo css -puedes copiar su contenido en tu css principal- en nuestro HTML de la siguiente forma:

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="MooTip.js"></script>

Una vez incluidos los archivos deberemos de identificar en nuestro texto los campos donde queramos mostrar el hint. Por ejemplo si queremos mostrar una imágen lo haremos usando un anchor de la siguiente forma:

<a id="megaman" title="Titulo sobre Megaman" href="http://www.mootip.idkinformatica.com/extra/megaman.jpg">Mega Man</a>

Como podéis comprobar le hemos indicado una ID que más adelante necesitaremos. Ahora mostraremos por ejemplo un texto simple y lo hacemos de la siguiente forma:

<span id="capcom" title="Empresa japonesa desarrolladora y distribuidora de videojuegos.">Capcom</span>

Finalmente deberemos de indicar que los IDs antes especificados deben de ser tratados como hints. Lo haremos usando un código dentro de nuestro head como el siguiente:

<script type="text/javascript">
	window.addEvent( "domready", function()
	{
		$( "megaman" ).mooTip();
		$( "capcom" ).mooTip( { position: "bottom" } );
	});
</script>

Como podéis apreciar el primer hint será mostrado de forma natural, mientras que el segundo forzaremos que se muestre hacia abajo.

Información acerca de Mootip: Hint desarrollado en Javascript – Mootools

Mootip tiene un peso aproximado de 10 KB sin comprimir, en la descarga viene el archivo sin compresión, dejando a vuestra elección el comprimir el javascript o no.

También Mootip viene en dos colores, con tonalidades blancas o con tonalidades negras, cambiándose desde el archivo css las rutas de las imágenes.

Enlace: Presentación de Mootip: Hint desarrollado en Javascript – Mootools
Descarga: Descargar Mootip: Hint desarrollado en Javascript – Mootools

[Defender of the Favicon: Juega en un favicon]

Os vamos a enseñar un código para eliminar el marco de Google Imágenes y no perder ninguna visita:

Ejemplo de previsualización y marco de Google Imágenes.

En primer lugar deberemos dirigirnos al código fuente de nuestra página web y localizar donde se encuentra el header (head) de nuestra página. Por ejemplo, si usamos WordPress podremos localizarlo en la carpeta “/wp-content/themes/<nombre de nuestro theme>/header.php”. Una vez localizado, debemos editar y añadir justo sobre el cierre del </head> el siguiente código:

<head>
...
	<script type="text/javascript">
		if(top.location!=this.location) top.location=this.location;
	</script>
</head>

Este código lo que hace es que cuando alguien encuentra una imágen en Google Imágenes perteneciente a nuestra web, Google mostrará una previsualización de la misma dentro de un marco, pero el código hará rápidamente una redirección a nuestra web. Por supuesto hará lo mismo para cualquier tipo de iframe, así que es cuestión de que cada usuario haga uso de este código como mejor convenga a sus necesidades.

Fuente: Oloblogger

Si estamos pidiendo una fecha, ¿que mejor que un calendario donde el usuario pueda seleccionarla?. Os traemos una caja de texto con calendario en Javascript y Mootools para hacer mejor esta labor:

Descripción de Mootools Calendar

Caja de texto con calendario para formulario desarrollado en Javascript y con la librería Mootools. Útil para la introducción de una fecha en un formulario web de forma fácil e intuitiva.

Requisitos de Mootools Calendar

El calendario requiere tener Mootools 1.1 con las clases Fx.Style, Element y Window. Si queremos activar el drag requeriremos también de la clase Drag de Mootools.

Ejemplo de instalación sencilla

Os propondremos una forma de instalar fácilmente, pero si necesitáramos indagar un poco más y hacer uso de todas las funcionalidades lo mejor sería visitar la web del autor (en la sección de enlaces del artículo tenéis los enlaces al calendario y su instalación).

En primer lugar deberemos de añadir los archivos de Javascript tanto de Mootools como del calendario de esta forma:

<head>
  ...
  <script type="text/javascript" src="mootools.js"></script>
  <script type="text/javascript" src="calendar.js"></script>

</head></code>

<input id="date" name="date" type="text" />

<head>
  ...
  <script type="text/javascript">
    window.addEvent("domready", function() { myCal = new Calendar({ date: "d/m/Y" }); });
  </script>
</head>