[Ovillo] Mover una imagen dentro de una div

2010-03-02 Por tema Germán Bustos
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=/seccion1img src=logosec1.png alt= width=400 height=110
//a

a href=/seccion2img src=logosec2.png alt= width=400 height=110
//a

a href=/seccion3img 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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Mover una imagen dentro de una div

2010-03-02 Por tema Luis Mario Álvarez
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 ger...@atarraya.org 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=/seccion1img src=logosec1.png alt= width=400 height=110
 //a

 a href=/seccion2img src=logosec2.png alt= width=400 height=110
 //a

 a href=/seccion3img 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 Ovillo@lists.ovillo.org
 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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Mover una imagen dentro de una div

2010-03-02 Por tema Joaquín Vicente
2010/3/2 Luis Mario Álvarez mag...@magrio.net

 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 ger...@atarraya.org 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=/seccion1img src=logosec1.png alt= width=400
 height=110
  //a
 
  a href=/seccion2img src=logosec2.png alt= width=400
 height=110
  //a
 
  a href=/seccion3img 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 Ovillo@lists.ovillo.org
  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 Ovillo@lists.ovillo.org
 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
Themhttp://css-tricks.com/css-sprites/saludos,

Joaquín
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Mover una imagen dentro de una div

2010-03-02 Por tema Germán Bustos
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 mag...@magrio.netescribió:

 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 ger...@atarraya.org 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=/seccion1img src=logosec1.png alt= width=400
 height=110
  //a
 
  a href=/seccion2img src=logosec2.png alt= width=400
 height=110
  //a
 
  a href=/seccion3img 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 Ovillo@lists.ovillo.org
  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 Ovillo@lists.ovillo.org
 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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Mover una imagen dentro de una div

2010-03-02 Por tema Joaquín Vicente
2010/3/2 Germán Bustos ger...@atarraya.org

 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


En ese caso caso, hacés una clase css generica para los sprites, y una
específica para cada imagen, que sólo define el background...
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo