Entrar

Como crear botón "desplegable" o "deslizable"

_St · · Solicitar retirada
Como siempre, vuelvo a agradecer por toda su ayuda y vuelvo con una nueva duda sobre botones. (Si, tengo una página de botones (?)

Ahora la siguiente:

¿Cómo puedo crear un botón al cual cuando le pase por encima se expanda a otra cosa?

Es decir, tenemos un botón como este:



Y cuando le pasamos por encima, el botón desaparece (o no, como ustedes lo sepan) y aparece lo siguiente deslizándose:

[contenido no disponible]

Es decir, el botón (el cual está a la derecha de la página) supongamos que "nos sigue" cuando bajamos o subimos por la web con nuestro navegador, y cuando nos posamos sobre el, se expande hacia la izquierda y se ve eso (la verdad no tengo ni idea de que es eso xd!)

Se entiende? Espero que me puedan ayudar, se que es complicado.
Desde ya muchas gracias!
Saludos!!
SuperHipo · · Solicitar retirada
No me queda clara la pregunta. ¿Lo que quieres es una especie de rollover para que cuando pases el ratón por encima del botón "info" aparezca la imagen con las instrucciones?

Si es eso lo que quieres dímelo y te preparo una muestra con HTML, CSS y Photoshop, ¿ok? Si no es que no he entendido la pregunta...

Un saludo!!
_St · · Solicitar retirada
Mmm... Me sirve de mucho! Ahora solo quiero probar unas cosas y seguro lo logro! Muchas gracias doodleo!
SurKaiser · · Solicitar retirada
Hola , despues de leer tu duda fui a cocinar una sencilla funcion que te permitira hacer eso que buscas!

es simple haciendolo con javascript

Aqui la funcion :

cambiarimagen.html :

<!--
*  SurKaiser 
*   Funcion Cambiar Imagen Javascript *
*   Hecha para : http://www.comocreartuweb.com
-->
<!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&iacute;tulo</title>
<script type="text/javascript" language="javascript">
  function cambiaImagen(img)
  {
      
	  img.src = "nuevaimagen"
	  
		}
		function regresaImagen(img)
		{
		   img.src= "viejaimagen";
		   }
		   
	</script>

		 
</head>

<body>
<img src="tuimagen" onmouseover="cambiaImagen(this)" onmouseout="regresaImagen(this)" />
</body>
</html>

Aqui solamente debes sustituir "tuimagen" por la imagen que va a cargar normalmente , "nuevaimagen" : por la imagen que aparecera al pasar el mouse sobre ella y "viejaimagen" por la direccion de la imagen que pusiste al principio

Saludos y espero que te funcione.
SuperHipo · · Solicitar retirada
Muy buena "receta" SurKaiser. Me ha encantado.

Ahí llevas tus puntitos.

Gracias por este aporte. Un saludo!!
SurKaiser · · Solicitar retirada
SuperHipo escribió:Muy buena "receta" SurKaiser. Me ha encantado.

Ahí llevas tus puntitos.

Gracias por este aporte. Un saludo!!

Gracias xD