این آموزش در تاریخ ۱۴۰۲/۰۶/۲۱ آپدیت شده است.
آموزش صفت Shape در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت Shape در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت Shape در HTML
صفت shape صفتی است که در کنار صفت coords درون تگ area مورد استفاده قرار میگیرد و با استفاده از آن میتوان نوع شکل یا نوع ناحیه قابل کلیک در یک نقشه تصویری را مشخص کرد.
نقشه تصویری به یک عکس / تصویر گفته میشه که نقاط مختلف قابل کلیک بروی آن عکس / تصویر وجود داشته باشه.
با ابزار آنلاین فری لرن به راحتی و فقط با چند کلیک انواع نقشه های تصویری را ایجاد نمایید، برای مشاهده ابزار لطفا اینجا کلیک نمایید.
Free-Learn
عناصری که توسط این صفت پشتیبانی می شوند
این صفت را میتوان در عناصر/تگ های زیر بکار برد.
| <area> |
Free-Learn
مثال از صفت Shape در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 |
<body> <img src="images/girls-1.jpg" usemap="#map"> <map name="map"> <area shape="rect" coords="231, 31, 287, 195" href="https://free-learn.ir/" alt="سره اسب" title="سره اسب"> </map> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت shape در HTML پشتیبانی میکنند یا خیر.
| نام صفت | Chrome | Firefox | Opera | Safari | Edge |
| shape | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این صفت در HTML بصورت زیر می باشد.
|
1 |
<area shape="default|rect|circle|poly"> |
Free-Learn
جدول مقادیر صفت Shape در HTML
در جدول زیر میتوانید، مقادیری را که میتوان در این صفت استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| default | بطور پیشفرض کل تصویر را انتخاب میکند |
| rect | برای رسم یک شکل مستطیلی |
| circle | برای رسم یک شکل دایره ای |
| poly | برای رسم یک شکل چند ضلعی |
Free-Learn
نکات و توضیحات
- در حالت عادی اگه بخواید با مختصات ( مثلا مستطیلی یا دایره ای و.. ) یه نقشه تصویری ایجاد کنید خب کمی پیچیده و اذیت کنندس چون باید دقیقا مختصات نقطه ای بهش بدید، ولی خب خیلی راحت با این ابزار آنلاین با چندین کلیک هرچی دوس داشتید طراحی کنید.
