jQuery Mobile / jQTouch Ancho de la imagen

Question

Quiero tener una imagen de pie de página estática con 5 botones para la navegación en mi página web móvil. La imagen es aquí http://www.pintum.com.au/jm/footer3a.jpg . Los iconos de color azul debe ser el valor por defecto, el icono de color amarillo sólo debe ser visible para el vuelo estacionario o estado activo.

Quiero saber cómo puedo hacer que esta escala de la imagen a la anchura correcta en todos los dispositivos móviles (horizontal y vertical) y tienen enlaces a otras páginas y hacer que las páginas actuales / activa el icono de color amarillo?

Lo que he intentado hasta ahora

• La primera vez que trató de hacer un CSS Sprite, sino que van más fea (compleja) de forma rápida. de trabajo dolorosa con anchuras de todo el mundo por lo que las escalas de imagen correctamente ya que no tenía forma de saber la altura en píxeles ya que la anchura es dinámico. Podría usar JS para encontrar el ancho y la altura calcular sobre la marcha. Pero esto suena como una exageración.

• A continuación traté de tener una sola imagen con un ancho de 100% luego colocar div superposiciones en la parte superior de la imagen. Sin embargo, con esta solución no podía encontrar la manera de páginas navegar usando JavaScript evento click, o averiguar cómo iba a ser capaz de cambiar el icono de la imagen de la página seleccionada http://jsbin.com/uraya5/3/ . Y detrmining la altura correcta para el div

• Última Traté de hacer cada botón una imagen separada. Estos parece que el soultion easist. Pero jQuery Mobile añade un montón de estilos extra para el botón No sé cómo quitar. Ver http://jsbin.com/uraya5/4

---

Así que cuál es la mejor / manera más fácil de hacer esto?

• ¿Cómo puedo quitar el estilo alrededor ¿Enlaces?
• O puedo utilizar un único método de imagen CSS puerta corredera? Para reducir petición HTTP.

Answer 1

Ok lo he descubierto

http://jsbin.com/uraya5/10/ Tenía que:

1. Establezca una anchura de 19% de cada botón para alguna razón hay espacio entre cada botón de modo 20% no funciona.
2. Conjunto ui-bar-un fondo negro a por lo esconde los espacios entre mi imágenes
3. Usar el código JS para páginas navegar por los $ .mobile.changePage ($ ( "# sobre"), "Flip", true, true);

todavía me gustaría usar una sola imagen en lugar de tener 5 imágenes diferentes para reducir las llamadas HTTP. Así que si alguien encuentra un soultion eligant para esto, por favor hágamelo saber.