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

سلام و خسته نباشید
من می خواستم بدونم میشه به یه تصویر چند لینک داد؟ مثلا یه عکس را به 4 تکه تقسیم کرد و به هر کدوم یه لینک داد؟
من یه عکس ضمیمه کردم می خوام به هر قسمت این دایره یه لینک بدم به نظرتون بهترین راه چی هست؟
با تشکر

ضمیمه 108748

فک کنم با js بشه
با html فک نکنم بشه...

سلام .

بله میشه.


بهترین مثال به نظرم همینه
http://www.w3schools.com/tags/att_img_usemap.asp

واقعا ممنون دقیقا همین کد مد نظرم بود
فقط میشه یه توضیحی بدید باید چه جوری اندازه ها را بهش بدم - الان تو مثالی که خودش زده بهش یه اندازه هایی داده ولی مثلا من بخوام هر بخش این دایره ای که عکسش را بالا گذاشتم یه لینک بده باید چه جور محاسبه کنم و عدد بدم
مر30

براي دادن اندازه بايدازاين كداستفاده كني

کد HTML:

---

<area shape="rect"coords="10,10,10,10" href="a.html">

---

areaيك ‏پيوندقابل كليك درون نقشه هست
shapeناحيه اي هست كه قابل كليدكردن هست كه شامل ‏rect,poly,circle‏ هست يعني دايره,مربع وچندضلعي ‏.
Coords هم مقدارابعادكه بايدبه لينك داده بشه.

چه جالب این نمیدونستم :لبخندساده:

میشه یه زحمت بکشید یه تکه از این دایره را برام کدش را بدید من متوجه بشم بقیه قسمت هاش را خودم درست کنم؟
مر30

نقل قول:

---

نوشته شده توسط abcgraph

میشه یه زحمت بکشید یه تکه از این دایره را برام کدش را بدید من متوجه بشم بقیه قسمت هاش را خودم درست کنم؟
مر30

---

کار سختی نیست یک نمونه کامل برات قرارمیدم

<map name="map1">

                      <!--    left  , top , right , bottom     --> 

    <area shape="rect" coords="   0,     0,    100   ,  100"     href="#" title="لینک اول"> 

    <area shape="rect" coords="100,0,200,100"   href="#" title="لینک دوم"> 

    <area shape="rect" coords="200,0,300,100"   href="#" title="لینک سوم"> 

    <area shape="rect" coords="300,0,400,100"   href="#" title="لینک چهارم"> 

    <area shape="rect" coords="400,0,500,100"   href="#" title="لینک پنجم">

    <area shape="rect" coords="500,0,600,100"   href="#" title="لینک ششم">        

</map> 



<div align="center">

    <img src="pic.jpg" width="600" height="100" border="1" usemap="#map1" />

</div>

اینجابرای مربع استفاده شده چونکه شکل شما اضلاع برابری نداره شمابایداز poly بجای rect استفاده کنید برای راحتتر متوجه شدن یک تصویر 600پیکسل استفاده شده که به 6 قسمت تقسیم شده برای 6 پیوندداخل کامنت هم نحوه دادن ابعاد راخواهی دید.

سلام

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

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

کد HTML:

---

<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="پایین , راست,بالا ,چپ"

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

کد HTML:

---


 <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) شعاع دایره را اعمال میکنید.


موفق باشید



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

راستی یادم رفت بگم که برید توی این سایت

http://www.image-maps.com

سلام
من از تگ area برای مشخص کردن بخش هایی از یک عکس استفاده میکنم
حالا من میخوام به هر area یک استایلی بدم یعنی وقتی که hover میشه یک border به خودش بگیره این کار رو چطور انجام بدم چون هیچ کدوم از استایل های css روی area کار نمیکنه ؟

نقل قول:

---

نوشته شده توسط paytakht2019

سلام
من از تگ area برای مشخص کردن بخش هایی از یک عکس استفاده میکنم
حالا من میخوام به هر area یک استایلی بدم یعنی وقتی که hover میشه یک border به خودش بگیره این کار رو چطور انجام بدم چون هیچ کدوم از استایل های css روی area کار نمیکنه ؟

---

متاسفانه برای این کار راه حل مستقیمی وجود نداره.
ولی در حین جستجو به این لینک برخوردم: http://www.netzgesta.de/mapper/

تشکر از راهنمایی مشکل حل شد.
از یک فایل jquery اماده استفاده کردم . که برای استایل دادن به area طراحی شده بود.