Paso 1:
Ir a Diseño, Edición de HTML y justo arriba de </head>
Poner el siguiente código:
<script type='text/javascript'>
//<![CDATA[
function mostrarelementodiv() {
div = document.getElementById('elementodiv');
div.style.display = '';
}
function cerrarelementodiv() {
div = document.getElementById('elementodiv');
div.style.display='none';
}
//]]>
</script>
Donde elementodiv es el nombre del div, el cual tendra el contenido que mostraremos.
Paso 2:
Crear un div con el nombre elementodiv y ponerlo abajo de de <body>.
Ejemplo con una imagen:
<div id="elementodiv" style="border:0;background: transparent; left:15px;top:10px;position:fixed;width: 190px;z-index:9999;display:none;">
<a href='javascript:cerrarelementodiv();return false;'><img border='0' src='URL de la imagen cerrar' style='float: right;' title='Cerrar'/>
<img src="URL de la imagen a mostrar"/></a>
</div>
Guardar la plantilla.
Paso 3:
Crear el link para abrir el elemento div. (puede ser un texto o imagen)
Ejemplo con una imagen:
<a href="#" onclick="mostrarelementodiv();return false;"><img src="URL de la imagen" style="border: 0;"/></a>
Resultado clic en la imagen:
Resultado clic en texto: Abrir ejemplo
Resultado pasando el cursor:
Códigos CSS para personalizar:
left:15px: distancia desde la izquierda.
top:10px: distancia desde arriba.
position:fixed: se muestra el contenido del div siempre fijo con la posición establecida por left y top.
width: 190px: distancia desde la izquierda para mostrar la imagen de cerrar.
float: right: muestra la imagen de cerrar del lado derecho.
onclick cambiar por onmouseover para abrir pasando el cursor.
Por otros detalles sobre el código ver: Parte 1.
Botones de cerrar:
Pueden ver de la forma que utilizo este ejemplo en el menú superior pasando el cursor por la lamparita.
0 comments:
Post a Comment