Mousa Alakesh نشر 3 فبراير 2021 أرسل تقرير مشاركة نشر 3 فبراير 2021 السلام عليكم أرغب بعمل لوحة الحروف المرفقة وحاولت اعملها بـ css لكن لم اصل للشكل المطلوب. رابط الكود : https://codepen.io/akeshma/pen/XWNJVrW هل يوجد طريقة أخرى افضل مثلا ؟ 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 بلال زيادة نشر 3 فبراير 2021 أرسل تقرير مشاركة نشر 3 فبراير 2021 يمكنك استخدام وسم map في HTML بحيث تدرج الصورة ومن ثم تحديد map لها وتحديد الأحداثيات لكل حرف باستخدام خاصية coords. فمثلا <!DOCTYPE html> <html> <body> <img src="planets.gif" width="145" height="126" usemap="#image"> <map name="image"> <area shape="rect" coords="0,0,82,126" href=""> <area shape="circle" coords="90,58,3" href=""> <area shape="circle" coords="124,58,8" href=""> </map> </body> </html> فكل سهم يشير إلى أحداثيات كل منطقة في الصورة بحيث لو قمت بالضغط على أي منطقة محددة تستطيع فعل أي حدث على هذه المنطقة, ممكن ان تقوم بتشغيل صوت , أو التحويل إلى صفحة معينة, أو وضع tooltip على هذه المنطقة, الأمر متروك لك, يمكنك القراءة أكثر عن هذا الوسم بالدخول إلى موسوعة حسوب من هنا وأيضا يمكنك مشاهدة أمثلة على هذا الوسم من هنا. أيضا هذه الوسم يكثر استخدامه في برمجة الألعاب حتى تستفيد من الصورة بوضع أكثر من حدث عليها او تقسيمها إلى مناطق فلو شاهدت التالي تجد ان هذا المثال اكثر وضوحاً من قبله بحيث قمنا بالاستفادة من الصورة و جعلناها مناطق و وكل دائرة هي عبارة عن منطقة. أرجوا قد وضح المثال ووضحت الفكرة لديك. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Mousa Alakesh
السلام عليكم
أرغب بعمل لوحة الحروف المرفقة وحاولت اعملها بـ css لكن لم اصل للشكل المطلوب.
رابط الكود :
https://codepen.io/akeshma/pen/XWNJVrW
هل يوجد طريقة أخرى افضل مثلا ؟
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.