I am looking to incorporate a static footer image with 5 navigation buttons into my mobile website. You can view the image here. The default color for the icons should be blue, but I want the yellow icon to appear only when hovered over or in an active state.
My goal is to make sure this image scales properly on all mobile devices, both in landscape and portrait mode. Additionally, I would like each button to link to a different page, with the currently active page's icon changing to yellow.
Methods I have attempted so far:
Initially, I experimented with creating a CSS Sprite, but it became complex quickly. Handling widths across various devices proved challenging due to dynamic width changes. Using JavaScript to determine the width and calculate height dynamically seemed excessive.
I then considered using a single image set at 100% width, overlaying divs containing navigation links. However, implementing JavaScript click events for page navigation and altering the selected page's icon posed difficulties. Determining the correct div height also presented challenges - see example here.
Lastly, I explored assigning each button as a separate image, which appeared to be the simplest solution. However, jQuery Mobile added unwanted styles to the buttons that I struggled to remove. View the result here.
What would be the best and easiest approach to achieve this?
- How can I eliminate the styling around the links?
- Can I utilize a single image CSS sliding door technique to minimize HTTP requests?