ایجاد لینک روی قسمتی از تصویر با فتوشاپ

می خوام طریقه ی گذاشتن لینک روی قسمتی از تصویر رو براتون بگم . 

اول این عکس قالب منو را اینجا دانلود کنید. 

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

1) برای اینکار برنامه ی Adobe ImageReady  که یکی از قسمت های خود برنامه ی فتوشاپ هست رو باز کنید . این عکسی را که دانلود کردید را یا استفاده از File و Open باز کنید. 

 2) دکمه ی P صفحه کلید را کلیک کنید یا با توجه به تصویر زیر ، به قسمت Rectangle Image Map Tool بروید . 

 

 image map 

3) اینجا چندین گزینه هست که می تونید ازش استفاده کنید و بعد از انتخاب هر کدام باید روی اون قسمت یعنی مثلا قسمت سیاه رنگ دکمه ی Home در تصویر بروید و این قسمت رو انتخاب بکنید. 

اولین گزینه Rectangle Image Map Tool برای ایجاد لینک مربع یا مستطیل روی  تصویر است . و دومی یعنی Circle Image Map Tool برای ایجاد لینک دایره یا بیـضی شکل روی تصویر است. 

و گزینه ی سوم یعنی Polygon Image Map Tool هم برای ایجاد لینک چند ضلعی روی تصویر است که به نظر من همین گزینه رو انتخاب کنید و با آن قسمتی از تصویر یعنی دکمه ی مثلا Home را انتخاب کنید. به شکل زیر:  

 

انتخاب قسمتی از تصویر 

3) بعد از این کار به منوی Window و سپس Animation را انتخاب نمایید. 

4) تب Image Map را انتخاب کنید و در قسمت Url آدرس سایت مورد نظر را وارد کنید به همراه http:// و در قسمت Target هم طریقه ی باز شدن لینک را مشخص کنید . Alt هم نامی که بعد از قرار گرفتن کرسر روی دکمه پیدا میشود را بنویسید. بعد از این کار می توانید منو های دیگر را هم بسازید.  

5) روی آیکن شبیه مرورگر اکسپلورر  آیکن خروجی   در قسمت نوار ابزار کلیک کنید تا به شما خروجی بدهد.

نظرات 5 + ارسال نظر
میثم سه‌شنبه 9 شهریور‌ماه سال 1389 ساعت 02:16 ب.ظ http://www.ofpersia.blogfa.com

جالب بید رفیق...

قابل شما رو نداشت.

400GB سه‌شنبه 9 شهریور‌ماه سال 1389 ساعت 04:18 ب.ظ http://400GB.co.cc

سلام دوست گرامی
مطالب جالب و مفیدی گذاشتی
دخیره میکنم تا سر فرصت بخونم
منتظر مطالب بعدی شما هستم

حجت دوشنبه 27 آذر‌ماه سال 1391 ساعت 10:41 ب.ظ

سلام
خیلی مفید بود
تقریبا یک سال پیش این مطلب رو یه جایی خونده بودم؛ حالا هرچی دنبالش گشتم پیداش نکردم؛ به سایت‌های زیادی برخوردم، هیچ‌کدوم این‌طور واضح توضیح نداده بود
عکس پیوستی رو که دانلود کردم، یادم اومد که دقیقا پارسال هم از همین‌جا یاد گرفته بودم !! :-)
از آشنایی مجدد خوشبختم

bia2sangan سه‌شنبه 28 آذر‌ماه سال 1391 ساعت 08:39 ب.ظ http://bia2sangan.lxb.ir

دمت گرم عالی بود یه سری هم به ما بزن و راهنماییم کن که وبلاگم چطوره

میم جمعه 11 بهمن‌ماه سال 1392 ساعت 05:08 ب.ظ

سلام .ممنون از مطلبتون. ولی فتو شاپ من image ready نداره. اصلا من بلد نیستم. فتوشاپ دو و سه هم ندارم. دانلود هم نمیشه. نرم افزار جایگزینش هست؟
راستی بعدش توی اکسپلورر چجوری میشه؟

سلام من هم خیلی گشتم ولی پیدا نکردم. عیبی نداره می تونید از این سایت استفاده کنید:
http://www.maschek.hu/imagemap/imgmap
آموزشش را گذاشتم:
http://barnamenevisi.blogsky.com/1392/11/12/post-122/

برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)
ایمیل شما بعد از ثبت نمایش داده نخواهد شد