Я хочу иметь статическое изображение нижнего колонтитула с 5 кнопками для навигации на моем сайте мобильного телефона. Изображение здесь http://www.pintum.com.au/jm/footer3a.jpg. Значками по умолчанию должны быть синие значки, желтый значок должен быть виден только при наведении или активном состоянии.
Я хочу знать, как я могу сделать масштаб изображения до правильной ширины на всех мобильных устройствах (альбомной и книжной) и иметь ссылки на другие страницы и сделать значок текущих / активных страниц желтым цветом? *
То, что я пробовал до сих пор
Сначала я попытался создать CSS Sprite, но это быстро выглядело ужасно (сложно). Ужасно работать везде с шириной, поэтому изображение корректно масштабируется, так как у меня не было возможности узнать высоту в пикселях, поскольку ширина является динамической. Я мог бы использовать JS, чтобы найти ширину и вычислить высоту на лету. Но это звучит как излишество.
Затем я попытался создать одно изображение шириной 100%, а затем наложить на него div-оверлеи. Но с этим решением я не мог понять, как перемещаться по страницам, используя событие нажатия JavaScript, или выяснить, как я смогу изменить значок изображения на выбранной странице http://jsbin.com/uraya5/3/. И определение правильной высоты для div
В последний раз я пытался сделать каждую кнопку отдельным изображением. Это похоже на восточную душу. Но jQuery Mobile добавляет кучу дополнительных стилей к кнопке, которую я не знаю, как удалить. См http://jsbin.com/uraya5/4
Так какой самый лучший / самый простой способ сделать это?
- Как я могу удалить стиль вокруг
ссылки?
- Или я могу использовать метод раздвижных дверей CSS с одним изображением? Чтобы уменьшить HTTP-запрос.