PHP - capa sobre texto

 
Vista:

capa sobre texto

Publicado por victor (48 intervenciones) el 28/08/2007 23:54:51
Como debo hacer para al momento de pasar el mouse sobre un texto se muestre una capa con infomacion de este.

Por ejemplo: partido (texto), y al pasar el mouse diga 12:02:23 (capa) la hora del partido.

Tengo entendio algo con mouseover pero no lo tengo muy claro.

De antemano gracias por su ayuda.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

RE:capa sobre texto

Publicado por Nicolás (154 intervenciones) el 29/08/2007 01:19:35
Basicamente, lo que tenes que hacer es crear la capa, y ocultarla:

en css: visibility:hidden;

Luego le agregas, a la etiqueta que activará dicha capa, dos funciones javascript: una que muestra la capa, y otra que la oculta. Estas funciones irán en los eventos onMouseOver y onMouseOut respectivamente (si es eso lo que quieres).

function mostrarCapa() {
document.getElementById('ID_CAPA').style.visibility = "visible";
}

function ocultarCapa() {
document.getElementById('ID_CAPA').style.visibility = "hidden";
}

(Donde "ID_CAPA" es el id con el que has identificado a tu capa)
o mejor aun

function manejarCapa( vis ) {
document.getElementById('ID_CAPA').style.visibility = vis;
}

Para mostrarla:
onMouseOver="manejarCapa('visible');"

Para Ocultarla:
onMouseOut="manejarCapa('hidden');"

Por ultimo, te recomiendo que utilices en Dreamweaver 8 si quieres ahorrarte tiempo, ya que hace que este tipo de cosas sean muy sencillas. Podrás encontrar un monton de funciones ya hechas que te simplificarán la vida. Avisame si te fué de ayuda!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:capa sobre texto

Publicado por victor (48 intervenciones) el 29/08/2007 03:18:12
Nicolás tienes el ejemplo completo para llamarlo desde el body por favor.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:capa sobre texto

Publicado por Nicolás (154 intervenciones) el 29/08/2007 04:29:20
Victor: acá te paso el archivo completo y probado. Si querés hacértelo fácil, como te había dicho y como bien dice nuestro amigo Fernando Rueda, utilizá Dreanweaver. Si por el contrario eres como yo y te gusta programar todo tu mismo, este archivo te será de ayuda para comprender la cuestión. Saludos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
background-color:#CCCCCC;
border:solid #666666 2px;
left:96px;
top:20px;
width:272px;
height:119px;
z-index:1;
visibility: hidden;
}
-->
</style>
</head>
<script language="javascript">
function manejarCapa( vis ) {
document.getElementById('Layer1').style.visibility = vis;
}
</script>

<body>
<div id="Layer1">Mundo!!!</div>
<a href="javascript:;" onMouseOver="manejarCapa('visible');" onMouseOut="manejarCapa('hidden');">hola</a>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:capa sobre texto

Publicado por Fernando Rueda (57 intervenciones) el 29/08/2007 01:39:06
Buebo............copie y pege este codigo completo en un bloc de notas y lo guarda con un .HTML
y despues estudielo.....estos procesos son muy faciles si los hace en Dreamweaver.

<html>
<head>
<title></title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:365px;
top:57px;
width:208px;
height:118px;
z-index:1;
visibility: hidden;
}
.Estilo1 {font-size: xx-large}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div class="Estilo1" id="Layer1">Sabado 26 de DEC - 9:30 PM </div>
<table width="622" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="64" height="50"> </td>
<td width="189"> </td>
<td width="369"> </td>
</tr>
<tr>
<td height="130"> </td>
<td valign="top" onmouseover="MM_showHideLayers('Layer1','','show')" onfocus="MM_showHideLayers('Layer1','','hide')">FINAL FINAL....EL NACHO NUEVAMENTE CAMPEON, SI SEÑORES. </td>
<td> </td>
</tr>
<tr>
<td height="148"> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

Espero que le sirva........Frueda.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar