قراردادن چند لینک به یک تصویر

[asghar2008]

سلام

شما عکس رو به 8 قسمت مساوی تقسم کردین . من به 5 تاش لینک دادم اون 3 تای دیگه رو خودت سعی کن کدشو بنویسی.

برای اینکه کامل متوجه بشی من یکی از لینک هارو بهت توضیح میدم .

<area shape="poly" coords="249,2,422,72,251,245," href="http://www.google.com/" alt="google" title="google"   />

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

در ابتدا خیلی سخت به نظر میاد اما خیلی ساده است !! اگه مختصات دادن رو بلد باشی همه چی حله !!

حالا بریم سر اصل مطلب :

با مشخصه shape شما شکل شی رو مشخص میکنید که مثلا دایره (circle) یا rect(مستطیل) ویا چند ضلعی یا چند گوشه (poly) هست

با استفاده از مشخصه coords به تصویر مختصات میدین. خوب برای مختصات دادن باید نقاط x و y رو مشخص کنید. (x افقی و y عمودی)

من برای مشخص کردن هر قسمت از تصویر ، 3 نقطه رو مشخص کردم. و اگه شما داخل این 3 نقطه کلیک کنید لینک مورد نظر باز میشه.
نقطه اول :
x=249 یعنی از سمت چپ تصویر 249
y=2 از سمت بالا 2

نقطه 2:
x=422
y=72

نقطه سوم که مرکز عکس هست که خطوط همدیگه رو قطع کردن:
x=251
y=245

شما در شی poly فقط نقاط رو مشخص میکنید و داخل این نقاط به عنوان لینک به صفحات داخلی و یا خارجی استفاده میشه !

به همین سادگی ...
---------------------------------------------------------------------------------------------------------------------------

با اجازه از اساتید میخوام بقیه اشکال رو هم یه توضیح کوچلو بدم ! (اساتید گرامی اگه اشکالی یا ایراادی تو توضیحات بود ممنون میشم بگید.)

همانطور که دوست عزیزمون در بالا گفتند اشکال ما به 3 دسته تقسیم شدند یعنی شکل ما ممکنه :

 shape="rect"



shape=" circle"



shape="poly"

مستطیل یا دایره یا چند ضلعی باشه. که ما درقسمت بالا ترسیم شکل poly رو توضیح دادیم. حالا بریم نحوه ترسیم اشکال مستطیل و دایره رو توضیح بدیم.

شکل مستطیل :

اولین کار اینه که ما با استفاده از مشخصه shape شکل شی رو rect قرار بدیم:

 shape="rect"

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

coords="پایین , راست,بالا ,چپ"

این هم یه نمونه کامل ؛ برای مشخص کردن شکل مستطیل :

 <area shape="rect"              coords="22,83,126,125"             alt="HTML Tutorial"             href="/html/index.htm"              target="_blank" />

توضیح coords کد بالا :
از چپ : 22
از بالا :83
از راست :126
از پایین:125

و اما شکل دایره :

shape="circle"

مشخصه coords دایره 3 تا مقدار داره :

coords="x,y,radius"

با استفاده از مقادیر x و y یک نقطه ای رو مشخص میکنید و از مقدار سومی (radius) شعاع دایره را اعمال میکنید.


موفق باشید



اینم از فایل ضمیمه :