¿Existe algo así?

raptor96 · #1 (**permalink**) 09/07/2013, 02:19

Buenas, estoy haciendo unas caratulas con botones de descarga y de ir a su correspondiente vídeo en YouTube y me asalta una duda.

Actualmente estoy usando este código para hacer lo de los botones presionados y cuando tienen el cursor encima:

Cita:

Os pongo en situacion, todo funciona bien, pero cuando doy clic no hay una manera de que al soltar el clic salga el "BotonNormal" sin tener que quitar el raton de encima, por si por ejemplo lo abro y no quito el ratón de encima sigue presionado.

alberto510a · #2 (**permalink**) 09/07/2013, 05:20

¿Por qué no lo haces con CSS? Es mucho más fácil usando pseudoclases.

http://librosweb.es/css_avanzado/capitulo_3/pseudo_clases.html

Mira el punto 3.4.3.

Saludos!

raptor96 · #3 (**permalink**) 09/07/2013, 08:51

Desconocía que esto existía.. xD

Bien, pues mira, he estado mirando por internet y la verdad no hago nada mas que liarme, por que cada uno lo hace de una forma y de ninguna lo consigo.

Estoy intentando desde el CSS traer una imagen al Html a través de "Div" y en ese mismo CSS tengo lo de hover para cuando pase el ratón por encima.

Pero no consigo ni siquiera que la imagen salga a ver si me podéis hacer un pequeño ejemplo a ver si cojo el concepto...

Os dejo los códigos que tengo:

HTML:

Cita:

<html>
<head>
<title>Probando...</title>

<link href="CSS.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="imagen">

</div>

</body>

</html>

CSS:

Cita:

#imagen {
background: BotonNormal.png no-repeat;
height: (alto)px;
width: (ancho)px;
}

#imagen:hover {
background: BotonEncima.png no-repeat;
height: (alto)px;
width: (ancho)px;
}

alberto510a · #4 (**permalink**) 09/07/2013, 11:07

Aquí tienes un ejemplo de una imagen cambiante:

http://www.araudi.net/ejemplos/rollo..._posicion.html

Para agregar imagenes con css debes ponerlas entre url() como puedes ver en el código de este ejemplo.

Y si quieres que también cambie mientras se tiene pulsado solo tienes que hacer lo mismo con :active

Saludos!

exatienda · #5 (**permalink**) 09/07/2013, 11:55

Si quieres hacerlo desde la misma página HTML, este es el código:

Código HTML:

Ver original<script type="text/javascript">
imagen1=new Image
imagen1.src="http://(...)Imagen1.jpg"
imagen2=new Image
imagen2.src="http://(...)Imagen2.gif"
var i=1;
function cambiar_imagen() {                       
 
   if (i == 1)
      {
      document.images['Regalos'].src=imagen2.src
      i=2;
      }
   else 
      {
      document.images['Regalos'].src=imagen1.src;
      i=1;
      }
   }
</script>

raptor96 · #6 (**permalink**) 09/07/2013, 12:11

Sigo sin entender algo y es lo unico creo que me desconcierta.

Para hacer este tipo de cosas hay que hacerlas con un fichero HTML y otro CSS que vallan relacionados con el rel=""¿

Si es así desde donde es el CSS del ejemplo.

h2swider · #7 (**permalink**) 11/07/2013, 07:34

Cita:

Iniciado por exatienda

Si quieres hacerlo desde la misma página HTML, este es el código:

<script type="text/javascript">
imagen1=new Image
imagen1.src="http://(...)Imagen1.jpg"
imagen2=new Image
imagen2.src="http://(...)Imagen2.gif"
var i=1;
function cambiar_imagen() {

if (i == 1)
{
document.images['Regalos'].src=imagen2.src
i=2;
}
else
{
document.images['Regalos'].src=imagen1.src;
i=1;
}
}
</script>

Le estamos recomendando que use CSS que es lo apropiado para su situación y tu le propones de repente un código JS de muy baja calidad. Ya vi varios post tuyos con respuestas de este tipo, sin evaluar la situación y tirando soluciones pobres o sugiriendo malas practicas de programación.

Con todo respeto te sugiero que antes de contestar por el mero hecho de ayudar, te detengas un poco a pensar si lo que planteas es realmente correcto. Es hora de que todos empecemos a aportar consejos/código de calidad.

pzin · #8 (**permalink**) 11/07/2013, 09:38

Cita:

Iniciado por raptor96

Para hacer este tipo de cosas hay que hacerlas con un fichero HTML y otro CSS que vallan relacionados con el rel=""¿

Hay varias formas de hacerlo, aunque lo correcto suele ser tener dos archivos; uno con el HTML y otro con el CSS. http://librosweb.es/css/capitulo_1/c...nto_xhtml.html

raptor96 · #9 (**permalink**) 11/07/2013, 11:30

Cita:

Iniciado por pzin

Hay varias formas de hacerlo, aunque lo correcto suele ser tener dos archivos; uno con el HTML y otro con el CSS. http://librosweb.es/css/capitulo_1/c...nto_xhtml.html

Perfecto, con esto y lo que he podido entender y probar, ya tengo prácticamente hecho lo que quería.

Muchas gracias a todos por la ayuda y la atención ;)