Foros del Web » Creando para Internet » CSS »

Cambio de imagenes

Estas en el tema de Cambio de imagenes en el foro de CSS en Foros del Web. Cuando se pone el raton sobre un texto una imagen que hay al lado se modifica osea cambia para crear un efecto de movimiento. Div: ...
  #1 (permalink)  
Antiguo 20/05/2010, 12:56
Avatar de AdrianSeg  
Fecha de Ingreso: enero-2010
Mensajes: 595
Antigüedad: 7 años, 10 meses
Puntos: 14
Cambio de imagenes

Cuando se pone el raton sobre un texto una imagen que hay al lado se modifica osea cambia para crear un efecto de movimiento.

Div:

<div class="texto" onmouseover="MM_swapImage('preferencias','','image nes2/iconos/25x25/preferencias.gif',1)" onmouseout="MM_swapImgRestore()">Preferencias</div>

Css:

#menuh .texto{
width:auto;
font:bold 1em Arial, Helvetica, sans-serif; color:#FFFFFF;
padding:5px 25px 0 5px;
float:left;
line-height:20px;
}



Eso lo hice con Dreamweaver...hay alguna manera de hacerlo más eficiente con CSS?.
  #2 (permalink)  
Antiguo 20/05/2010, 13:21
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
De acuerdo Respuesta: Cambio de imagenes

Bueno, eso seriía algo parecido a hacer un rollover de boton, asi por ejm el html llevaria algo así:
Código HTML:
<div class="rollover">

<a href="#">Uno 1</a>
<a href="#">dos 2</a>
<a href="#">Tres 3</a>
<a href="#">Cuatro</a>
</div> 
Eso es solo un poco de links dentro de un div, con clase "rollover".

Ahora, con las imagenes ya creadas y ojala todas del mismo tamaño (y livianas de peso) ponemos unas instrucciones al div:
Código:
.rollover a {
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover { 
background-position: 0 -35px;
color: #049;
}
.rollover a:active {
background-position: 0 -70px;
color:#fff;
}
Ya con eso, la imagen va a ir cambiando hasta si funciona de link y le pone estados de visitado o no. Conste que la imagen va de fondo.

Espero que te ayude a construir tu propio codigo.

Saludos,
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #3 (permalink)  
Antiguo 20/05/2010, 14:29
Avatar de AdrianSeg  
Fecha de Ingreso: enero-2010
Mensajes: 595
Antigüedad: 7 años, 10 meses
Puntos: 14
Respuesta: Cambio de imagenes

Eso no me soluciona nada, eso es si el enlace va en una imagen que quiero sustituir por otra...en este caso el link va en un texto y no en la imagen que hay que sustituir.
  #4 (permalink)  
Antiguo 20/05/2010, 15:34
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Cambio de imagenes

En verdad el código de gVenom hace lo que tú deseas, según lo que comprendí. ¿Podrías describir mejor o poner una imagen de como se ve este efecto?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Etiquetas: imagenes, cambios
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:49.