كيفية بناء خريطة صورة باستخدام CSS

الخيارات

أردت شيئًا "غريب الأطوار" لذا قررت استخدام رسم "جيب" يحتوي على جميع طرق الاشتراك في مدونتي.

في أيام Web 1.0 ، كان من الممكن بناء مجموعة من الروابط مثل هذه عن طريق تقسيم صورتك إلى روابط على كل رسم ، ثم محاولة خياطتها كلها مرة أخرى مع جدول. يمكن أيضًا تحقيقه باستخدام ملف خريطة الصورة لكن هذا يتطلب عادةً أداة لبناء نظام الإحداثيات. إن استخدام أوراق الأنماط المتتالية يجعل هذا الأمر أسهل كثيرًا ... لا توجد صور ربط ولا تحاول العثور على أداة لبناء نظام الإحداثيات الخاص بك!

  1. أنشئ صورتك التي ترغب في استخدامها. يمكنك استخدام هذا الرسم أدناه (انقر بزر الماوس الأيمن وحفظه للتنزيل):
    الخيارات
  2. قم بتحميل صورتك إلى دليل متعلق بـ CSS الخاص بك. في WordPress ، يمكن القيام بذلك بشكل أسهل عن طريق وضعه في مجلد صور في دليل القالب الخاص بك.
  3. أضف HTML الخاص بك. إنه جميل وبسيط ... div مع ثلاثة روابط بداخله:
    > div id = "subscribe">> a id = "rss" href = "[رابط الخلاصة الخاص بك]" title = "الاشتراك في RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[رابط الاشتراك في بريدك الإلكتروني]" title = "الاشتراك بالبريد الإلكتروني" >> span class = "hide"> Email> / span >> / a>> a id = "mobile" href = "[your mobile link]" title = "View Mobile Version" >> span class = "hide"> Mobile> / span >> / a>> / div>
    
  4. قم بتحرير ورقة الأنماط المتتالية الخاصة بك. ستضيف 6 أنماط مختلفة. نمط واحد لـ div العام ، ونمط واحد للعلامة بحيث لا يعرض أي زخرفة نصية ، ونمط واحد لإخفاء النص (يُستخدم لإمكانية الوصول) ومواصفات نمط واحد لكل من الروابط:
    #subscribe {/ * قالب صورة الخلفية * / display: block؛ العرض: 215 بكسل ؛ الارتفاع: 60 بكسل ؛ الخلفية: url (images / options.png) لا تكرار ؛ أعلى الهامش: 0 بكسل ؛ } #subscribe a {text-decoration: none؛ } .hide {visibility: hidden؛ } #rss {/ * رابط RSS * / float: يسار؛ الموقف: مطلق ؛ العرض: 50 بكسل ؛ الارتفاع: 50 بكسل ؛ الهامش الأيسر: 20 بكسل ؛ أعلى الهامش: 5 بكسل ؛ } #email {/ * Email Link * / float: left؛ الموقف: مطلق ؛ العرض: 50 بكسل ؛ الارتفاع: 50 بكسل ؛ الهامش الأيسر: 70 بكسل ؛ أعلى الهامش: 5 بكسل ؛ } #mobile {/ * Mobile Link * / float: left؛ الموقف: مطلق ؛ العرض: 50 بكسل ؛ الارتفاع: 50 بكسل ؛ الهامش الأيسر: 130 بكسل ؛ أعلى الهامش: 5 بكسل ؛ }

الوضع جميل وبسيط ... أضف ارتفاعًا وعرضًا ثم اضبط الهامش الأيسر من الجانب الأيسر للصورة ، والهامش العلوي من الجانب العلوي للصورة!

هذا المنشور "كيف" للدخول في المهوسون هم مسابقة "كيف" النهائية المثيرة! ملاحظة واحدة ، صحيح أن خريطة الصورة يمكن أن تحتوي على مضلعات أكثر تعقيدًا ، لكنني لم أر في الواقع الكثير من الأماكن التي يجب أن يكون فيها ذلك. لقد لاحظت أن صورة RSS الكبيرة على Geeks هي شريط جانبي مثير ... وهذا مكان جيد للارتباط. 😉

تم التحديث في 10/3/2007 لتحسين إمكانية الوصول بمشورة فيل!

الراعي: إذا كنت مبتدئًا في تصميم الويب ، فابني موقع الويب الخاص بك بالطريقة الصحيحة باستخدام HTML & CSS ، الإصدار الثاني أمر لا بد منه. ستتعلم في هذا الدليل السهل المتابعة كيفية إنشاء موقع ويب بأفضل طريقة ممكنة - عن طريق القيام بذلك بنفسك!

41 تعليقات

  1. 1

    دوغ ، هذا يبدو وكأنه طريقة لطيفة ، لكن الوصول إليها صعب للغاية.

    ضع في اعتبارك مستخدم ضرير لديه قارئ شاشة ، أو مستخدم لديه متصفح نصي فقط أو أي شخص يزور الموقع بدون CSS أو الصور ممكّنة (مثل ، ربما مستخدم محمول يبحث عن رابط لموقعك المتوافق مع الأجهزة المحمولة). لن يعرف أي منهم عن هذه الروابط الثلاثة لأنه ليس لديهم نص. إذا كانت الصور معطلة ، فلن يرى المستخدم حتى نصًا بديلًا لوصف ما كان يمكن أن يكون هناك لأنه صورة خلفية.

    من الأفضل تقسيم الصور إلى شرائح وربطها ووضعها في قائمة ووضعها بجانب بعضها البعض. أو حتى استخدم نصًا للروابط واستبدل النص باستخدام تقنية استبدال الصورة القياسية. يبدو هذا مناسبًا ، لكنه يجعل الأمور أكثر صعوبة / استحالة بالنسبة لأولئك الذين لا يستخدمون متصفحًا رسوميًا قياسيًا.

    • 2
      • 3

        دوغ،

        لا يقرأ JAWS عناوين الروابط افتراضيًا ، لكنك على حق ، يمكنه فعل ذلك. لماذا تبحث عن عناوين الروابط إذا كنت لا تعرف أنها موجودة ، وحتى لو كنت كذلك ، فمن المؤكد أن هذا يسقط إلى مشكلة قابلية الاستخدام مما يعني أنك تمنح المستخدمين الأقل قدرة تجربة من الدرجة الثانية لاستخدام موقعك.

        بالنسبة لمتصفحات النص ، تتيح لك المقالة التي توجهني بها إلى Lynx أيضًا عرض قائمة بعناوين الارتباطات ، ولكن تظل وجهة نظري أنه إذا لم تكن تعلم أن هناك رابطًا ، حيث لم يكن هناك نص في المقام الأول ، لماذا تبحث عن نص العنوان؟

        أخيرًا ، لا تزال سمات عنوان الرابط لا تظهر لأي شخص يتصفح بدون تمكين الصور أو بدون تمكين CSS.

        لذا ، نعم ، الروابط بالعناوين أفضل من تلك التي لا تحتوي عليها ، لكنها في هذه الحالة هامشية فقط.

        هذا هو السبب في أن استخدام صورة ، بحيث يمكن قراءة النص البديل ، أو استبدال الصورة ، بحيث يكون النص موجودًا ، يعد خيارًا أكثر أمانًا ويمكن الوصول إليه وقابليته للاستخدام.

        • 4

          معلومات جيدة ، فيل. سأحاول تحسين هذا بالنص ولكن ببساطة أخفي النص - وبهذه الطريقة سيقرأ منتج يمكن الوصول إليه مثل JAWS نص الرابط وسيتم عرض النص إذا تم تعطيل CSS أو الصور.

          لا أوافق على أن الحل الوحيد الذي يمكن الوصول إليه هو وضع صورة مع رابط.

  2. 5
    • 6
      • 7

        إنه شيء غالبًا ما لا ننتبه إليه ، فيل! بالإضافة إلى ذلك ، غالبًا ما يكون لإتاحة الوصول إلى تطبيقك نتائج جيدة في محرك البحث أيضًا.

        أنا حقا أقدر الخبرة وردود الفعل!

  3. 8

    لقد سرقتها. هناك ، قلت ذلك.

    دوغ ، الرسومات رائعة والترميز بسيط للغاية لدرجة أنه يخيفني (كنت ألعب باستخدام CSS والآن أخيرًا "أحصل عليه").

    عدّل الكود لتلبية احتياجاتي ، واكتشف مكان إسقاط بت HTML ، وبصراحة يبدو رائعًا وقام بتنظيف هذا الجزء العلوي من الشريط الجانبي الذي كان يقودني إلى الجنون.

    قد أضطر إلى شراء تلك القهوة لك حتى الآن!

  4. 10

    دوغ،

    سأكون صوتًا مخالفًا ، باستخدام تجربتي كمثال. أتذكر رسائل البريد الإلكتروني التي أرسلناها إلينا عندما تغير البريد الإلكتروني في المنزل ولاحظت أنه كان علي ببساطة الاشتراك في البريد الجديد. يجب أن أعترف أنني أمضيت وقتًا طويلاً في "اكتشاف" الميزة الجديدة على موقعك للاشتراك مرة أخرى. يرجع جزء من هذا إلى أن الرابط الأصلي كان أكثر تقليدية قليلاً وتذكرت ذلك بشكل غامض. كان الآخر لأن نصف المغلف الجانبي لم يكن يبدو وكأنه مظروف بالنسبة لي في البداية. بعد حوالي 5 دقائق أو أكثر بدأت في تحريك الماوس فوق كل صورة وعندما ظهر عنوان "الاشتراك بالبريد الإلكتروني" ، أدركت أنني أعمل. اكتشف عقلي أيضًا ما هي صورة الارتباط.

    ولكن ، على الأقل بالنسبة لي ، لم يكن المغلف الجانبي بديهيًا بالنسبة لي كمكان للاشتراك في إشعارات البريد الإلكتروني. و (لأنه قيل لي أن أنهي دائمًا بشيء لطيف) أتفق مع فيل أعلاه ؛ الطريقة بسيطة حقًا ويعمل العنصر بأكمله بشكل رائع. أعتبر أن أداة التصميم الخاصة بك ساعدت في إعطائك الأبعاد الدقيقة للأقسام الثلاثة ؛ هل ذلك افتراض صحيح؟ يجب أن أفترض ذلك ، لأنه إذا كان لدي ، على سبيل المثال ، صورة بعرض 3 بكسل ، فسوف أحتاج إلى معرفة الإعدادات الصحيحة ، إلخ.

  5. 12
    • 13

      وليام ،

      يبدو أنه قد يكون هناك تعارض بين أسماء فئة التعليق وأسماء الفئات في رسم الشريط الجانبي. يمكنك تسميتها بشكل مختلف لإزالة الصراع. اسمحوا لي أن أعرف إذا كنت بحاجة إلى يد!

      دوغ

  6. 14
  7. 15
  8. 16
  9. 17
  10. 18

    نهج لطيف ، ولكني بحاجة إلى شيء ما لخريطة طبوغرافية ، لذلك لا يمكنني استخدام مناطق مستطيلة ... أعتقد أنه يتعين علي استخدام خريطة الصور ذات النمط القديم مع الإحداثيات ، ولكن ربما سأحفر أعمق قليلاً ...

  11. 19

    شكرا على هذه المعلومات ، دوغ. لقد كنت هنا من قبل وتساءلت كيف فعلت ذلك. أردنا إنشاء خريطة كهذه لإدراجها بعد منشوراتنا ، والآن بعد أن أصبح لدينا الوسائل ، يمكننا القيام بذلك. أحسنت!

  12. 20
  13. 21

    مرحبا دوغ ،
    تركت تعليقًا سابقًا لكنني أدركت أنني بالكاد عرضت أي فكرة عن معضلة بلدي على الإطلاق. لقد قمنا بتكييف سمة ووردبريس لمساعدتنا في إطلاق المسرحية الهزلية على الإنترنت هنا:

    http://www.phaylen.com/blog/

    الآن ، سترى أن لدينا لافتة تنقل في الجزء العلوي ، وهي صورة نعتزم تعيينها كما كان لدينا عشرات المرات من قبل. / النخيل. لا أحد منا يفهم حقًا CSS ، لكننا نتعثر حوله بما فيه الكفاية وحتى الآن قمنا بعمل جيد حتى هذه النقطة. مقالتك في واحد فقط من بين العشرات المقدمة هي نظرة ثاقبة حقيقية حول كيفية استخدام imageemapping في CSS بسهولة. لقد قمت بإخراج ورقة الأنماط وفقًا لتوجيهاتك ، ولكن ليس لدي أي فكرة عن مكان وضع HTML. كل ما قلته هو "أضف html الخاص بك ... إنه لطيف وبسيط" ثم انزعجت لأنني اعتقدت .. "ليس بسيطًا بما يكفي بالنسبة لي!" لم أكن أعلم أنه يمكنني إضافة html إلى أي من صفحات php هذه في محرر السمات. هل أضع html في رأس الصفحة؟ قالب الفهرس الرئيسي؟ وظائف؟ أفترض أن جميع مستخدمي WordPress لديهم خيار تحرير موضوعهم في محرر لوحة القيادة ، والذي يبدو عالميًا جدًا في الوظائف. إذا كان بإمكانك اقتراح مكان وضع html ، فأنا أرغب في تكييف كود oru لشريط التنقل الخاص بي.

    شكرا لتقاسم معرفتك مع المجتمع. يسعدني أن أحضر لك قهوة.

    • 22

      مرحبًا Phay!

      تتوفر جميع ملفات مظهر مدونتك من خلال لوحة المسؤول للتحرير. إذا نقرت على عرض تقديمي ثم محرر السمات ، فيجب أن تكون قادرًا على رؤية قائمة بملفاتك على اليمين ومحرر على اليسار.

      إذا كنت ترغب في أن يكون هذا في الشريط الجانبي الخاص بك ، فمن المحتمل أن يكون لديك صفحة الشريط الجانبي. انقر لتحريره ثم ضع HTML المتوفر داخل الصفحة حيث تريد ذلك.

      ملاحظة واحدة: يعد تحرير ورقة الأنماط متعلقًا بصفحتك ، لذلك ستحتاج إلى تحميل الصورة إلى دليل صور السمات إذا كنت تشير إليها كما تفعل مع الصور الأخرى في نسقك.

      نأمل أن يساعد!

    • 23

      فاي ،
      لقد صادفت هذا الموقع اليوم وواجهت نفس المعضلة مثلك. أردت أيضًا إضافة خريطة صورة إلى صورة العنوان. بعد التلاعب بها لفترة من الوقت ، فهمت الأمر بشكل صحيح. ضع div HTML في ملف header.php. أضعه بين و. لست متأكدًا مما إذا كان القالب الخاص بك يحتوي على هذا الترميز الدقيق ، ولكن قم بالتلاعب به في ملف header.php وستكتشفه.
      -
      بول

  14. 24

    شكرا للاستجابة السريعة!

    لا ، لم أرغب في أن يكون في الشريط الجانبي ، إنه في أعلى الصفحة (يمكنك أن ترى في الرابط الذي قدمته - شريط التنقل الوردي الذي يقول contant ، حول العرض إلخ ..)

    لقد كنت أعمل في لوحة القيادة طوال الصباح ، للأسف ، لست متأكدًا من الملف الذي أضع فيه html ، كما هو مذكور أعلاه ، لدي العديد من ، header.php ، main index.php ، function.php ، footer.php. لست متأكدًا من مكان إدخال كود html. (الجزء الأول الذي قدمته ، لقد أدخلت بالفعل الباقي في ورقة الأنماط الخاصة بي) لدي صورتي هناك على موقع الويب ، كل شيء جاهز للعمل ، أنا فقط بحاجة إلى معرفة مكان إضافة جزء html من الكود للتكيف.

    شكرًا جزيلاً على وقتك وتلقي الأسئلة من مبتدئ.

    فاي

  15. 25

    ... أو ربما يمكن لشخص ما أن ينشر في التعليقات حول الملف الذي نضع فيه جزء html من الكود. قال رجل نبيل أنه اكتشف ذلك. لم أكن محظوظا جدا.

    فايلن

  16. 26
  17. 27

    لقد قضيت وقتًا طويلاً في العثور على طريقة لتضمين خريطة صورة قابلة للنقر في ووردبريس لأنها تجرد علامات خريطة html. ستنجح طريقتك ولكن من الواضح أن خريطة الولايات المتحدة هي طريقة معقدة لربطها بهذه الطريقة. انى تائه.

    مساعدة.

    يبدو أن الفلاش هو خياري الوحيد؟

    • 28

      ديف،

      إذا وضعت الصورة في القالب الخاص بك ، فستكون بخير. إذا وضعت خريطة الصورة في المحتوى الفعلي ، فقد تواجه مشكلات في التصفية. الطريقة التي تعاملت بها مع هذا الأمر مروعة ، لكن في بعض الأحيان استخدمت إطار iframe.

      دوغ

  18. 29

    مرحبا،

    يبدو أن خريطة الصورة والروابط هما شيئان مختلفان ، فلا يعملان معًا كما تفعل خريطة الصورة في html

    عندما أقوم بتضمين وضع الخلفية (يسار الوسط) لخريطة الصورة ، لا يتم متابعة تحديد مواقع الروابط.

    أي طريقة للالتفاف على هذا؟ أنا هواة جدا. شكرا لكم.

  19. 31

    هل يمكن استخدام نهج مشابه لخريطة صورة أكبر وأكثر تعقيدًا مثلما أحاول استخدامها؟

    إذا قمت بعرض موقعي ، فانقر على الروابط الموجودة على اليسار وسترى الصورة التي أحاول استخدامها كخريطة صورة (ضمن الأبجدية النصية).

    في الأساس ، تحاول استخدام الصورة للانتقال إلى كل قسم من هذه القائمة بالحرف.

    من الواضح أنني أمضيت 20 دقيقة في إنشاء خريطة باستخدام GIMP ، ثم قام WP بإزالة علامات الخريطة ، وهكذا وجدت موقعك.

    رغم ذلك ، قد يفكر في استخدام Flash

    شكر.

  20. 33

    أنا أستخدم حاليًا تصميم قالب وتحريره باستخدام أشيائي الخاصة. أريد إضافة خريطة صورة ، لكني لست متأكدًا من مكان وضعها في css. الصورة التي أريد عمل خريطة لها موجودة في جزء الرأس.

  21. 34

    مرحبًا ، لقد أنشأت موقع الويب الخاص بي على جملة ... أريد استخدام هذه الطريقة لجعل شعار صفحتي رابطًا للمنزل ، لقد قيل لي إنه لا يمكنك القيام بذلك باستخدام جملة ولكن هذه المقالة تمنحني الأمل! المساعدة عبر البريد الإلكتروني ستكون محل تقدير كبير…. شكرا لك

  22. 35

    مرحبًا دوغ - أقوم بإنشاء خريطة صور معقدة نوعًا ما تستند إلى css والتي تحتوي أيضًا على عمليات تمرير عن بعد (في هذه الحالة ، يتم عرض النص في مكان آخر على الصفحة عندما تحوم فوق إحدى النقاط الفعالة للصورة). على أي حال ، صادفت مثالك هنا أثناء البحث عن ... وأعتقد أنني سأشارك المدخلات التالية:

    1. لإمكانية الوصول ، لا يجب استخدام الرؤية: لا شيء (أو العرض: لا شيء إذا اعتبرت ذلك) لإخفاء النص هنا ، كعنصر مصمم مع إمكانية الرؤية: لن تتم قراءة المخفي بواسطة برامج قراءة الشاشة (تلك التي تتبع المواصفات) .

    بدلاً من ذلك ، استخدم تقنية استبدال صورة أكثر قوة. أقترح إما طريقة Phark أو Gilder / Levin - فهذه هي أفضل الأسماء الموثقة على Google للعثور على التقنيات الأساسية. أنا أفضل G / L لأنه يعمل أيضًا مع تمكين CSS ولكن الصور متوقفة.

    2. على الرغم من أنني لا أرى كسرًا (باستخدام FF3) ، فإن تطبيقك لتحديد المواقع ينطوي أيضًا على مخاطر كامنة. يتم وضع العنصر المطلق تحديد الموضع بالنسبة إلى أقرب موقع له. بشكل أساسي ، قد ترغب في تعيين سياق تحديد الموضع بشكل صريح عن طريق تطبيق "position: النسبي" على #subscription. ثم يمكن وضع الأطفال (الروابط الموضوعة) داخل هذا الوالد. تساعد هذه الطريقة في ضمان نتائج أكثر موثوقية عبر المتصفحات.

    أيضًا ، يجب عليك بعد ذلك استخدام إعلانات تحديد الموضع لـ "top: x" و "left: x" (حيث x هي قيمة الإزاحة ، على سبيل المثال بالبكسل) بدلاً من الهوامش للتعامل مع هذا الموضع. مرة أخرى ، لا أرى بالضرورة أنه يكسر الطريقة التي لديك بها ، ولكن الجزء العلوي واليسار مخصصان لهذا ، فلماذا لا تستخدمهما؟ بالإضافة إلى أنه قد تم تعيين عدد تعويمات وهوامش على نفس العنصر ، والتي في ظل ظروف معينة تسبب خطأ "الهامش المزدوج" في IE6 (هل اختبرت هذا هناك؟) - بينما يوجد حل ، يمكنك تجنب هذه المشكلة تمامًا باستخدام ويترك بدلاً من الهوامش للوضع في هذه الحالة.

    3. أخيرًا ، لماذا لا تستخدم قائمة غير مرتبة سليمة لغويًا لهذه الروابط بدلاً من div التي لا معنى لها؟

    آسف على الاستغناء عن ... أود فقط المشاركة ، ب / ج أعلم من التجربة كيف أن هناك العديد من الطرق المختلفة لاستخدام CSS للحصول على النتيجة المرجوة ، ولكن بعض الطرق تعمل بالتأكيد بشكل أفضل (أكثر موثوقية ومتصفح) من غيرها . HTH.

  23. 36
  24. 37
  25. 38

    شكرا جزيلا!! لقد أنقذت تعليماتك ساعات من العمل ... أنا جديد في تطوير الويب ، وقد عانيت للتو من خلال أول مشروع كبير لي. لقد فعلتها ... العميل سعيد ، منتشي بالفعل ، وأنا كذلك!

  26. 39

    مرحبا ، شكرا جزيلا لنشر هذا! بعد سنوات وما زال يساعد… جميل! أنا أكافح من أجل ربط خريطة صورتي في المكان الصحيح. لدي لافتة وأريد أن ترتبط الرموز الاجتماعية في الجزء العلوي الأيمن من الشعار باستخدام الكود الذي قدمته. إنه يعمل بشكل رائع ، إلا أنني أفعل شيئًا خاطئًا لأن الروابط الخاصة بي تظهر في أقصى الجانب الأيسر العلوي من الشاشة ، وليس فوق الرموز الاجتماعية ، ولكن فوق الشعار. أنا متأكد من أنه شيء بسيط ، لكنني لا أستطيع معرفة ذلك. اعتقدت أنني سأشاركها هنا في حال كان لديك أي أفكار. شكرا مرة أخرى لنشر هذه!

ما رأيك؟

يستخدم هذا الموقع نظام Akismet لتقليل الرسائل الضارة. تعرف كيف تتم معالجة بيانات تعليقك.