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&hl=es_ES&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&hl=es_ES&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:
0 comments:
Post a Comment