لینک گذاشتن روی بخشی از تصویر

در پست های قبلی یک همچین آموزشی گذاشته بودم. اونم با بخش image ready  فتوشاپ 7 . تازگی با سایتی آشنا شدم. که به راحتی به شما کمک میکنه که روی قسمتی از تصویر لینک بذارید. مثلاً بخشی از تصویر را به صورت چند ضلعی یا دایره یا مستظیل انتخاب بکنید و روی همان بخش از تصویر که انتخاب کردید لینک قرار بدید.

به این آدرس بروید:

http://www.maschek.hu/imagemap/imgmap

و فایل تصویر را انتخاب کنید و دکمه ی upload را بزنید بعد از آپلود ، دکمه ی سبز رنگ accept را بزنید. می توانید از مثالی که خود سایت قرار داده یا لینک تصویر هم استفاده کنید.

برای انتخاب قسمت مورد نظر هم سه تا گزینه هست : مستطیل ، دایره و چند ضلعی.

بعد مثلاً دایره را انتخاب می کنید و بخشی از تصویر را با ماوس انتخاب می کنید.

در قسمت Href هم آدرس مورد نظر . alt و target را هم اگه html کار کرده باشید می دونید چی بذارید.

کدهای ما به شکل زیر در میاد:

<img src ="http://s5.picofile.com/file/8111390892/ravandi.gif"  alt="راوندی" usemap="#imgmap20142185043">

<map id="imgmap20142185043" name="imgmap20142185043">

<area shape="circle" alt="راوندی" title="" coords="54,51,10" href="http://barnamenevisi.blogsky.com" target="_blank" />

<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -->

</map>

خط اول را سایت تولید نکرد من بهش اضافه کردم.


راوندی راوندی


حالا اگه روی چشم کاریکاتور من کلیک بکنید وبلاگ برنامه نویسی براتون باز میشه.

image ready این خوبی را داشت که میشد به غیر از دایره و چند ضلعی از خط هم استفاده کرد.

این سایت رو خودتون هم می تونید با کمک php و جاوا اسکریپت بسازید.

موفق باشید.

نظرات 1 + ارسال نظر
sahar یکشنبه 10 بهمن‌ماه سال 1395 ساعت 03:03 ب.ظ

سلام
ببخشید میخواستم بدونم وقتی این لینکها رو روی تصویر کذاشتم چطور سیوش کنم؟
ممنونم

تصویر که همون تصویر هست و تغییری نمیکنه شما فقط کدها را که بهت میده باید کپی کنی و استفاده کنی.

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