WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Canvas

HTML5 canvas Image Mapper

— الإضافة إلى WorldWideScripts.net

الاشتراك في موقعنا تغذية للبقاء حتى الآن!

جديد! تابعونا على النحو الذي تريد ذلك!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

هذا هو رسم خرائط صورة HTML مصممة لمطوري الويب.

تم تطوير أداة باستخدام قماش HTML5، لذلك استخدامه يقتصر على المتصفحات التي تدعم قماش، ولكن أيضا API الملف:

IE10 +، + FF3.6، FF14-، FF18 + (في FF15 لديهم مشاكل مع بعض وظائف قماش، علة 787623، التي سيتم حلها في FF18)، Chrome6 +، + Safari6، Opera11.1 +

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

لقد استخدمت FF14 لتطوير أداة، لذلك هذا هو أفضل كويس، ولكن تم اختبار الأداة أيضا في Chrome22 وOpera12


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


ما هو مخطط صورة؟

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

 <img src="image1.png" width="145" height="126" alt="map example" usemap="#image1map" /> <map name="image1map"> <area shape="rect" coords="0,0,82,126" href="area1.html" alt="area1"> <area shape="poly" coords="108,145,174,71,205,139,153,192" href="area2.html" alt="area2"> <area shape="circle" coords="124,58,8" href="area3.html" alt="area3"> <area shape="default" href="http://default.html" alt = "the whole image"/> </map> 

كما ترون، لديك لتعيين السمة usemap في العلامة img، التي سيكون لها نفس قيمة السمة اسم في العلامة خريطة. بين <خريطة> و </ خريطة> يمكنك تعريف العديد من <المنطقة> الكلمات كما تريد، يمثل كل منها منطقة المستخدم للنقر على الصورة المرتبطة بها. يجب أن يكون لكل منطقة سمة الشكل، والتي يمكن أن يكون إحدى القيم 3: المستطيل، وبولي ودائرة. يتم تعريف شكل المستطيل تماما بنسبة 2 نقطة، ويعرف شكل بولي عن طريق سلسلة من النقاط ويتم تعريف شكل دائرة بفارق نقطة واحدة، وهذا يمثل مركز، ودائرة نصف قطرها. يتم تعريف جميع النقاط من قبل اثنين من الإحداثيات، أعرب في بكسل والأقارب إلى الزاوية العلوية اليسرى من الصورة. السمة شكل يمكن أن يكون أيضا "الافتراضي" القيمة، التي تشير إلى أجزاء من الصورة لم يتم تعيينها مع أي من الأشكال السابقة. تأخذ بعين الاعتبار، بدلا من ذلك، أن الترتيب الذي يتم تعريف الأشكال في الخريطة مهمة جدا: إذا قمت بتعريف "الافتراضي" الشكل كما الشكل الأول في الخريطة، فإنه سيتجاوز جميع الأشكال اللاحقة، لأن "الافتراضي" الشكل يشير إلى الصورة كاملة. وهذا ينطبق أيضا مع الأشكال التي تتداخل مع بعضها البعض: يمكنك تحديد شكل قليلا في شكل أكبر، ولكن عليك أن تعرف أولا على شكل قليلا ثم أكبر واحد. إذا 2 الأشكال تشترك في جزء من الصورة، على شكل عرف لأول مرة، يفوز.

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

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

بعد رسم الأشكال على صورة معينة، يمكنك توليد كود HTML بمجرد النقر على زر وسيتم displayied رمز في ناحية النص. يمكنك نسخ كود HTML واستخدامه في صفحة HTML الخاص بك (ق). يمكنك أيضا القيام بعملية عكسية: لصق رمز HTML في جزء النص، يمكنك تحميل هذا الرمز بمجرد النقر على زر. هذا سوف تترجم في الأشكال على الصورة ويمكنك تعديلها، إضافة أشكال جديدة وإعادة توليد-رمز HTML. هذه الآلية عكس مفيدة لتسمح لك لانقاذ عملية رسم الخرائط الجزئية ومواصلة لتعيين صورة في وقت لاحق. ومن المفيد أيضا لصقل "يدويا" شكل تصميم / لتحديد المواقع: بعد توليد رمز في ناحية النص، يمكنك تعديل الإحداثيات في ناحية النص على الطاير وإعادة تحميل ذلك.

ميزات رئيسية هي:

  • يمكنك اختيار الصورة المحلية أو البعيدة
  • يمكنك تعيين أحجام الصور الهدف: هذه هي أحجام أن الصورة سوف يكون في صفحة HTML الخاصة بك
  • يمكنك التكبير والتصغير الصورة في أي لحظة وهذا لن تتداخل مع الإحداثيات الحقيقية التي سيتم إنشاؤها، أن يعتمد فقط على أحجام الهدف من الصورة. ميزة التكبير مفيدة فقط لمساعدتك على رسم الأشكال.
  • يمكنك تعيين العديد من المعلمات لكل شكل، مثل "أ href" السمة "البديل" السمة، و "الهوية" و "الطبقة" سمات وأخيرا "الهدف" السمة. لتعيين المعلمة لديك لتحديد الشكل: لتحديد شكل لديك لتحديد السهم من أعلى إلى اليسار في شريط الأدوات ثم انقر على الشكل.
  • يمكنك تعيين بعض المعلمات لخريطة: خريطة "اسم"، عنوان الموقع الافتراضي والهدف.
  • يمكنك رسم شكل اختيار شكل من شريط الأدوات.
  • رسم الشكل، بعد تحديده من شريط الأدوات، يمكنك ببساطة النقر بالماوس على الصورة، حيث كنت تريد أن تبدأ الشكل.
  • إذا كان الشكل هو شكل دائرة، ونقطة يغازل هي مركز: تحريك الماوس (النقر أو الإفراج عنهم)، يمكنك ان ترى دائرة التي تتبع المؤشر. والنقر مرة أخرى الماوس يتوقف عن رسم الدائرة.
  • إذا كان الشكل هو المستطيل. النقطة الأولى هي واحدة من الزاوية. سوف تحريك الماوس (النقر أو الإفراج عنهم) رسم المستطيل. والنقر مرة أخرى الماوس يتوقف عن رسم.
  • إذا كان الشكل هو بولي العملية هي مختلفة قليلا: كل نقرة من الماوس وتعيين نقطة. يتم توصيل النقطة الحالية دائما مع واحد التنوب، مما يجعل بولي دائما شكل مغلق. لوقف لرسم بولي (لتعيين النقطة الأخيرة) لديك لانقر نقرا مزدوجا فوق الماوس.
  • لجميع الأشكال التي يمكن أيضا إيقاف لجذبهم النقر على زر "إيقاف" (السهم من أعلى إلى اليسار في شريط الأدوات).
  • تستطيع أن ترى إحداثيات الماوس عند تحريكه على الصورة.
  • يمكنك استخدام الحدود الرمادي متقطع حول الصورة لتحديد الإحداثيات حافة الصورة، بحيث يمكنك استخدام الحدود لأنه كان جزءا من الصورة: حتى، يمكنك النقر على الحدود خلال شكل الرسم، الآمرة كما وكان جزء من الصورة. على سبيل المثال، إذا قمت بالنقر فوق في الزاوية العلوية اليسرى من الحدود، وتعيين نقطة في (0، 0) ينسق. إذا قمت بالنقر فوق اليسار الحدود، في أي لحظة، وقمت بتعيين نقطة في (0، ذ) تنسق، الخ
  • يمكنك تحديد شكل مرسومة مسبقا وتعديل / تغيير / إزالته. لإزالته لديك لاستخدام "المطاط" في شريط الأدوات، من شأنها أن تبدو وكأنها قلم رصاص رفض اختيار شكل فقط.
  • يمكنك اختيار لون من كفاف من الأشكال من مجموعة من 5 ألوان (وهذا ليس أداة تصميم، لذلك أنا حدت من عدد من الألوان، وكذلك لا يمكنك اختيار لون مختلف عن كل شكل).
  • يمكنك النقر على زر "الخريطة"، وهذا هو مرئي فقط عند تحديد زر "إيقاف" على شريط الأدوات ويتم تحديد أي الشكل: إذا كان لديك بعض الأشكال المرسومة على الصورة سترى رمز HTML في جزء النص، إذا لم تكن قد رسمها بعد شكلا سترى ناحية النص فارغ، ولكن يمكنك الماضي في ذلك بعض رمز HTML وتحميله.
  • بالضغط على زر "تحميل" (يمكنك أن ترى إلا بعد النقر على زر "الخريطة")، سوف تترجم رمز HTML موجودة في جزء النص في الأشكال على الصورة.

يمكنك الرجوع إلى دليل كامل للأداة على الرابط التالي: دليل على الانترنت

إذا كان لديك أي أسئلة، مجرد ترك تعليق أو إسقاط لي رسالة بالبريد الالكتروني!


تحميل
المكونات الأخرى في هذه الفئةجميع مكونات هذا الكاتب
تعليقاتالأسئلة المتداولة والأجوبة

خصائص

خلق:
10 أكتوبر 12

اخر تحديث:
N / A

عالية الدقة:
لا

المتصفحات المتوافقة:
فايرفوكس، أوبرا، كروم

وشملت ملفات:
جافا سكريبت JS، HTML، CSS

النسخة البرمجيات:
HTML5

كلمات البحث

التجارة الإلكترونية, التجارة الإلكترونية, جميع المواد, التطبيق, منطقة, قماش, دائرة, تنسيق, HTML5, صورة, خريطة, مخطط, بولي, المستطيل, شكل, الهدف, أداة, زوم