Nideaderedes

Alternar imágenes con JavaScript

He encontrado aquí un ejemplo de código que permite mostrar alternativamente un número indeterminado de imágenes. El sencillo ejemplo se ajusta al número de imágenes que queramos.

Tiene un pequeño problema, y es que si las imágenes son de distitas alturas las página se desplazará verticalmente (como sucede en el ejemplo) haciendo la lectura de la misma bastante incómoda.

Una posible solución sería añadir estas líneas al fichero JavaScript:

var altura = 0;
function inicializar() {
	imagen = new Image();
	for(i=0;i<bannerImg.length;i++) {
		document.banner.src = bannerImg[i];
		alert(document.banner.height);
		if (altura<document.banner.height)
			altura = document.banner.height;
	}
	cycleBan();
}

y sustituir:

window.onload=cycleBan;

por:
window.onload=inicializar;

La función inicializar calcula la altura máxima de las imágenes y la almacena en la variable “altura”. Este valor podría usarse para establecer la altura de la capa o celda de una tabla que contenga las imágenes.

Actualización: Añado aquí el código por si lo borran [Fuente: The JavaScript Source]

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Lee Underwood :: http://javascript.internet.com/ */

var bannerImg = new Array();
  // Enter the names of the images below
  bannerImg[0]="image_jss.gif";
  bannerImg[1]="image_js.gif";
  bannerImg[2]="image_wr.gif";

var newBanner = 0;
var totalBan = bannerImg.length;

function cycleBan() {
  newBanner++;
  if (newBanner == totalBan) {
    newBanner = 0;
  }
  document.banner.src=bannerImg[newBanner];
  // set the time below for length of image display
  // i.e., "4*1000" is 4 seconds
  setTimeout("cycleBan()", 4*1000);
}
window.onload=cycleBan;











Free JavaScripts provided
by The JavaScript Source

Herramientas para medir el Page-Rank

Live PageRank es una herramienta creada con Ajax que permite conocer el PageRank de una web conectándose a unos cuantos datacenters de Google (unos 73). Basta con introducir la URL deseada en el formulario que nos muestra y listará la información disponible en cada uno de los datacenters.

También disponen de una extensión para Firefox que permite ver el Page-Rank de una web.

Y otra curiosa herramienta es ésta que muestra a los visitantes de tu web el PageRank de la misma. Recomendación: no usar con PageRank 0 :-).

Vía: 521 Megas.

Actualización: La extensión para Firefox y la herramienta para mostrar el PageRank de tu web parece que ya no funcionan debido a cambios que han hecho en Google.

Colección de tutoriales CSS

A través de Fresqui he encontrado una interesantísima recopilación de tutoriales de CSS. He echado un vistazo superficial a algunos de ellos y verdaderamente prometen, como el de las esquinas redondeadas usando únicamente CSS (sin JavaScript ni imágenes).

Pasándome a XHML 1.0

Después de un tiempo postponiéndolo he aprovechado este pequeño descanso de la Semana Santa para realizar unas mejoras en una de las webs de la empresa. Después de leer bastante documentación y “trastear” con el html y el CSS por fin lo he conseguido… ahora la web http://www.urlanheat.com pasa la prueba del algodón del XHTML Strict 1.0.

Hojear estilos con Firefox

Hoy he encontrado un interesantísimo plug-in para Firefox (mi navegador favorito) que permite ver los estilos css de una web de manera muy cómoda. Basta con pasar el ratón por encima de un ejemento para ver su estilo.

Este plug-in se puede conseguir aquí:

http://www.mozilla.com/firefox/

Se puede activar o desactivar cuando se desee simplemente con hacer click en la barra de herramientas.

Evitar a los spambots

He encontrado en Profressor’s Coding Corner un interesante script que evita que los spambots (1) puedan recopilar los emails que publicas en tu web. La única pega que tiene es que si el visitante tiene JavaScript desactivado no se muestra el email. Es una pega pequeña dado que hoy en día casi todo el mundo lo tiene activado. De todas formas se recomienda disponer de otra forma de contacto, como por ejemplo un formulario.

Aquí va el enlace:

http://www.professorscodingcorner.com/snippets/stopspambots.shtml

También hay otra forma de ocultar el email usando CSS. Este método tiene varios problemas:

• Necesita que el navegador sea compatible con CSS2.
• Se muestra un email pero no se puede hacer click sobre él.
• En Thunderbird ni siquiera se puede seleccionar el email (lo acabo de comprobar).

El enlace al artículo.

(1) Un spambot es un programa que se dedica a navegar por las webs recopilando emails para, después, bombardearlos con toda esa basura que tanto nos gusta recibir.

(2) Supongo que estos métodos no serán válidos si el spambot es capaz de analizar JavaScript y CSS2 pero seguramente usando estos métodos se reducirá notablemente la cantidad de spammers con acceso a nuestro email.

¿Atrapado en un frame?

Seguramente habrás visto alguna vez cómo otras webs enlazan con la tuya pero encerrándola dentro de un frame. De esta forma puede dar la impresión al visitante que tu web es parte de la otra.

Este es un tema ya un poco antiguo pero recientemente he descubierto que una de mis webs, El Rincón del C, estaba siendo enlazada desde emagister usando esta técnica. Incluso llegan a decir que El Rincón del C está alojado en su servidor.

¿Cómo librarse de un frame?

Es muy fácil, basta una línea de código Javascript que podremos colocar justo debajo de la etiqueta “body” encerrado entre un par de etiquetas “script”.

En este sencillo ejemplo vamos a comprobar si la página sin_frames.html está dentro de un frame y si es así vamos a sacarla de ahí:

if (top != self) top.location.href = ’sin_frames.html’;

Cuando se evalúa la condición top!=self el miniscript comprueba si es la ventana principal. En caso de no ser así quiere decir que la página está atrapada en un frame y gracias a top.location.href podemos liberarla.

Nota: si no funcionara probar con top.location en lugar de top.location.href.