me gustaria hacer este efecto en mi pagina de incio

kmilo9607 · #1 (**permalink**) 22/09/2012, 09:38

Buenas estoy realizando mi pagina de inicio y quiero que salgan varios botones pero necesito hacer el efecto que muestro en la imagen el que me pueda ayudar muchas gracias.

memoadian · #2 (**permalink**) 22/09/2012, 11:23

Puedes hacerlo con css o javascript, usa las propiedades display:none y display:block.

asociadas a hover de los botones.

flashmax · #3 (**permalink**) 22/09/2012, 12:24

Hola te dejo un ejemplo sencillo en css:

Código HTML:

<!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=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
a span {display: none;}
a:hover span {display: block; position: absolute;
background-color:#CCC;
border:#000 1px solid;
border-radius:5px;
padding:5px; 
top:40px; 
left: 50px;}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
</style>
</head>

<body>
<a href="enlace"> <span>Aqui encontraras <br />nuestros productos</span>productos</a>
</body>
</html>

luisgzafra · #4 (**permalink**) 22/09/2012, 13:46

Busca "ToolTip" en google. Añade javascript, jquery, etc para sacar más resultados

Uno bueno: http://code.drewwilson.com/entry/tiptip-jquery-plugin

kmilo9607 · #5 (**permalink**) 24/09/2012, 09:35

Cita:

Iniciado por flashmax

Hola te dejo un ejemplo sencillo en css:

Código HTML:

<!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=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
a span {display: none;}
a:hover span {display: block; position: absolute;
background-color:#CCC;
border:#000 1px solid;
border-radius:5px;
padding:5px; 
top:40px; 
left: 50px;}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
</style>
</head>

<body>
<a href="enlace"> <span>Aqui encontraras <br />nuestros productos</span>productos</a>
</body>
</html>

Gracias, pero me sale la descripcion arriba de la imagen, me dijeron que lo hiciera con onMouseOver y onMouseOut, me puedes armar un codigo utilizando esos (onMouse) yo ya arme uno pero me sale mal porque cuando paso el Mouse sale la descripcion y cuando lo quito la descripcion sigue ahi, la unica forma de que se esconda la descripcion es pasando el Mouse denuevo y quiero que se quite apenas quiten el mouse (pongo cursor, sale descripcion , quito el cursor, esconde descripcion)

kmilo9607 · #6 (**permalink**) 24/09/2012, 09:57

miren el codigo que tengo, me pueden ayudar a corregirlo.
1. Quiero que cuando pase el cursor salga la imagen de "descripcion" y cuando quiten el cursor de la imagen se esconda la imagen de "descripcion"
2. Como pueden ver cuando se paran en la imagen "SOAT" la imagen "Autos pasa para abajo" tambien quiero arreglar eso.

este es el codigo:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bienvenido</title>
<script>

function muestra_oculta(id){
if (document.getElementById){ //se obtiene el id
var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
}
}
window.onload = function(){/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
muestra_oculta('contenido_a_mostrar');/* "contenido_a_mostrar" es el nombre de la etiqueta DIV que deseamos mostrar */
}
</script>
<style type="text/css">

</style>
</head>
<body onload="MM_preloadImages('Autos2.png')" bgcolor="#FFFFFF">
<div align="center">
<p align="center" class="Estilo1"><img src="http://i.imgur.com/4uRRJ.png" width="206" height="120" alt="" longdesc="Grupo Asistencia" /></p>
</div>
<a style='cursor: pointer;' onMouseOver="muestra_oculta('texto1')"><img src="http://i.imgur.com/lBSa2.png"></a>
<div id="texto1" style="display:none">
<img src="http://i.imgur.com/N8GvO.png">
</div><a style='cursor: pointer;' onMouseOver="muestra_oculta('texto2')"><img src="http://i.imgur.com/BVH0E.png"></a>
<div id="texto2" style="display:none">
<img src="http://i.imgur.com/4uRRJ.png">
</div>

</body>
</html>

Gracias.

flashmax · #7 (**permalink**) 24/09/2012, 13:06

Código HTML:

<!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>Bienvenido</title>

<script language="JavaScript">
function muestra(id){
if (document.getElementById){
var el = document.getElementById(id);
el.style.display = (el.style.display == 'none') ? 'block' : 'none';
}
}
window.onload = function(){
muestra_oculta('contenido_a_mostrar');
}
function oculta(id){
if (document.getElementById){
var el = document.getElementById(id);
el.style.display = (el.style.display == 'none') ? 'block' : 'none';
}
}
</script>
<style type="text/css">
.Estilo1 {font-family: Arial, Helvetica, sans-serif}
.Estilo2 {font-size: 14px}
</style>
</head>

<body onload="MM_preloadImages('Autos2.png')" bgcolor="#FFFFFF">
<div align="center">
<p align="center" class="Estilo1"><img src="http://i.imgur.com/4uRRJ.png" width="206" height="120" alt="" longdesc="Grupo Asistencia" /></p>
</div>

<!--menu -->
<a style='cursor: pointer;' onMouseOver="muestra('texto1')" onmouseout="oculta('texto1')"><img src="http://i.imgur.com/lBSa2.png"></a>

<a style='cursor: pointer;' onMouseOver="muestra('texto2')" onmouseout="oculta('texto2')"><img src="http://i.imgur.com/BVH0E.png"></a>
<!--fin menu -->

<!--div ocultos -->
<div id="texto1" style="display:none">
<img src="http://i.imgur.com/N8GvO.png">
</div>

<div id="texto2" style="display:none">
<img src="http://i.imgur.com/4uRRJ.png">
</div>
<!--fin div ocultos -->

</body>
</html>

kmilo9607 · #8 (**permalink**) 27/09/2012, 09:40

Gracias a todos por ayudarme utilice el script de jquery.

nightlife · #9 (**permalink**) 01/10/2012, 23:11

Hay algunos scripts prearmados para lo que necesitás...

Buscá en google Simple Tip y hay otro "Jquery Tooltip"

saludos