<style type="text/css">
span.test { direction: rtl; unicode-bidi:bidi-override; }
</style>
<p><span class="test">moc.tset@tset</span></p>

Muy útil e ingenioso pero al no poder poner un “mailto” no sirve de mucho, para estos casos mejor utilizar jQuery para ocultar el código del email.

Mejoras implementadas:
- El script añade automáticamente las capas, no hace falta insertar el código en cada página.
- Se carga el contenido por Ajax.
- Podemos pasarle parámetros de anchura de la capa.

//Variable que almacena la posición del scroll, por defecto tiene valor 0.
scrollCachePosition = 0;
function popupCssShow (URL, width, height) { //Parámetros: URL (URL, Anchura de la capa, Altura de la capa)
	if (typeof document.body.style.maxHeight === "undefined") {//Añade la propiedad maxHeight para IE6.
		$("body","html").css({height: "100%", width: "100%"});
	}
	//La capa 'cssBackground' ocupa toda la pantalla para darle una opacidad.
	//La capa 'cssPopupContainer' es la capa madre del PopUp.
	if (!$("#cssBackground").length>0) {
		$("body").append("<div id=\"cssBackground\"></div><div id=\"cssPopupContainer\"><div id=\"cssPopup\"></div></div>"); //Añade las capas en la página.
	}
	if (width!=undefined) {
		$("#cssPopup").css("width",width);
	}
	if (height!=undefined) {
		$("#cssPopup").css("height",height);
		$("#cssPopup").css("overflow","auto");
	}
	$("#cssBackground").slideDown("slow"); //Efecto jQuery
	scrollCachePosition = $(window).scrollTop();
	window.top.scroll(0,0);
	$("#cssPopup").load(URL,function(){
		//$("#cssPopupContainer").center(); //Si activamos esta línea y desactivamos la de abajo nos centrará el PopUp en el medio de la pantalla.
		$("#cssPopupContainer").css("top",50);
		ancho=$(window).width();
		$("#cssPopupContainer").slideDown("fast", function () {
			anchopopup=$("#cssPopup").width();
			$("#cssPopupContainer").css("width",ancho);
		});
	});
}

function popupCssHide () {
	$("#cssPopupContainer").slideUp("fast", function () {
		$("#cssBackground").fadeOut("fast",function () {
			$("#cssBackground").remove(); //Elimina la capa 'cssBackground'.
			$("#cssPopupContainer").remove(); //Elimina la capa 'cssPopupContainer'.
		});
	});
	if (scrollCachePosition > 0) {
		window.top.scroll(0,scrollCachePosition); //Vuelve a la posición donde estaba el scroll.
		//Reseteamos la variable scrollCachePosition a 0 para poder ejecutar el script tantas veces como sea necesario.
		scrollCachePosition = 0;
	}
}

La hoja de estilos quedaría de la siguiente manera:

#cssBackground 		{height:100%; width:100%; background-color:#000; display:none; position:fixed; top:0; left:0; z-index:100; float:left; opacity:0.65;}
#cssPopup 			{margin:0 auto;}
#cssPopupContainer 	{position:absolute; display:none; z-index:101; width:100%;}

Para que IE6 haga la opacidad y la posición fija tendremos que insertar álgún hack en un condicional en el ‘head’:

<!--[if lt IE 7]>
<style type="text/css" media="all">
	#cssBackground {_position:absolute !important; filter:alpha(opacity=65);}
</style>
<![endif]-->

Para que IE7 haga la opacidad insertamos lo siguiente con un condicional en el ‘head’:

<!--[if IE 7]>
<style type="text/css" media="all">
	#cssBackground {filter:alpha(opacity=65);}
</style>
<![endif]-->

Según la URL que venga añadirá un fichero u otro:
Estructura del PopUp:

<?
if ($_GET['page']=="pagina-1") {
	include ("includes/pagina-1.php");
}elseif ($_GET['page']=="pagina-2") {
	include ("includes/pagina-2.php");
	}
?>

Si le pasamos page=pagina-1 incluirá el fichero pagina-1.php tal y como lo pongo en la condición de arriba.

Para llamar al popup sería de la siguiente forma:

<a href="javascript:void(0);" onclick="popupCssShow('popup.php?page=pagina-1', 460);" title="Abrir PopUp">Abrir PopUp</a>

También le pasamos el parámetro ’460′ para que nos habrá la ventana a ’460px’.

Podéis ver un ejemplo aquí.
Descarga del ejemplo aquí.

Nota:
Para que os funcione tenéis que alojar el directorio en vuestro servidor o en local, ya que el ejemplo utilizo php para abrir un fichero u otro.

Hemos visto como hacer un PopUp con un iframe transparente utilizando thichbox, os voy a mostrar otro método sin utilizar un iframe, simplemente con capas y con la ayuda de jQuery.
Lo primero que necesitamos es una capa que ocupe toda la pantalla y que tenga una opacidad.

<div id="capaPopUp"></div>

Luego necesitamos la ventana del popup.

<div id="popUpDiv">
	<div id="capaPng">
		<div>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales vulputate erat. Nulla facilisi. Sed porta velit. Sed nec mi.
		</div>
		<a href="javascript:void(0);" title="Cerrar" id="cerrar"><img src="wp-content/examples/jquery/css-popup/imagenes/icons/cerrar.gif" title="Cerrar" alt="Cerrar" /></a>
	</div>
</div>

En nuestra hoja de estilos añadimos los siguientes estilos (Comento línea a línea para que sea fácil de entenderlo):

/**************************************************************************
ESTILOS PARA LA VENTANA POPUP 20090323@JCP
***************************************************************************/
#capaPopUp {
	background-color:#000;  	/* Le damos la el color de la opacidad. */
	opacity:0.65; 				/* Este valor mostrará la intensidad de la opacidad. */
	position:absolute; 			/* La posición tendrá que ser absoluta. */
	z-index:9001; 				/* Esta propidad es para añadir la capa superpuesta al nivel 9001. */
	top:0; 						/* Para que posicione la capa al punto '0' del top de la página. */
	left:0; 					/* Para que posicione la capa al punto '0' a la izquieda de la página. */
	width:100%; 				/* El valor por defecto que tendrá que expandirse. */
	height:100%; 				/* El valor por defecto que tendrá que expandirse. */
	display:none;				/* Por defecto estará desactiva */
}
#popUpDiv {
	position:absolute; 			/* La posición tendrá que ser absoluta. */
	z-index:9002; 				/* Esta propidad es para añadir la capa superpuesta al nivel 9002 (antes que la capa 'capaPopUp'). */
	overflow:auto;				/* Esta propiedad la indicamos por si el contenido es más grande que la capa que por defecto salga el 'scroll'. */
	left:50%; 					/* Para posicionar horizontalmente la capa al centro de la página */
	display:none; 				/* Por defecto estará desactiva */
	top:50%; 					/* Para posicionar verticalmente la capa al centro de la página */
}
/**************************************************************************
ESTILOS PROPIOS DEL POPUP 20090323@JCP
***************************************************************************/
#capaContent {
	display:block;
	width:400px; 				/* Necesario para que el script centre la capa horizontalmente en la página */
	height:200px;				/* Necesario para que el script centre la capa verticalmente en la página */
	background-color:#FFF;
}

Para que Internet Explorer haga la opacidad tendremos que insertar un condicional en el ‘head’:

<!--[if IE]>
<style type="text/css" media="all">
	#capaPopUp 	{filter:alpha(opacity=65);}
</style>
<![endif]-->

Este condicional quiere decir: Si eres IE añade esta clase.

jQuery en acción…
Primero, añadimos la librería jQuery en el ‘head. Una vez hecho esto insertamos el script para hacer funcionar nuestra capa PopUp (comento las líneas para que sea más fácil entender el script).

/*
 * jQuery CSS popUp
 * http://dixso.net/
 *
 * Copyright (c) 2009 Julio De La Calle Palanques
 *
 * Date: 2009-03-27 12:34:00 - (Viernes, 27 Mar 2009)
 *
 */

//Variable que almacenará la posición del scroll, por defecto tiene valor 0.
var scrollCachePosition = 0;

$(function() {
	$("#abrirPop").click(function(event) {
		scrollCachePosition = $(window).scrollTop();
		//Envío el scroll a la posición 0 (left), 0 (top), es decir, arriba de todo.
		window.top.scroll(0,0);

		//Si el body es mas grande que la capa 'wrapper' incrementa la altura del body a la capa 'capaPopUp'.
		if ($("body").outerHeight()>$("#wrapper").outerHeight()){
			var altura=$("body").outerHeight();
	    }else{
		//Si la capa 'wrapper' es más grande que el body incrementa la altura de la capa 'wrapper' a la capa 'capaPopUp'.
			var altura=$("#wrapper").outerHeight();
		}
		window.document.getElementById("capaPopUp").style.height=altura+"px";
		event.preventDefault();
		//Muestro la capa con el efecto 'slideToggle'.
		$("#capaPopUp").slideToggle();

		//Calculo la altura de la capa 'popUpDiv' y lo divido entre 2 para darle un margen negativo.
		var altura=$("#popUpDiv").outerHeight();
		$("#popUpDiv").css("margin-top","-"+parseInt(altura/2)+"px");

		//Calculo la anchura de la capa 'popUpDiv' y lo divido entre 2 para darle un margen negativo.
		var anchura=$("#popUpDiv").outerWidth();
		$("#popUpDiv").css("margin-left","-"+parseInt(anchura/2)+"px");

		//Muestro la capa con el efecto 'slideToggle'.
		$("#popUpDiv").slideToggle();
	});
	$("#cerrar").click(function(event) {
		event.preventDefault();
		//Cierro las capas con el efecto 'slideToggle'.
		$("#capaPopUp").slideToggle();
		$("#popUpDiv").slideToggle();
		//Si la variable scrollCachePosition es mayor que 0 incrementará la posición del scroll al valor que se almacenó.
		if (scrollCachePosition > 0) {
			window.top.scroll(0,scrollCachePosition);
			//Reseteamos la variable scrollCachePosition a 0 para poder ejecutar el script tantas veces sea necesario.
			scrollCachePosition = 0;
		}
	});
});

¿Qué hace el script exactamente?
- Calcula la altura actual de todo el ‘body’ para hacer la opacidad.
- Calcula la altura y anchura de la ventana popUp definida en las CSS para poder centrar la capa horizontal y vertical.
- Almacena en una variable la posición del scroll actual para ser redirigido una vez al cerrar la ventana popUp.
- Añade efectos jQuery para la visualización de la ventana PopUp.

¿Ventajas respecto a un iFrame?
No muchas, teniendo en cuenta que en un iFrame se puede interactuar mejor, pero este script es mucho más rápido que un iFrame ya que llama la venta cuando ya está cargada en el código ‘html’.

También este script es útil cuando la venta popUp tiene mucha altura (El scroll sale en el navegador, lo contrario que en un iFrame, el scroll saldría en la propia ventana). Otra ventaja sería que tenemos el control total del evento, es decir, podemos personalizar nuestra ventana popUp a nuestro gusto.

En el ejemplo veréis que he añadido mucho texto para que salga el scroll y poder ver el script con todas sus funcionalidades, el link para “lanzar” el popUp está bajo de todo.

Nota: Este script funciona con TODOS los navegadores incluido el Internet Explorer 6.

Ejemplo: aquí.
Descarga: aquí.

Desde un punto de vista de diseño, sin embargo, menús desplegables son una excelente opción, ya que puede ayudar a limpiar una concurrida presentación.

Aquí os dejo una buena recopilación de menús desplegables.

<iframe allowtransparency="allowtransparency" style="border:#FFF solid 2px;" src="iframe.php"></iframe>

Nota:
- Para lograr la transparencia es necesario el elemento: allowtransparency=”allowtransparency” para IE, claro.
- El borde que le pongo al iframe es para que se vea mejor el ejemplo (más a bajo).

Én el fichero dónde se llamará el iframe añadimos el siguiente estilo:

body 	{background-color:transparent;} /* fondo transparente para los navegadores NORMALES */

Ejemplo aquí.

#capaPng {
	height:300px;
	width:400px;
	background-image:url(imagenes/img.png) !important;
	background-image:none;
	filter:none !important;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dixso.net/wp-content/examples/css/png-ie/imagenes/img.png');
}

Y en el código html esto:

<div id="capaPng"></div>

Nota:
- Es necesario poner la altura (height) y anchura (width) de la capa para que los navegadores posicionen correctamente el png.
- Los ‘filter’ (para IE6) es necesario poner la ruta absoluta del png, si no insertáis la ruta absoluta no saldrá reflejado el png.

Ejemplo aquí.

El elemento ‘filter’ no es válido según W3C para las hojas de estilos, por lo tanto, esto no sería del todo correcto… ¿Solución?

Añadir esto:

	background-image:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dixso.net/wp-content/examples/css/png-ie/imagenes/img.png');

En nuestras hojas de estilo IE6 del Browser detect jQuery, de esta forma tendremos nuestra hoja de estilos principal validada y en la hoja de estilos de IE6 insertaremos todos los hack’s que sean necesarios para ver las cosas correctamente.

Ejemplo aquí.

Ejemplo de select por defecto en IE6 y IE7:

En el resto de navegadores bastaría con ponerle esto a nuestra hoja de estilos (css):

select {border:none;}

Nos quedaría de la siguiente forma:

Para que nos quedara igual como el resto de los navegadores estándares tendríamos que añadir lo siguiente en nuestra hoja de estilos (css) yo recomiendo añadir el código en una hoja específica para cada navegador (IE6 y IE7).

.capaSelect {
  position:relative;
  width:126px;
  height:18px;
  overflow:hidden;
}
.capaSelect select {
  background:#9999CC;
  position:absolute;
  width:130px;
  top:-2px;
  left:-2px;
}

Y el código html:

<div class="capaSelect">
    <form>
        <select>
            <option>dixso.net</option>
        </select>
    </form>
</div>

Ejemplo aquí.

Las imágenes miden de alto 84px, así entonces el menú medirá la mitad de la imagen, por posiciones de background definimos el over.

En nuestra hoja de estilos definiremos lo siguiente:

/**************************************************************************
CSS DOCUMENTO - MENÚ ROLLOVER CSS - 20090317@JCP - DIXSO.NET
***************************************************************************/
#menu 			{float:left; width:100%; font-size:12px; border-bottom:1px solid #2763A5;}
#menu ul 		{padding:10px 10px 0 50px; list-style:none;}
#menu li 		{display:inline;}
#menu a 		{float:left; padding:0 0 0 4px; text-decoration:none; background: url(../imagenes/menu-l.gif) no-repeat left top;}
#menu a span 		{float:left; display:block; padding:5px 15px 4px 6px; font-weight:bold; background:url(../imagenes/menu-r.gif) no-repeat right top; color:#FFF;}
#menu a:hover 		{background-position:0% -42px;}
#menu a:hover span 	{background-position:100% -42px;}

Y en nuestro código html definiremos lo siguiente:

<div id="menu">
  <ul>
    <li><a href="#" title="Enlace 1"><span>Enlace 1</span></a></li>
    <li><a href="#" title="Enlace 2"><span>Enlace 2</span></a></li>
    <li><a href="#" title="Enlace 3"><span>Enlace 3</span></a></li>
    <li><a href="#" title="Enlace 5"><span>Enlace 5</span></a></li>
    <li><a href="#" title="Enlace 6"><span>Enlace grande 6</span></a></li>
	<li><a href="#" title="Enlace 7"><span>Enlace 7</span></a></li>
  </ul>
</div>

Ejemplo aquí.
Descarga aquí.

CSS Sprites

La imagen:

Esta es la parte más importante, es lo que nos dará esa precarga de imágenes que queremos. Volviendo al concepto de Sprites, lo que nos quiere decir es que en una imagen se tienen todas las imágenes que se usarán, para este caso, en una sola imagen tendré todos los estados del menú, el estado normal, el sobre o rollover, y el activo.

CSS Sprites

La imagen real tiene una dimensión de 702px de alto x 108px de alto y pesa 9.21KB, la primera sección es el estado normal, la del medio es el rollover y el último es el estado activo, el que me dice en qué sección de la página estoy. El menú en la página web tendrá solamente 36px de alto, entonces como se habrán dado cuenta si separan cada sección de la imagen, cada una es de 36px de alto, 36*3=108px. Aquí os dejo un ejemplo. Implementación del código aquí. Para que os hagáis una idea los mega portales (google, yahoo, softonic, etc.) lo utilizan: Este método no se limita solamente a menús en páginas web, esto ayuda bastante en la optimización de aplicaciones web también, ya que evitamos constantes conexiones al servidor cada vez que se necesite un icono, imágen, fondo, etc. Las aplicaciones web utilizan bastantes iconos, les pongo el ejemplo de Yahoo! Mail, ellos usan este método para sus iconos y fondos de los tabs, esta es una pequeñísima parte de la gran imagen que ellos usan para sus iconos, la original es de 3050px de ancho x 101px de alto, y pesa tan sólo 31kb:

CSS Sprites

O en softonic.com si pulsáis boton 2 encima de algún título de algún bloque os saldría esto:

CSS Sprites

Hacen todos los tipos de imágenes en una y luego con CSS se reparte, además sólo se hace una llamada al servidor lo cual lo hace más interesante… Fuente: cristalab.com