jQuery Mobile/ jqtouch图像宽度

Question

我想在我的手机网站上拥有一个带有5个按钮的静态页脚图像。图像在这里 http://www.pintum.com.au/jm/footer3a.jpg. 。蓝色图标应为默认值，黄色图标只能在悬停状态下可见。

我想知道如何使此图像比例尺在所有移动设备（景观和肖像）上正确宽度，并具有指向其他页面的链接并使当前/活动页面将图标变成黄色？

到目前为止我尝试过的

• 我首先尝试制作CSS精灵，但很快就会变得丑陋（复杂）。痛苦的到处都可以使用宽度，因此，由于宽度是动态的，因此图像缩放得正确，因为我无法知道像素的高度。我可以使用JS找到宽度并即时计算高度。但这听起来像过度杀伤。

• 接下来，我尝试拥有一个100％宽度的单个图像，然后将Div叠加层放在图像的顶部。但是有了这个解决方案，我无法弄清楚如何使用JavaScript单击事件导航页面，或者弄清楚如何在选定页面上更改图像图标 http://jsbin.com/uraya5/3/ 。并减少DIV的正确高度

• 最后，我试图使每个按钮成为单独的图像。这些似乎是宽松的灵魂。但是JQuery Mobile为我不知道如何删除的按钮添加了许多额外样式。看 http://jsbin.com/uraya5/4

---

那么，最佳/最简单的方法是什么？

• 如何删除链接周围的样式？
• 还是可以使用单个图像CSS滑动门方法？减少HTTP请求。

Answer 1

好吧，我想出了

在这里看到灵魂 http://jsbin.com/uraya5/10/我不得不：

1. 由于某种原因，每个按钮之间有间距，因此将宽度设置为每个按钮的19％，因此20％不起作用。
2. 将UI-BAR-A背景设置为黑色，因此它隐藏了我的图像之间的空间
3. 使用此JS代码来浏览页面$ .Mobile.ChangePage（$（“＃aid”），“ flip”，true，true）;

我仍然想使用单个图像，而不是拥有5个不同的图像来减少HTTP调用。因此，如果有人为此找到了挑剔的灵魂，请告诉我。