ToolTips en Flash para HTML
En el presente Post vamos a explicar como realizar un ToolTip en Flash para utilizarlos en páginas HTML, aunque podríamos explotarlos mejor si la usamos en paginas dinámicas, ya sea PHP, JSP, o ASP. La demo que les adjunto, tiene por objetivo explicar dos cosas, primero la galería (en menor medida) de imagenes con CSS, cuya fuente es webdesignerwall y como segunda parte, el Tooltips realizado en flash con carga de datos dinámicos. Manos a la obra:
El primer paso es crear la galería, para lo cual tenemos una lista desordenada:
<ul class="galeria">
<li><a href="#"><span></span><em>Facebook</em><img src="images/image1.jpg" alt="image" onMouseover="MostrarTool('<%=cadena%>',' ', 600,'<%=textFaceBook%>',10,-160)" onMouseout="OcultarTool()"/></a></li>
<li><a href="http://www.wikipedia.org"><span></span><em>Wikipedia</em><img src="images/image2.jpg" alt="image" onMouseover="MostrarTool('<%=cadena%>',' ', 0,'<%=textWikipedia%>',10,-160)" onMouseout="OcultarTool()" /></a></li>
<li><a href="http://www.teebuk.com.ar"><span></span><em>Teebuk</em><img src="images/image3.jpg" alt="image" onMouseover="MostrarTool('<%=cadena%>',' ', 0,'<%=textTeebuk%>',10,-160)" onMouseout="OcultarTool()" /></a></li>
<li><a href="http://www.micodigobeta.com.ar"><span></span><em>Micodigobeta</em><img src="images/image4.jpg" alt="image" onMouseover="MostrarTool('<%=cadena%>',' ', 0,'<%=textMicodigo%>',10,-160)" onMouseout="OcultarTool()" /></a></li>
<li><a href="http://www.twitter.com"><span></span><em>Twitter</em><img src="images/image5.jpg" alt="image" onMouseover="MostrarTool('<%=cadena%>',' ', 0,'<%=textTwitter%>',10,-160)" onMouseout="OcultarTool()" /></a></li>
<li><a href="http://www.psicofxp.com"><span></span><em>Psicofxp</em><img src="images/image6.jpg" alt="image" onMouseover="MostrarTool('<%=cadena%>',' ', 0,'<%=textPsicofxp%>',10,-160)" onMouseout="OcultarTool()" /></a></li>
<li><a href="http://www.bitacoras.com"><span></span><em>Bitacoras</em><img src="images/image7.jpg" alt="image" onMouseover="MostrarTool('<%=cadena%>',' ', 0,'<%=textBitacoras%>',10,-160)" onMouseout="OcultarTool()" /></a></li>
<li><a href="http://www.toutube.com"><span></span><em>Youtube</em><img src="images/image8.jpg" alt="image" onMouseover="MostrarTool('<%=cadena%>',' ', 0,'<%=textYoutube%>',10,-160)" onMouseout="OcultarTool()" /></a></li>
<li><a href="http://www.clarin.com" ><span></span><em>Clarin</em><img src="images/image9.jpg" alt="image" onMouseover="MostrarTool('<%=cadena%>',' ', 0,'<%=textClarin%>',10,-160)" onMouseout="OcultarTool()" /></a></li>
</ul>
Viendolo asi parece ser una simple lista, pero aplicando un poco de CSS podríamos mejorar su diseño, entonces realizamos lo siguiente:
.galeria {
list-style: none;
margin: 0;
padding: 0;
}
.galeria li {
padding: 10px;
margin: 0;
float: left;
position: relative;
width: 180px;
height: 130px;
}
.galeria li:hover img {
border-color: #000;
}
.galeria img {
background: #fff;
border: solid 1px #ccc;
padding: 5px;
}
.galeria em {
background: #fff;
color: #000;
font-style: normal;
padding: 2px 8px 0 22px;
display: block;
position: absolute;
top: 20px;
left: 5px;
border: 1px solid #999;
}
.galeria a {
text-decoration: none;
}
.galeria span {
width: 30px;
height: 60px;
display: block;
position: absolute;
top: 7px;
left: 9px;
background:url(../images/paper-clip-mini.png) no-repeat;
z-index: 3;
}
Y nos debería quedar algo como esto:
No hay mucho secreto, solo decir que para el clip nos valemos de otra imagen y las etiquetas span para posicionar el clip sobre cada imagen.
No me detendré a explicar detalladamente la galería ya que no es el objetivo principal del post, pero si les surgen dudas de como armarlo o adaptarlo a sus proyectos, no duden en dejarlos en los comentarios.
Ahora si pasamos al segundo paso que es implementar el tooltips en nuestra galería. Aclaro que el tooltips lo pueden usar en cualquier contexto, desde simples links, Titulares, una imagen, google Maps, o galerias.
Lo primero que vamos a hacer es guardar en una variable la cadena que inserta la pelicula en la pagina:
cadena="<object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0 name=pelicula id=pelicula width=350 height=210>" cadena=cadena& "<param name=movie value=tool.swf?/> " cadena=cadena& "<param name=wmode value=transparent /> " cadena=cadena& "<param name=quality value=high />" cadena=cadena& "<embed src=tool.swf quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash width=350 height=210 name=tool swLiveConnect=true wmode=transparent ></embed></object>" textFaceBook="Facebook es un sitio web gratuito de redes sociales creado por Mark Zuckerberg. Originalmente era un sitio para estudiantes de la Universidad de Harvard, pero actualmente está abierto a cualquier persona que tenga una cuenta de correo electrónico" textWikipedia="Wikipedia es un proyecto de la Fundación Wikimedia (una organización sin ánimo de lucro) para construir una enciclopedia libre[2] y políglota." textTeebuk="Teebuk.com.ar es mi proyecto solidario personal - Se trata de un clasificado de busqueda de personas."
Lo hacemos de esta manera ya que luego solo debemos recurrir a la variable para el uso de la pelicula.
Como se habran dado cuenta en cada uno de los objetos de nuestra galeria usamos los siguientes eventos:
onMouseover="MostrarTool('<%=cadena%>',' ', 600,'<%=textFaceBook%>',10,-160)" onMouseout="OcultarTool()"
El primer evento onMouseover (cuando pasamos el mouse por encima de la imagen) ejecutamos la función MostrarTool llevando como parametros la variable cadena que contiene la pelicula flash; la variable textFaceBook que contiene la descripcion que contendrá nuestro tooltip y los valores 10 y -160 que son las coordenadas de posicion necesaria para mostrar correctamente el tool (estos parametros los modificaran segun el diseño y tamaño de sus tooltips). La función OcultarTool como su nombre lo dice, oculta el tool cada vez que sacamos el puntero de la imagen.
textFaceBook, textWikipedia y todas las demas variables las puse estaticas para el ejemplo, lo ideal es que sean dinamicas (es decir rescatarlas de una base de datos).
La función en javascript, nos queda de esta forma:
function MostrarTool(texto, elcolor, thewidth,descrip, xtemp, ytemp){
offsetxpoint=xtemp //configura la coordena x
offsetypoint=ytemp //configura la coordena y
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
tipobj.innerHTML=texto
document.getElementById("textoIn").value=descrip;
enabletip=true
return false
}
}
Donde con esta línea pasamos la variable descript a la caja de texto, para luego rescatar esta info desde flash:
document.getElementById("textoIn").value=descrip;
Y la función para ocultar queda así:
function OcultarTool(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
Antes de continuar, vamos a explicar como hacemos para mostrar la pelicula como tooltips. Para nuestro propósito nos valemos de dos elementos, una capa (div) y una caja de texto (input).
<!--Div que contiene la pelicula y la caja de texto--> <div id="divcontenido"><input id="textoIn" type="text" value="Contenido para los tooltips" /></div>
En el div insertamos la película flash para luego manipular la posición con Javascript y la caja de texto nos servirá luego, para enviar información a la película. Importante dar transparencia a la misma para que no nos salga el fondo del mismo, para lo cual debemos de agregar el parametro wmode=transparent y listo.
Ahora bien. ¿Pero como paso información a flash?. Buena pregunta, pero por suerte la solución es bastante simple. Solo debemos agregar el siguiente código en el primer fotograma de nuestra pélicula:
//La primera linea inportamos la herramienta de conexion
//la segunda linea llamamos a la funcion de Javascript
import flash.external.ExternalInterface;
campotexto.text = ExternalInterface.call("getDescript");
En la primer línea importamos la herraminta que nos permite intercambiar información con el exterior de la película. En la segunda línea, llamamos a la función de javascript (getDescript) y la pasamos a un Texto Dinámico creado previamente en la película.
Y la función getDescript en Javascript nos quedaría así:
//Funcion con la cual enviamos el texto a la pelicula de flash
//-----
function getDescript() {
return document.getElementById("textoIn").value;
}
De esta manera usando un poco de DOM rescatamos el contenido del input cuyo id es “textoIn” que será la descripción que mostraremos en el tooltip.
Bueno, así de esta manera hemos logrado hacer un tootip con Flash pero para ser usado en páginas y no solo dentro de películas Flash. Lo interesante de esto es que podemos hacer el diseño y tamaño que se nos ocurra y se adapte a nuestros proyectos y aún mejor con información dinámica. En la descarga de código que les adjunto, solo hago dinamico el texto pero podríamos mostrar cualquier cosa que necesitemos, como mas imagenes, capturas de otros sitios y porque no realizar nuestro propio Infolinks.
Como siempre les dejo la Demo y la Descarga del Código junto con la pelicula en Flash.
Espero les haya sido de su interes, nos vemos en un próximo post. Comenten mucho!!. Cordiales Saludos.
También te puede Interesar
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
Esta muy bueno, pero veo que no carga el texto descriptivo en los flash cuando lo navego en IE6.
Un saludo