Muchas gracias Luis, El efecto que quiero es ese, que sea como el sprite en el que se mueve la imagen de fondo, pero en este caso las imágenes están en el contenido, el otro lo sé hacer.... y me ha funcionado.
El tema es que cuando uno hace el sprite la imagen de fondo es igual en cada botón, acá tengo unos botones irregulares, diferentes para cada elemento del menú.... Voy a hacer un par de pruebas, si no tocara usar un poco de Javascript. Muchas gracias, Germán El 2 de marzo de 2010 15:59, Luis Mario Álvarez <[email protected]>escribió: > Lo que intentas hacer (creo), es un sprite. Pero así no lo conseguirás. > > Para hacer lo que creo que pretendes necesitas mostrar la imágen como > background, y mediante background-position la vas moviendo, ya sea por > el eje x o el eje y, hasta mostrar el área que necesitas. El elemento > html que lo va a mostrar necesita ser o estar en block, y si tienes > textos sobre él los puedes quitar con un valor negativo en > text-iindent. > > Lo que dije es por lo que percibo, porque para entender tu idea > necesitaria ver un ejemplo online. > > On 3/2/10, Germán Bustos <[email protected]> wrote: > > Hola, > > > > Estoy usando unas imágenes (que cargo desde el gestor de contenidos) como > > botones de un menú, creé una imagen doble para mostrar el estado normal > y > > visited y el estado estado active y hover. Logré que el CSS haga que se > > muestre únicamente la primera mitad del botón lo que hace que se vean > > perfectos los botones como los quise trabajar. El tema es que no logro > > "hacer el movimiento" es decir que cuando pase el ratón por encima o haga > > clic me muestre la otra mitad del botón. > > > > Mi HTML es: > > > > <div id="menuarriba"> > > > > <a href="/seccion1"><img src="logosec1.png" alt="" width="400" > height="110" > > /></a> > > > > <a href="/seccion2"><img src="logosec2.png" alt="" width="400" > height="110" > > /></a> > > > > <a href="/seccion3"><img src="logosec3.png" alt="" width="400" > height="110" > > /></a> > > > > </div> > > > > Y el CSS dice: > > > > #menuarriba{ > > width: 602px; > > float: right; > > } > > #menuarriba a, #menuarriba a:visited, #menuarriba a:link{ > > display: block; > > float: left; > > width: 200px; > > overflow: hidden; > > } > > #menuarriba a:hover, #menuarriba a:active{ > > text-align: right; > > } > > > > Asumo que lo que tengo que hacer es ubicar un valor para #menuarriba > a:hover > > y active pero acepto consejos sobre otras opciones, preferiría que el > tema > > se solucionara exclusivamente con CSS. > > > > Muchas gracias, > > > > > > Germán > > > > > > -- > > Germán Bustos > > (+57)3177381339 > > Atarraya > > http://atarraya.org > > http://germanbustos.com > > _______________________________________________ > > Lista de distribución Ovillo > > Para escribir a la lista, envia un correo a [email protected] > > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > > http://lists.ovillo.org/mailman/listinfo/ovillo > > > > > -- > Matraka > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a [email protected] > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > -- Germán Bustos (+57)3177381339 Atarraya http://atarraya.org http://germanbustos.com _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a [email protected] Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
