Foros del Web » Creando para Internet » HTML »

Como se llama este efecto en los textos??

Estas en el tema de Como se llama este efecto en los textos?? en el foro de HTML en Foros del Web. Hola muchachos !! Quiera saber como se llama el efecto de mostrar y ocultar textos como se muestra en esta página... http://www.comparaonline.com/ayuda/automotriz Fijense que al ...
  #1 (permalink)  
Antiguo 14/05/2012, 10:14
Avatar de DjDance
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Santiago de Chile
Mensajes: 775
Antigüedad: 14 años, 9 meses
Puntos: 80
Como se llama este efecto en los textos??

Hola muchachos !!

Quiera saber como se llama el efecto de mostrar y ocultar textos
como se muestra en esta página...

http://www.comparaonline.com/ayuda/automotriz

Fijense que al clickear una pregunta se abre la respuesta ...

Please ... es que no tendo idea de como buscarlo !! xD

Saludos !!
__________________
My Music xD
http://soundcloud.com/dj-dance-1
  #2 (permalink)  
Antiguo 14/05/2012, 13:49
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 13 años
Puntos: 1011
Respuesta: Como se llama este efecto en los textos??

bueno, no hay efecto alguno. es simplemente mostrar y ocultar bloques. en este caso lo hace con javascript.
Cita:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.ocultar {display:none;}
.mostrar {display:block;}
.sel {color:#FF0000;}
.nosel {color:#000000;}
</style>
<script type="text/javascript">
var visto_subm = null;
var visto_color = null;
function ver(val) {
objhl = document.getElementById(val);
obj = document.getElementById(val + '_opcion');

obj.className = (obj==visto_subm) ? 'ocultar' : 'mostar';
objhl.className = (objhl==visto_color) ? 'nosel' : 'sel';

if ((visto_subm != null) && (visto_color != null)) {
visto_subm.className = 'ocultar';
visto_color.className = 'nosel';
}
visto_subm = (obj==visto_subm) ? null : obj;
visto_color = (obj==visto_color) ? null : objhl;
}
</script>
</head>
<body>
<div id="menu1" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU0</div>
<div id="menu1_opcion" class="ocultar" style="z-index:1;">
SubMenu0<br />
SubMenu0<br />
SubMenu0
</div>

<div id="menu2" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU1</div>
<div id="menu2_opcion" class="ocultar" style="z-index:1;">
SubMenu1<br />
SubMenu1<br />
SubMenu1
</div>


<div id="menu3" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU2</div>
<div id="menu3_opcion" class="ocultar" style="z-index:1;">
SubMenu2<br />
SubMenu2<br />
SubMenu2
</div>


<div id="menu4" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU3</div>
<div id="menu4_opcion" class="ocultar" style="z-index:1;">
SubMenu3<br />
SubMenu3<br />
SubMenu3
</div>
</body>
</html>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 14/05/2012, 14:06
Avatar de DjDance
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Santiago de Chile
Mensajes: 775
Antigüedad: 14 años, 9 meses
Puntos: 80
Respuesta: Como se llama este efecto en los textos??

Genial !!

Pero como se hace para que el cursor muestre la manito y no el de texto??
__________________
My Music xD
http://soundcloud.com/dj-dance-1
  #4 (permalink)  
Antiguo 14/05/2012, 14:26
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 10 años, 2 meses
Puntos: 192
Respuesta: Como se llama este efecto en los textos??

Con CSS.

Código CSS:
Ver original
  1. .nosel{
  2. cursor:pointer;
  3. }
__________________
nahueljose.com.ar
  #5 (permalink)  
Antiguo 14/05/2012, 16:04
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 13 años
Puntos: 1011
Respuesta: Como se llama este efecto en los textos??

como te indican es añadir la propiedad cursor.

también es factible hacerlo únicamente con css en lugar de javascript. siempre y cuando no te importe que no sea compatible con navegadores antiguos, por la pseudo clase que hay que usar
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #6 (permalink)  
Antiguo 14/05/2012, 19:53
Avatar de DjDance
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Santiago de Chile
Mensajes: 775
Antigüedad: 14 años, 9 meses
Puntos: 80
Respuesta: Como se llama este efecto en los textos??

Genial !! Muchas gracias a ambos !!

@Isa

Si no fuera mucha la molestia lo podrías publicar en css please ??
Algo similar a lo que esta en el ejemplo del link que puse !!


Un abrazo !!
__________________
My Music xD
http://soundcloud.com/dj-dance-1

Última edición por DjDance; 14/05/2012 a las 20:09
  #7 (permalink)  
Antiguo 15/05/2012, 07:03
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 13 años
Puntos: 1011
Respuesta: Como se llama este efecto en los textos??

este código esta montado usando radio, también tienes la posibilidad de usar checkbox. en ambos caso no obtendrás exactamente el mismo resultado que con javascript.
  • si usas radio, una vez que selecciones una opción, siempre tendrá que haber una abierta
  • si usas checkbox, se puede cerrar la opción seleccionada, pero permite que hay mas de una opción abierta
lo mejor es que lo pruebas y lo veas por ti mismo
Cita:
<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
#opciones .control {
width: 0;
height: 0;
overflow: hidden;
position: absolute;
}


#opciones .control + div > label {
display: inline-block;
}


#opciones .control + div > div{
display: none;
}

#opciones .control:checked + div > label + div{
display: block;
}

#opciones .control:checked + div > label{
color: red;
}
</style>
</head<
<body>

<div id="opciones">

<input type="radio" name="c" id="opt1" class="control" />
<div>
<label for="opt1">MENU 1</label>
<div>
SubMenu1<br />
SubMenu1<br />
SubMenu1
</div>
</div>

<input type="radio" name="c" id="opt2" class="control" />
<div>
<label for="opt2">MENU 2</label>
<div>
SubMenu2<br />
SubMenu2<br />
SubMenu2
</div>
</div>

<input type="radio" name="c" id="opt3" class="control" />
<div>
<label for="opt3">MENU 3</label>
<div>
SubMenu3<br />
SubMenu3<br />
SubMenu3
</div>
</div>

<input type="radio" name="c" id="opt4" class="control" />
<div>
<label for="opt4">MENU 4</label>
<div>
SubMenu4<br />
SubMenu4<br />
SubMenu4
</div>
</div>

</div>
</body>
</html>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #8 (permalink)  
Antiguo 15/05/2012, 08:14
Avatar de DjDance
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Santiago de Chile
Mensajes: 775
Antigüedad: 14 años, 9 meses
Puntos: 80
Respuesta: Como se llama este efecto en los textos??

Te pasaste Isa !! Muchas gracias por todo tu tiempo !!

Creo que me gusta más la opción con JavaScript, aunque hay algo que me gustaría cambiar y no sé si se pueda ...

Resulta que el div del botón o link que despliega el texto oculto ocupa toda la página.
Osea, si yo hago click fuera del texto igual se despliega el texto oculto.

Si no tiene solución no importa .. con todo lo que me has ayudado ya es suficiente !!


Un abrazo querida !!
__________________
My Music xD
http://soundcloud.com/dj-dance-1
  #9 (permalink)  
Antiguo 15/05/2012, 13:48
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 13 años
Puntos: 1011
Respuesta: Como se llama este efecto en los textos??

añade la propiedad width a cada selector
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #10 (permalink)  
Antiguo 16/05/2012, 09:44
 
Fecha de Ingreso: marzo-2012
Ubicación: Republica Dominicana
Mensajes: 51
Antigüedad: 9 años, 2 meses
Puntos: 3
Respuesta: Como se llama este efecto en los textos??

para el cursor poner la manito es
.nose{
cursor:hand;
}
  #11 (permalink)  
Antiguo 16/05/2012, 10:20
Avatar de sancas19  
Fecha de Ingreso: noviembre-2011
Ubicación: Soyapango, El Salvador
Mensajes: 18
Antigüedad: 9 años, 7 meses
Puntos: 2
Respuesta: Como se llama este efecto en los textos??

mejor usa jquery :)

Etiquetas: efecto, llama, página
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 15:43.