2010/3/2 Luis Mario Álvarez <[email protected]> > 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 >
Como dijo Matraka, lo que andás buscando es un efecto de rollover mediante sprites. te paso cuatro links que te pueden ser de ayuda: CSS Sprites: Image Slicing’s Kiss of Deat <http://www.alistapart.com/articles/sprites/>Extremely efficient image rollovers using CSS sprites and NO Javascript <http://www.jaisenmathai.com/blog/2008/04/03/extremely-efficient-image-rollovers-using-css-sprites-and-no-javascript/>Using CSS Sprites to Create Easy Image Rollovers: A Tutorial <http://www.htmlist.com/design/faster-loading-pages-with-css-background-image-sprites/>CSS Sprites: What They Are, Why They’re Cool, and How To Use Them<http://css-tricks.com/css-sprites/>saludos, Joaquín _______________________________________________ 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
