سؤال

أريد أن يكون ثابت تذييل الصورة مع 5 أزرار التنقل في الموقع الهاتف المحمول.الصورة هنا http://www.pintum.com.au/jm/footer3a.jpg.الأزرق الرموز يجب أن يكون الافتراضي الأصفر رمز يجب أن تكون مرئية فقط من أجل تحوم أو حالة نشطة.

أريد أن أعرف كيف يمكنني أن أجعل هذا مقياس الصورة الصحيحة العرض على جميع الأجهزة المحمولة (أفقي وعمودي) و وصلات إلى صفحات أخرى وجعل الحالي/صفحات نشطة أيقونة صفراء اللون ؟

ما كنت قد حاولت حتى الآن

  • حاولت أولا أن تجعل CSS Sprite ولكن أن تذهب القبيح (مجمع) بسرعة.مؤلمة العمل مع الاعراض في كل مكان حتى في صورة جداول بشكل صحيح كما لم يكن لدي أي وسيلة لمعرفة الارتفاع بالبكسل منذ عرض ديناميكية.يمكنني استخدام شبيبة للعثور على عرض وحساب الارتفاع على الطاير.ولكن هذا يبدو مبالغة.

  • التالي حاولت أن يكون صورة واحدة مع عرض 100% ثم ضع div تراكب على الجزء العلوي من الصورة.ولكن مع هذا الحل لم أتمكن من معرفة كيفية التنقل بين الصفحات باستخدام جافا سكريبت انقر فوق الحدث ، أو معرفة كيف سوف تكون قادرة على تغيير صورة الرمز على الصفحة المحددة http://jsbin.com/uraya5/3/ .و detrmining الارتفاع الصحيح div

  • آخر حاولت أن تجعل كل زر منفصل الصورة.هذه يبدو easist اتصال الآليات.ولكن مسج جوال يضيف مجموعة من أنماط إضافية إلى الزر أنا لا أعرف كيفية إزالة.انظر http://jsbin.com/uraya5/4


ماذا يكون أفضل/أسهل طريقة للقيام بذلك ؟

  • كيف يمكنني إزالة نمط حول الروابط ؟
  • أو يمكن استخدام صورة واحدة CSS انزلاق الباب الأسلوب ؟ للحد من طلب HTTP.
هل كانت مفيدة؟

المحلول

طيب أنا اكتشفت ذلك

انظر اتصال الآليات هنا http://jsbin.com/uraya5/10/ كان علي أن:

  1. تعيين العرض إلى 19% من كل زر بعض السبب هناك تباعد بين لكل زر حتى 20% لا يعمل.
  2. تعيين واجهة المستخدم-بار-الخلفية إلى الأسود حتى فإنه يخفي المسافات بين الصور
  3. استخدام هذا رمز شبيبة للتنقل بين صفحات $.الهاتف المحمول.changePage($("#عن"), "الوجه", true, true);

وأود أن لا تزال ترغب في استخدام صورة واحدة بدلا من 5 صور مختلفة للحد من http المكالمات.حتى إذا كان أي شخص يجد eligant اتصال الآليات لهذا يرجى اسمحوا لي أن أعرف.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top