HTML Tutorial
تستخدم العلامة <map> لإنشاء مناطق قابلة للنقر فوقها داخل صورة. ويمكن ربط هذه المناطق بعناوين URL أو غيرها من عناصر HTML.
<img src="image.jpg" usemap="#map">
<map name="map">
<area shape="rect" coords="0,0,100,100" href="link1.html">
<area shape="circle" coords="150,150,50" href="link2.html">
</map>
هذا المثال ينشئ صورة ذات منطقتين قابلة للنقر فوقها: مستطيل دائري وآخر دائري. عند النقر فوق المستطيل، يتم توجيه المستخدم إلى link1.html، وعند النقر فوق الدائرة، يتم توجيه المستخدم إلى link2.html.
مثال HTML بسيط لاستكشاف العلامة
<!DOCTYPE html>
<html>
<head>
<title>مثال على العلامة <map></title>
</head>
<body>
<img src="image.jpg" usemap="#map">
<map name="map">
<area shape="rect" coords="0,0,100,100" href="link1.html" alt="مستطيل">
<area shape="circle" coords="150,150,50" href="link2.html" alt="دائرة">
</map>
</body>
</html>
هذا المثال ينشئ صورة ذات منطقتين قابلة للنقر فوقها: مستطيل دائري وآخر دائري. كما أنه يتضمن سمة alt، والتي توفر نصًا بديلًا للمناطق التي لا يمكن الوصول إليها، وذلك لتحسين إمكانية الوصول.