jQuery Mobile/ jqTouch Image width

Question

I want to have a static footer image with 5 buttons for navigation in my mobile phone website. The image is here http://www.pintum.com.au/jm/footer3a.jpg. The blue icons should be the default, the yellow icon should only be visible for the hover or active state.

I want to know how can I make this image scale to the correct width on all mobile devices (landscape and portrait) and have links to other pages and make the current/active pages icon the yellow color?

What I have tried so far

• I first tried to make a CSS Sprite but that go ugly (complex) quickly. Painful working with widths everywhere so the image scales correctly as I had no way of knowing the height in pixels since the width is dynamic. I could use JS to find the width and calculate height on the fly. But this sounds like overkill.

• Next I tried to have a single image with a width of 100% then place div overlays on top of the image. But with this solution I could not figure out how to navigate pages using JavaScript click event, or figure out how I would be able to change the image icon on the selected page http://jsbin.com/uraya5/3/ . And detrmining the correct height for the div

• Last I tried to make each button a seperate image. These seems like the easist soultion. But jQuery Mobile adds a bunch of extra styles to the button I do not know how to remove. See http://jsbin.com/uraya5/4

---

So whats the best/easiest way to do this?

• How can I remove the style around links?
• Or can I use a single image CSS sliding door method? To reduce HTTP request.

Answer 1

Ok I figured it out

See soultion here http://jsbin.com/uraya5/10/ I had to:

1. Set width to 19% of each button for some reason there is spacing between each button so 20% does not work.
2. Set ui-bar-a background to black so it hides the spaces between my images
3. Use this JS code to navigate pages $.mobile.changePage($("#about"), "flip", true, true);

I would still like to use a single image instead of having 5 different images to reduce http calls. So if anyone finds a eligant soultion for this please let me know.