Cómo se hace para que una imagen cambie al pasar el mouse?

  • Autor Autor Joel López
  • Fecha de inicio Fecha de inicio
Joel López

Joel López

1
Pi
Redactor
Verificación en dos pasos activada
Suscripción a IA
Me refiero cuando alguien tiene un logo en el pie de pagina de color gris y cuando pasas el mouse encima para darle clic el logo se pone de color.

Como se llama esto?
 
<img src="URLIMAGENCOLORGRIS" onMouseOver="this.src='URLDELLOGOCONCOLOR'" onMouseOut="this.src='URLIMAGENCOLORGRIS'" />

suerte ^^
 
eso lo haces con el atributo "hover" aqui te dejo un ejemplo con su respectivo codigo

CSS img hoover hover

Espero te sirva

Un Saludo!
 
Como se llama esta funcion?
 
Exacto, que cuando le pasas por el mouse encima la imagen cambia a color.
 
SainTRC dijo:
creo que te has equivocado, el lo que quiere es que el logotipo tenga color (cambiar la imagen)
Hacer clic para expandir...

creo que puedes cambiar los parametros que se muestran ahi y poner los tu imagen 2... no?
 
Joel López M. dijo:
Exacto, que cuando le pasas por el mouse encima la imagen cambia a color.
Hacer clic para expandir...

creas un div y llamalo logo

luego en el css haces esto:

Insertar CODE, HTML o PHP: 
#logo {height:alto de tu imagen;width:ancho de tu imagen;background:url("tuimagen");}
#logo:hover {background:url("tuimagen de sobreposicion");}

Cualquier cosa avisame.
 
hola, lo que dice saint, solo sirve para i.e me parece, lo que dice dmr es estandard en todos los navegadores pero no es tan simple se hace con listas y con css, asi lo hice en executivestudio.net

Edito, he bajado el codigo de executive.

/* STYLE CSS */

#menu {
margin : 0;
padding : 12px 14px 0 14px; /* Esto es opcional, es el div que engloba todo mi menu*/
border : 0;
}
#menu ul { /*Definiendo propiedades para la lista " unordenated list"
margin : 0;
padding : 0;
width : 276px;
}
#menu li { /* Definiendo porpiedades globales de <li>*/
margin-bottom : 7px;
list-style-type : none;
white-space : nowrap;
}
#menu li a.portafolio:link, a.portafolio:visited {
width : 276px; /* Propiedades particulares de cada link que quieras es efecto, en el apartado background va la imagen y configura el alto y ancho del link o imagen en cuestion */
height : 32px;
background : url(images/btn_portafolio.jpg) no-repeat;
display : block;
}
#menu li a.portafolio:hover {
background : url(images/btn_portafolio2.jpg) no-repeat; /* aqui configuras el estado hover, osea cuando pasas el raton por encima */
}

Y el codigo en el html seria

<div id="menu">
<ul>
<li><a class="portafolio" href="portafolio.html"></a></li>
</ul>

Y el resultado podeis verlo en executivestudio.net

Si te ha servido ya sabes, dedito verde
 
Última edición:
ArkangelO dijo:
hola, lo que dice saint, solo sirve para i.e me parece, lo que dice dmr es estandard en todos los navegadores pero no es tan simple se hace con listas y con css, asi lo hice en executivestudio.net
Hacer clic para expandir...

sirve para todos, pero no si el javascript esta desactivado.
 
lo que digo yo es un codigo mas estandar del mundo.. mira en google onMouseOver y onMouseOut
 
Si lo quieres para post usa Javascript con los parametros que te mencionaron antes y si es para el layout del blog te recomiendo una tecnica llamada Sprites CSS, busca en google las dos cosas.
 
Con el atributo hover de css lo haces muy bien.
Tal como dice crystaldream lo ideal es usar sprites. La idea es esta. Vos cargas una imagen con los dos logos, o los dos botones o lo que sea. Y le das una posicion en su estado normal, y en el hover le das para que cambie la posicion de esa imagen para que tome el otro estado.
Esto es lo mas recomendable ya que si usas dos imagenes diferentes la primera vez que se le muestre el efecto a un usuario va a quedar feo (va a tener que esperar a que se envie la imagen desde el servidor al navegador para despues mostrarla).

Saludos
 
ferticidio dijo:
Con el atributo hover de css lo haces muy bien.
Tal como dice crystaldream lo ideal es usar sprites. La idea es esta. Vos cargas una imagen con los dos logos, o los dos botones o lo que sea. Y le das una posicion en su estado normal, y en el hover le das para que cambie la posicion de esa imagen para que tome el otro estado.
Esto es lo mas recomendable ya que si usas dos imagenes diferentes la primera vez que se le muestre el efecto a un usuario va a quedar feo (va a tener que esperar a que se envie la imagen desde el servidor al navegador para despues mostrarla).

Saludos
Hacer clic para expandir...

eso es reparable usando un preloader:

Insertar CODE, HTML o PHP: 
#preloader {background:url(imagen de reposicion); display:none;}
 
Se me hace menos complicado con lo de Saint, voy a ver que hago.

Gracias a todos!
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Nikkygeek
Plugin para dos imágenes en Woo al pasar el mouse
Respuestas
1
Visitas
122
BotBeta
BotBeta
Maine Coon
Ayuda sobre Error en Imágenes al pasar el Mouse
Respuestas
8
Visitas
497
Maine Coon
Maine Coon
Aguila SEO
Cómo crear animación de numeración con efecto de vuelta al pasar el mouse
Respuestas
1
Visitas
671
OmarCoder
O
carlos62016
Código para ocultar enlace al pasar el mouse
Respuestas
10
Visitas
926
marjuanm
marjuanm
P
¿Cómo hacer un efecto de expansión de descripción al pasar el mouse por el título de una imagen?
Respuestas
7
Visitas
1K
Sonyx18
Sonyx18
Atrás
Arriba