در این قسمت از فیلم آموزش HTML تگ map آموزش داده شده است ، این فیلم را می توانید از انتهای مطلب دانلود کنید یا به صورت آنلاین تماشا کنید .
تگ Map
از این تگ برای اضافه کردن لینک و یا توضیحات به قسمتی از عکس استفاده می شود . قبل از استفاده از تگ map باید تصویر خودتون رو اضافه کنید . برای مشاهده آموزش کار با تگ img کلیک کنید .
تگ Area
این تگ بین تگ آغازین و پایانی تگ map قرار می گیرد و ناحیه ای از تصویر را که می خواهیم بهش لینک بدیم یا توضیحات اضافه کنیم را مشخص می کند . مهم ترین شناسه آن Shape است که سه مقدار می پذیرد :
1 . Circle : زمانی که بخواهیم ناحیه قابل کلیک به شکل دایره باشد شناسه را برابر circle قرار می دهیم .
2 . rect : برای زمانی استفاده می شود که ناحیه انتخابی ما به صورت مستطیل باشد .
3 . poly : برای زمانی استفاده می شود که ناحیه انتخابی ما به صورت چند ضلعی باشد .
بقیه توضیحات را می توانید در فیلم آموزش html مشاهده فرمایید .
سورس کد HTML استفاده شده در فیلم :
<!DOCTYPE html> <html> <head> <title>Web30ty</title> </head> <body> <img src="1.png" usemap="#mymap" /> <map name="mymap"> <area shape="circle" coords="250 , 250 , 180" href="#" title="تصویر دایره" /> <area shape="rect" coords="20 , 10 , 181 , 121" href="#" title="مستطیل" /> <area shape="poly" coords="499 , 355 , 458 , 346 , 402 ,375 ,378 ,400 ,373 , 495 , 498 ,499 , 499 , 355" href="#" title="چند ضلعی" /> </map> </body> </html>
من میخواهم وقتی ماوس روی پلیگون مورد نظر قرار میگیره رنگ اون پلیگون از بقیه نقشه متفاوت نشون داده بشه چطور میتونم در رویداد ماوس اور و ماوس اوت این کار را انجام دهم
سلام شما باید از جاوا اسکریپت و یا جی کوئری استفاده کنید و راه های مختلفی داره ، یکی از ساده ترین راه ها اینه که یه عکس دیگه رو روی اون عکس بندازید و dispaly اون رو none قرار بدید و بعد از اینکه کاربر اون ناحیه مورد نظر رو انتخاب کرد اون یکی عکس رو نمایش بدید . یه راه دیگه هم استفاده از تگ SVG هست که یکم سخت تره .
ولی من پیشنهاد می کنم که از پلاگین هایی که هست استفاده کنید چون کار رو خیلی راحت می کنن .
عاشق لهجه شیرینتم