تلميحات الأدوات على الصورة

Question

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

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

Answer 1

نعم، يمكنك القيام بذلك بدون جافا سكريبت.استخدم خريطة صورة HTML، مع سمات العنوان، مثل هذا:

<img usemap="#logo" src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png">
<map name="logo">
<area shape="rect" href="" coords="52,42,121,65" title="Stack">
<area shape="rect" href="" coords="122,42,245,65" title="Overflow">
</map>

يشير شعار Stack Overflow إلى خريطة الصورة, ، والذي يحدد مستطيلًا لكل من الكلمتين باستخدام area بطاقة شعار.كل area العلامات title يحدد العنصر النص الذي تعرضه المتصفحات عمومًا كتلميح أداة.ال shape يمكن للسمة أيضًا تحديد دائرة أو مضلع.

Answer 2

ال title السمة هي أبسط الحلول ومضمونة للعمل، و يتحلل بأمان بالنسبة لوكلاء المستخدم الذين لا يدعمونه بشكل صحيح.

Answer 3

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

Answer 4

لدى MooTools برنامج نصي أنيق لهذا الغرض.يرى نصائح MooTools.خفيف الوزن على HTML أيضًا.

وهنا أ تجريبي من الإصدار 1.11.

Answer 5

في الواقع mootools هو واحد من العديد من الأطر
التي تسمح لك بإضافة وظائف إلى أي عنصر على
صفحة الويب الخاصة بك.هنا رابط لبرنامج تعليمي صغير.
http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips

Mootools ليس في الحقيقة إطار عمل من نوع النسخ واللصق،
يشجعك على إلقاء نظرة على الكود المرفق و
قم بطرح الحل الخاص بك مع بعض الأمثلة الممتازة.

Answer 6

يمكنك تجربة أداة جافا سكريبت على http://www.taggify.net/ .يسمح البرنامج النصي بإضافة تلميحات أدوات لجزء من الصورة - عندما يقوم المستخدم بتحريك الماوس فوق المنطقة الموجودة في الصورة، فإن تلميح الأدوات المنبثق للبرنامج النصي يرسم حدودًا حول المنطقة ويخفي الأجزاء الأخرى.شيء رائع لوضع علامة على الأشخاص في الصورة.انظر العرض التوضيحي في http://www.taggify.net/demo.aspx

Answer 7

يمكنك استخدام title سمة لتلميح الأدوات البسيط.يعمل على جميع كائنات DOM تقريبًا.