hacer que una imagen cambie al poner el cursor encima

Hola
ya tengo este codigo:

[contenido no disponible]

pero el problema es que al entrar por primera vez en el dia a mi web, la imagen se tarda en cambiar...

quisiera saber si existe alguna forma de que al poner el cursor encima de la imagen cambie Inmediatamentee???

Gracias

Solo se hacerlo con Dreamweaver:
Una posibilidad es hacerlo a través de sustitución de imagen –rollover imagen

http://www.youtube.com/watch?v=xqVuEysGp5M

Otra posibilidad es a través de capas –comportamiento de capas .Un poco mas complejo pero muy interesante.

http://www.youtube.com/watch?v=vcyOqE4CJSw

:D

con css

pones asi por ejemplo

A.algo { } /*Para caracteristicas generales a los enlaces*/
A.algo:LINK { } /*para el enlace, tal cual*/
A.algo:VISITED { } /*Para cuando ha sido visitado*/
A.algo:HOVER { } /*Cuando el ratón está sobre él*/
A.algo:ACTIVE { } /*Cuando está siendo pulsado*/



bueno en el html ponemos asi

<a class="algo" ref="#"><imagen></a>

en el css, donde va hover pondràs la imagen que deseas ver cuando el raton pase por encima

saludos

Yaneth escribió:con css

pones asi por ejemplo

A.algo { } /*Para caracteristicas generales a los enlaces*/
A.algo:LINK { } /*para el enlace, tal cual*/
A.algo:VISITED { } /*Para cuando ha sido visitado*/
A.algo:HOVER { } /*Cuando el ratón está sobre él*/
A.algo:ACTIVE { } /*Cuando está siendo pulsado*/



bueno en el html ponemos asi

<a class="algo" ref="#"><imagen></a>

en el css, donde va hover pondràs la imagen que deseas ver cuando el raton pase por encima

saludos

Una pregunta yaneth, ¿con el código que has puesto la imagen de sustitución carga antes de poner el cursor sobre el o justo cuando pones el cursor del ratón es cuando carga?

al ser orden de css
es inmediato
pasas el cursor por encima y cambia la imagen

saludos

ok gracias, en dreamweaver si savía hacerlo pero en html "puro" no lo había probado nunca.

Yaneth escribió:con css

pones asi por ejemplo

A.algo { } /*Para caracteristicas generales a los enlaces*/
A.algo:LINK { } /*para el enlace, tal cual*/
A.algo:VISITED { } /*Para cuando ha sido visitado*/
A.algo:HOVER { } /*Cuando el ratón está sobre él*/
A.algo:ACTIVE { } /*Cuando está siendo pulsado*/



bueno en el html ponemos asi

<a class="algo" ref="#"><imagen></a>

en el css, donde va hover pondràs la imagen que deseas ver cuando el raton pase por encima

saludos

Perdoon mi ignorancia :D pero no me funciona aun

tengo este codigo:

CSS:

A.menu { } /*Para caracteristicas generales a los enlaces*/
A.menu:LINK { } /*para el enlace, tal cual*/
A.menu:VISITED { } /*Para cuando ha sido visitado*/
A.menu:HOVER { background-image:url(objetos/m-staff.jpg) } /*Cuando el ratón está sobre él*/
A.menu:ACTIVE { } /*Cuando está siendo pulsado*/ }

HTML:

<a class="menu" href="index.html">[contenido no disponible]</a>

.......

esa h con rojo creo que te faltaba :D
las rutas estan bien :D
al poner el cursor encima no cambia :(

Gracias

ya lo subiste???
danos la url para verlo

y si puedes mira el ejemplo qe puse

http://unpocodemucho.atwebpages.com

en el enlace doble menu vertical

saludos

zoirprithoxd escribió:

Yaneth escribió:con css

pones asi por ejemplo

A.algo { } /*Para caracteristicas generales a los enlaces*/
A.algo:LINK { } /*para el enlace, tal cual*/
A.algo:VISITED { } /*Para cuando ha sido visitado*/
A.algo:HOVER { } /*Cuando el ratón está sobre él*/
A.algo:ACTIVE { } /*Cuando está siendo pulsado*/



bueno en el html ponemos asi

<a class="algo" ref="#"><imagen></a>

en el css, donde va hover pondràs la imagen que deseas ver cuando el raton pase por encima

saludos

Perdoon mi ignorancia :D pero no me funciona aun

tengo este codigo:

CSS:

A.menu { } /*Para caracteristicas generales a los enlaces*/
A.menu:LINK { } /*para el enlace, tal cual*/
A.menu:VISITED { } /*Para cuando ha sido visitado*/
A.menu:HOVER { background-image:url(objetos/m-staff.jpg) } /*Cuando el ratón está sobre él*/
A.menu:ACTIVE { } /*Cuando está siendo pulsado*/ }

HTML:

<a class="menu" href="index.html">[contenido no disponible]</a>

.......

esa h con rojo creo que te faltaba :D
las rutas estan bien :D
al poner el cursor encima no cambia :(

Gracias

Hola,

Prueba con esto, lo he probado:

<html>
<head>
<title>cursor por encima</title>
<style>
A.menu{
}
A.menu:LINK{
background: url(objetos/m-disenos.jpg);
}
A.menu:VISITED{
}
A.menu:HOVER{
background: url(objetos/m-staff.jpg);
}
A.menu:ACTIVE{
}
</style>
<body>

[url="index.html"][img]objetos/m-disenos.jpg[/img]1[/url]

</body>
</html>

Un saludo

no me carga tu pagina

Hola,

Prueba con esto, lo he probado:

Código:
<html>
<head>
<title>cursor por encima</title>
<style>
A.menu{
}
A.menu:LINK{
background: url(objetos/m-disenos.jpg);
}
A.menu:VISITED{
}
A.menu:HOVER{
background: url(objetos/m-staff.jpg);
}
A.menu:ACTIVE{
}
</style>
<body>

[contenido no disponible]1

</body>
</html>



Porfa revisalo no carga la pagina...
quisiera ver el ejemplo funcionando..

ya puedes checarlo
ahora ya està jalando la pagina
saludos