HTMLالوسم <map>

<!-- "demomap" مع تحديد أنها تستخدم خريطة إسمها <img> هنا قمنا بإضافة صورة بواسطة الوسم -->
<img src="solar-system.jpg"
    width="254" height="254" alt="Solar System" usemap="#demomap">

<!-- التي تستخدمها الصورة "demomap" هنا قمنا بتعريف الخريطة -->
<map name="demomap">
    
    <area shape="circle" coords="0,127,63" alt="Sun" href="sun.html">
    <area shape="circle" coords="91,132,9" alt="Mercury" href="mercury.html">
    <area shape="circle" coords="128,132,20" alt="Venus" href="venus.html">
    <area shape="circle" coords="176,132,23" alt="Earth" href="earth.html">
    <area shape="circle" coords="226,135,17" alt="Mars" href="mars.html">
</map>

<!-- "demomap" مع تحديد أنها تستخدم خريطة إسمها <img> هنا قمنا بإضافة صورة بواسطة الوسم -->
<img src="shapes.PNG"
    width="247" height="88" alt="Shapes" usemap="#demomap">

<!-- التي تستخدمها الصورة "demomap" هنا قمنا بتعريف الخريطة -->
<map name="demomap">
    <!-- الوسم التالي يشير لمكان المربع في الصورة -->
    <area shape="rect" coords="65,70,16,20" alt="Rectangle" href="rectangle.html">
    <!-- الوسم التالي يشير لمكان المثلث في الصورة -->
    <area shape="poly" coords="97,72,151,72,123,19" alt="Triangle" href="triangle.html">
    <!-- الوسم التالي يشير لمكان الدائرة في الصورة -->
    <area shape="circle" coords="204,46,28" alt="Circle" href="circle.html">
    <!-- الوسم التالي يشير لمكان الأجزاء المتبقية في الصورة -->
    <area shape="default" href="background.html">
</map>