Donya IT

دنیا آی تی - donyait

دنیایی متفاوت از آی‌تی را با دنیا آی‌تی تجربه کنید

0-different-links-on-one-image-donyait.blog.ir.png

برای مشاهده به ادامه مطلب مراجعه کنید...

 

1- ابزار مورد استفاده برای این کار نرم‌افزار فوتوشاپ (Adobe Photoshop) می‌باشد. نرم‌افزار را بازکرده و ابزار Slice Tool را انتخاب کنید. قسمتی که می‌خواهید لینک داشته باشد را مشخص کنید.

1-different-links-on-one-image-donyait.blog.ir.png

 

2- بعد از اینکه قسمت مورد نظر مشخص کردید ابزار Slice Select Tool را انتخاب کنید و بر روی Slice Option کلیک کنید.

2-different-links-on-one-image-donyait.blog.ir.png

 

3- در پنجره باز شده باید اطلاعات مربوط به لینک را وارد کنید.

URL: آدرس مربوط به لینک

Target: نوع باز شدن صفحه مربوط به لینک که چند نوع می‌باشد.

  • _blank بازشدن در پنجره یا تب جدید.
  • _self بازشدن در همان پنجره که بر روی لینک کلیک شده است.
  • _top  بازشدن به عنوان بالاترین پنجره

3-different-links-on-one-image-donyait.blog.ir.png

 

4- حال باید فایل را برای استفاده در وب ذخیره کنیم. برای این کار به مسیر File > Export > Save For Web بروید.

4-different-links-on-one-image-donyait.blog.ir.png

 

5- فرمت ذخیره را بر روی HTML and Images قرار داده و (در یک پوشه مجزا) ذخیره کنید.

5-different-links-on-one-image-donyait.blog.ir.png

 

6- پس از ذخیره با دو فایل روبه‌رو خواهید شد.

6-different-links-on-one-image-donyait.blog.ir.png

 

7- فایل HTML را به کمک نوت‌پد باز کنید.

7-different-links-on-one-image-donyait.blog.ir.png

 

 8- در قسمت مشخص شده کد های لازم برای استفاده در وب را مشاهده می‌کنید. تصاویر موجود در پوشه images را بدون تغییر نام به اینترنت آپلود کرده و لینک هر تصویر را در جای مخصوص خودش قرار دهید.

8-different-links-on-one-image-donyait.blog.ir.png

 

9- کار تمام است! پس از اینکه لینک ها را جایگزین کردید، کد ها را در در مکانی که میخواهید تصویر نمایش داده شود قرار دهید.

 

آموزش قراردادن لینک‌های متفاوت در قسمت‌های مختلف یک تصویر

چند لینک بر روی یک عکس

محمد (مدیر) ۹۵/۰۴/۲۵ ۵۲۴
آموزش قراردادن لینک‌های متفاوت در قسمت‌های مختلف یک تصویر

نظرات (۲)

سلام
ببخشید ؛ شما اجازه می دید بعضی از مطالب کدنویسی و گرافیکتون رو با ذکر منبع ، توی انجمن های مختلف قرار بدم بقیه هم استفاده کنن ؟
۲۵ تیر ۹۵، ۲۱:۱۳
پاسخ توسط: محمد (مدیر)
بله، فقط لینک به صفحه یادتون نره
واقعا جالب بود

نمی دونستم با فتوشاپ میشه این کارا هم کرد :)
۲۵ تیر ۹۵، ۱۹:۴۳
پاسخ توسط: محمد (مدیر)
خیلی کار ها میشه کرد : )
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">