مثال على صفحة HTML ذات مخطط صورة للتنقل

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

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

صفحة HTML ذات مخطط صورة للتنقل بين طرق العرض

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

على سبيل المثال، تعكس المنطقة الحمراء الموجودة على مخطط الصورة، زر انتقال إلى Shared Group2 View2 المشترك من المثال السابق. إذا نقرت على المنطقة الحمراء، فستنتقل إلى طريقة عرض 2 في مجموعة 2.