ساخت نقشه تصویری ( image map )
پنجشنبه 9 تیر 1390 ساعت 01:34 ب.ظ | نوشته ‌شده به دست Mr.pouria ..... | ( نظرات )

 

  Image map یکی از تکنیکهای ساخت عکس بصورت لینک است که گاهی اوقات به کمک ما میاید. بطور مثال ما نقشه ایران را در صفحه ای قرارداده و میخواهیم که بیننده سایت هرگاه روی یک استان کلیک کرد صفحه مربوط به آن باز شود تا اطلاعات مربوطه را در اختیار کاربر قرار دهد. این حالت حجم عکس را افزایش نخواهد داد و بهتر است از عکسهایی با حجم بالا استفاده نکنیم که در این مورد به قسمت عکسها رجوع کنید.

خب حالا عکس مورد نظر را با استفاده از تگ <img>درصفحه قراردهید،  سپس خصوصیت usemap=" "  را به تگ  اضافه کنید که آنرا برابربا یک اسم واحد باید قرار دهیم تا از آن اسم در جای دیگر استفاده شود. این خصوصیت به مرورگر میفهماند که عکس را بصورت Image map  میخواهیم بکار بریم.

<img src="images/mypic.gif" usemap="#map01">

به علامت # دقت کنید که باید نوشته شود. در حال حاضر عکس آماده است و باید تگهای نقشه را وارد کنیم.ابتدا تگ <map name="map01">  وارد میکنیم تا مرورگر بفهمد که نقشه آغاز شده و با استفاده از خصوصیتname=" "   مشخص میشود که چه عکسی قرار است این خاصیت را داشته باشد. حالا نوبت به تعیین قسمتهای مختلف عکس رسیده که هر قسمت در چه اندازه ای و به کجا باید لینک شود. این قسمتها میتوانند اشکال هندسی نظیردایره، چهارگوش وچند ضلعی باشند. این اطلاعات در تگ <area> مشخص میشوند، این تگ دارای سه خصوصیت میباشد:

بقیه در ادامه مطلب...

  Shape=" "  مشخص میکند که هر قسمت دارای چه شکل هندسی میباشد. اگر چهارگوش rectangle باشد آنرا برابر با "rect"  قرار میدهیم، اگر دایره circle بخواهیم برابر با "circle" و اگر چند ضلعی polygon بخواهیم برابر با "poly"   قرار میدهیم.

  Coords=" "این خصوصیت، مختصات نقاط تشکیل دهنده  شکلها را مشخص میکند که مختصات هر نقطه بر اساس محور x, y  در مقیاس پیکسل میباشد. برای تشکیل یک لینک به شکل چهارگوش باید مختصات دو نقطه گوشه چپ طرف بالاوگوشه راست طرف پایین آنرا بدست بیاوریم ، چون هر نقطه دارای دو مختصات میباشد یکی بر روی محور xها و دیگری yها پس چهار عدد باید بنویسیم و هر عدد را با علامت کاما جدا کنیم.

Coords="10,10,65,65"

همچنین برای درست کردن یک لینک به شکل دایره مختصات مرکز آن و اندازه طول شعاع را باید پیدا کنیم که با توجه به گفته بالا سه عدد باید نوشته شود و برای چند ضلعی به تعداد هر نقطه دو عدد مینویسیم که دیگر محدودیت ندارد.

href=" " که در این قسمت آدرس صفحه یا سایت مورد نظر را وارد میکنیم.

<img src="images/mypic.gif" usemap="#map01">
<map name="map01">
<area shape="rect" coords="25,25,55,50"  href="page.htm">
<area shape="circle" coords="124,243,40"  href= "www.yahoo.com">
<area shape="poly"  coords="22,30,76,90,147,199,289,270,140,111,44,67"  href="pages/first.html">
</map>

 

 خب سوالی که حالا پیش میاید، اینست که مختصات این نقاط را چگونه پیدا کنیم؟ دو راه برای آن وجود دارد، یکی استفاده از برنامه های مختلف مانند Photoshop و دیگری که برایتان توضیح خواهم داد بدون استفاده از برنامه جانبی است و داخل همان صفحه ، با کمک مرورگر اینترنت اکسپلورراست. بعد از اینکه یک عکس را در صفحه قرار دادیم و مراحل تشکیل Image map  را انجام دادیم یک تگ و یک خصوصیت به این کدها اضافه میکنیم و آنچه را که میخواهیم براحتی بدست میاوریم. ابتدا تگ مخصوص لینک را قبل از<img> قرار میدهیم تا عکس ما بصورت یک لینک ظاهر شود و سپس خصوصیت ismap را به تگ<img>اضافه میکنیم و فایل را ذخیره میکنیم. حالا آنرا باز کرده و همانطور که موس را روی عکس حرکت میدهید یک نگاه به نوار وضعیت status bar  مرورگر در پایین بیاندازید، اعدادی را که مشاهده میکنید مختصات نقاط میباشند.

<a href=" # "><img src="image.gif" usemap="#newmap"  ismap>
<map name="newmap">
</map>
</a>

فراموش نکنید که بعد از پیدا کردن مختصات نقاط، تمام مراحلی را که اضافه کردید دوباره بردارید.



نمونه


Image Map


Tehran Azarbaijan sharghi Khouzestan Fars Khorasan



xyTune


eMech


می توانید دیدگاه خود را بنویسید
 
موضوعات
نویسندگان
دیگر موارد
تعداد مطالب :
تعداد نویسندگان :
آخرین بروز رسانی :
بازدید امروز :
بازدید دیروز :
بازدید این ماه :
بازدید ماه قبل :
بازدید کل :
آخرین بازدید :

شبکه اجتماعی فارسی کلوب | Buy Website Traffic | Buy Targeted Website Traffic