Cambio de imagenes

[AdrianSeg]

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?.

[gVenom]

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,

[AdrianSeg]

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.

[daPhyre]

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?