نقشه هاي تصويريHTML Image Maps -
Previous > <NextباHTML image maps ميتوان نواحي قابليت كليك درنقشه ايجاد نمود .
نقشه هاي تصويريImage Maps -
باHTML <map> يك نقشه تصويري تعريف ميشود.در آن ميتواند نواحي قابل كليك تعريف شود .اين نوحي باHTML <area> تعريف ميگردد.
در تصوير زيركه نمونه تصوير نقشه اي است، داراي سه پيوند در ناحيه فنجان، كامپيوتر و تلفن ميباشد .روي اين نواحي كليك كنيد ونتيجه را مشاهده نمائيد.
Image Maps
مثال ـ برنامه نقشه تصويري فوق
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"> </map >
روش كارHow Does it Work -
هدف از تصوير نقشه اين است كه بتوانيد اقدامات مختلفي را براساس نواحي قابليت كليك انجام دهيد مسلما اين اقدامات براساس موضوع نواحي نقشه تنظيم ميشود.
درHTML براي نقشه تصويري نيازمند يك تصوير ومجموعه اي از كدHTML است .مجموعه كد بايد توصيف كننده نواحي قابليت كليك باشد.
تصويرThe Image -
همانطوريكه در بخشهاي قبلي بحث شد، قرار دادن تصوير در صفحه باHTML <img> ميباشد .يعني با آن تصوير تعريف ميشود .براي نقشه تصويري ويژگيusemap هم بايد در آن معرفي گردد .مطابق نمونه زير:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" >
نقشه تصويري بايد داراي نامي باشد، اين نام باهشتگ# در ابتداي آن قرار گرفته و مقدار usemap معرفي ميشود.در نمونه فوق نام نقشهworkmap و usemap="#workmap" ميباشد.
نكته ـ ميتوان هر تصويري بعنوان نقشه تصويري بكار برد.
ايجاد نقشه تصويريCreate Image Map -
براي ايجاد نقشه تصويري ازHTML <map> استفاده ميشود .و بوسيله ويژگي name="mapname" به نقشه ارتباط برقرار ميكند .مطابق نمونه
<map name="workmap">
مقدارname بايد مشابه نام نقشه در ويژگي usemap در تگ تصوير باشد.
ناحيه قابليت كليكThe Area -
بايد براي نقشه تصويري نواحي قابليت كليك مشخص نمود .اين كار با استفاده از HTML <area> انجام ميشود.
شكل ناحيهShape of Area -
با ويژگيHTML shape در تگ ناحيه ،بايد شكل ناحيه مشخص گردد .مقدار اين ويژگي يكي از موارد زير ميباشد.
-
- rectـ يگ ناحيه مستطيلي
- circleـ يك ناحيه دايره اي
- polyـ منطقه چند ضلعي
- defaultـ كل منطقه را معرفي ميكند .
همچنين بايد مختصاتي براي اشكال فوق معرفي شود، تا شكل كامل گردد.
ناحيه مستطيليShap="rect"-
براي ناحيه مستطيلي مختصات گوشه بالائي سمت چپ وگوشه پائيني سمت راست بايد اعلام شود. براي هر كدام بايد زوج(x_axis,y_axis) اعلام گرددx_axis .در تصويرleft-margin و y_axisمعادل right-margin آن نقطه ميباشد .حاشيه نسبت به تصوير در نظر گرفته ميشود. بعنوان نمونه مختصات(34,44) - يعني نقطه داراي حاشيه سمت چپ34 پيكسل وحاشيه بالا44 پيكسل ميباشد، مطابق شكل زير
pixels from the top:
گوش پائين سمت راست(270,350)-
نقطه ايست با270پيكسل حاشيه چپ و350پيكسل حاشيه بالا،مطابق تصوير
اكنون اطلاعات كافي براي ايجاد مستطيل قابل كليك وجود دارد.
مثال ـ ايجاد ناحيه مستطيلي قابل كليك براي كامپيوتر
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
اين مثال ناحيه قابل كليك براي كامپيوتر است، با كليك در ناحيه فوق صفحه"computer.htm" كه درhrefتگ<area> مشخص شده ،نمايش داده ميشود.
ناحيه دايره ايShape="circle"-
براي ايجاد ناحيه دايره اي ابتدا مختصات مركز داير بايد پيدا شود .مركز دايره (337,300) مطابق تصوير
براي ناحيه دايره علاوه برمركز بايد شعاع دايره هم مشخص شود .مطابق شكل44 پيكسل.
باتوجه به مختصات مركز دايره وشعاع آن ناحيه مطابق مثال زير تعريف ميشود.
مثال ـ ايجاد ناحيه دايره براي فنجان قهوه
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
با كليك در ناحيه فنجان قهوه صفحه"cooffee.htm"كه در href مشخص شده نمايش داده ميشود.
ناحيه چند ضلعيShape="poly"-
shape="ploy"ناحيه چند ضلعي را معرفي ميكند، كه داراي تعدادي مختصات نقطه اي است .با اتصال خطوط ناحيه چند ضلعي حاصل ميشود .ازاين روش ميتوان هرشكلي را ايجاد كردمثل كروسان(croissant)
چگونه ميتوان در تصوير زير براي كروسان ناحيه قابليت كليك ايجاد كرد.
بايد مختصات نقاطي از شكل را پيدا نمائيم كه آنرا پوشش دهد .اين نقاط در تصوير زير مشخص شده است.
براي هر نقطه بايد زوجx_axis,y_axis اعلام شود .
مثال ـ ناحيه چند ضلعي
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58, 352,37,322,40,259,103,161,128,147" alt="Croissant" href="croissant.htm">
اين ناحيه قابل كليك ، در صورت استفاده صفحه"croissant.htm"نمايش داده ميشود .
نقشه تصويري و جاوااسكريپتImage map and JavaScript -
يك ناحيه تصويري قابليت كليك ميتوان يك تابع جاوااسكريپت را فعال كند.
براي اين كار بايد ازonclick="function_name()"در تگ<area> استفاده شود.
مثال ـ استفاده ازجاوااسكريپت در ناحيه تصويري
<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
خلاصه فصلChapter Sammary -
-
- باHTML <map> يك نقشه تصويري تعريف ميشود.
- با استفاده ازHTML <area> يك ناحيه قابليت كليد تعريف ميشود.
- بااستفاده ازويژگيHTML usemap در تگ<img> ارتباط بين نقشه وتصوير برقرار ميگردد.
Previous > <Next