sábado, 14 de agosto de 2010

Mostrar ventana. Otra forma

Es como la entrada: Mostrar imagen o mensaje con botón de cerrar parte 2

Esta vez con unos retoques en el código CSS para mostrar de otra forma.

Voy a mostrar 3 ejemplos, abrir vídeo de YouTube, abrir una página web y abrir una caja con barra scrollbar.

La forma es la misma para todos los ejemplos y podemos utilizarla para abrir otro tipo de cosas, como imágenes, archivo flash, la caja de comentarios o lo que nos de la imaginación.


Primero agregamos el código JavaScript.


Ir a Diseño, Edición de HTML y justo arriba de </head>

Poner el siguiente código:


<script type="text/javascript">
//<![CDATA[
function mostrarventanavku() {
div = document.getElementById('ventanavku');
div.style.display = '';
}
function cerrarventanavku() {
div = document.getElementById('ventanavku');
div.style.display='none';
}
//]]>
</script>

Ahora agregamos el código CSS.

Justo arriba de ]]></b:skin>

Poner el siguiente código: (personalizarlo a su gusto)

/* CSS de la ventana no cambiar*/
#ventanavku {
position:fixed;
top: 50%;
left: 50%;
margin: -200px 0 0 -250px;
border: 1px solid #ccc;
z-index:99999
}
/* CSS del titulo - personalizar a gusto*/
.tituloventanavku {
border: 1px solid #ccc;
display: block;
background: #ccc;
color:red;
padding:2px 5px;
}

Ahora buscamos <body> y abajo ponemos lo que vamos a mostrar:

<div id="ventanavku" style="display:none;"><span class="tituloventanavku" >ACÁ VA EL TITULO
<a href="javascript:cerrarventanavku();"><img border="0" style="right:5px;position:absolute;top:3px" src="URL DE IMAGEN DE BOTÓN DE CERRAR" title="Cerrar" /></a></span>

ACÁ VA EL CÓDIGO DEL VÍDEO O IFRAME O SCROLL

</div>

Para abrir la ventana hay que poner un link de la siguiente forma:

<a href="#" onclick="mostrarventanavku();return false">TEXTO O IMAGEN</a>

Donde dice: ACÁ VA EL TITULO se puede personalizar desde el código CSS en:

/* CSS del titulo */
.tituloventanavku {
border: 1px solid #ccc;
display: block;
background: #ccc;
color:red;
padding:2px 5px;
}

Cambiar la URL DE IMAGEN DE BOTÓN DE CERRAR.

Si queremos mostrar un vídeo el código es el que nos da YouTube.

Algo así:

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/boDvXJLau1A?fs=1&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/boDvXJLau1A?fs=1&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Una página web se tiene que mostrar por medio de un iframe.

Algo así:

<iframe allowtransparency="true" src="http://www.google.com.uy/" width="550" height="400" frameborder="0" scrolling="auto">
</iframe>

Pueden utilizar ese código cambiando el link de la página, ancho y alto.

Una barra de scrollbar.

<div style='border: 1px solid rgb(204, 204, 204); padding: 0px; overflow: auto; width: 500px; height: 200px;background: #fff;'>

Lorem Ipsum, Lorem Ipsum
Lorem Ipsum, Lorem Ipsum
Lorem Ipsum, Lorem Ipsum

</div>

Dentro del scroll se puede mostrar varias cosas como texto, imágenes, un marquee, etc...

Ver ejemplo con vídeo:

No hay comentarios:

Publicar un comentario