تگ area در HTML
مثال (تگ area در HTML)
یک image-map، با نواحی قابل کلیک:
<img src="/planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="/sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="/mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="/venus.htm" alt="Venus">
</map>
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="/sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="/mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="/venus.htm" alt="Venus">
</map>
خودتان امتحان کنید »
تعریف و کاربرد تگ area در HTML
تگ <area> منطقه ای را در داخل یک image-map مشخص می کند. (image-map به تصویری گفته می شود که بعضی قسمت های آن قابلیت کلیک کردن است)
تگ <area> همیشه داخل یک تگ <map> قرار می گیرد.
نکته: صفت usemap در تگ <img> با صفت name در تگ <map> مرتبط هستند در نتیجه بین این دو تگ ارتباط برقرار می شود.
پشتیبانی مرورگرها از تگ area در HTML
عنصر | |||||
---|---|---|---|---|---|
<area> | بله | بله | بله | بله | بله |
تفاوت بین HTML 4.01 و HTML5
در HTML5 یک سری ویژگی های جدید به این تگ اضافه شده و برخی از ویژگی های HTML4.01 در HTML5 پشتیبانی نمی شود.
تفوت بین HTML و XHTML
در HTML تگ <area>، تگ پایانی ندارد .
در XHTML تگ <area> باید با تگ پایانی خاتمه یابد.
خصوصیت ها
جدید در HTML5.
خصوصیت | مقدار | توضیحات |
---|---|---|
alt | text | یک متن جایگزین (alternate) برای area مشخص می کند و همراه با صفت href به کار می رود. |
coords | coordinates | مشخص کردن مختصات در area |
download | filename | مشخص کردن منبع دانلود زمانی که کاربر روی یک لینک کلیک می کند. |
href | URL | مشخص کردن مقصد لینک برای area |
hreflang | language_code | برای لینک کردن language به سند |
media | media query | مشخص می کند مقصد لینک شده برای چه media (رسانه) یا دستگاهی بهینه است. |
nohref | value | در HTML5 پشتیبانی نمی شود. مشخص می کند که <area> هیچ لینک مرتبطی ندارد. |
rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
رابطه بین سند رایج با سند لینک شده را مشخص می کند. |
shape | default rect circle poly |
مخصوص شکل دادن به area |
target | _blank _parent _self _top framename |
مشخص می کند URL(سند لینک شده) کجا باز شود. |
type | media_type | نوع media (رسانه) لینک شده را مشخص می کند. |
ویژگی های عمومی تگ area در HTML
تگ <area> از ویژگی های عمومی در HTML پشتیبانی می کند.
رویدادهای عمومی تگ area در HTML
تگ <area> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ Area در JavaScript
- نوشته شده توسط سمیه فخری
- بازدید: 18398
دیدگاهها
سلام
من میخواستم به تگ area استایل بدم بعد از جستوجو و تلاش متوجه شدم امکان استایل دادن به تگ area وجود نداره
حالا من میخواستم یک راه حلی به هم پیشنهاد بدید که بتوانم به AREA ها استایل بدم مثلا وقتی که area در حالت hover است یک استورک 2 پیکسلی به خودش بگیره یا مثال عالی اون وب سایت روزنامه افتاب یزد است : http://aftabeyazd.ir
سلام.خسته نباشید.
من یه textarea دارم که داخلش متن وارد می کنم و می خوام پایین این textarea یک box از emoji (شکلک)ها باز بشه و من با انتخاب اون شکلک بتونم به متن اضافش کنم و کاربر متن را با شکلک ببینه اگه جوری باشه که شکلک را انتخاب کنم کاراکتر(-(..) مربوط به اون در متن درج بشه و بعد من بتونم اون رو در سمت کاربر تبدیل کنم خیلی بهتره. ممنون میشم کمکم کنید
با سلام.
تا جایی که اطلاع دارم، این حرکت با textarea شدنی نیست. اگرم هم باشه به این صورته:
برای این کار شما باید از iframe و به همراه آن از کدنویسی سمت کلاینت استفاده کنی. توضیح مفصل هست! بهتره عبارت emoji with iframe or textarea رو در گوگل سرچ کنید.
سلام خاصیت coords که نوشتین مختصاتی که روی عکس میخوایم لینک بشه رو چطوری باید انتخاب کنیم؟
ممنون .
سلام تصویر مورد نظر رو در برنامه فتوشاپ باز کنید مختصات نقاط مورد نظر رو با استفاده از این برنامه میتونید به دست بیارید . نحوه انجام کادر در فیلم اموزشی مقدماتی تا پیشرفته html ذکر شده.
سلام . با چه تگی میشه جمله رو تکرار کرد .
سلام.
لینک باز نمیشه. ولی برای تکرار نمایش یک نوشته میتونید از خاصیت بکگراند در CSS استفاده کنید.
ضمن عرض سلام و خسته نباشید و خدا قوت بابت زحماتتون برای این سایت بسیار عالی.
سوالم در مورد خصوصیت download هست که دقیقا متوجه نشدم چیکار میکنه یعنی یه تایمی برای کلیک کردن روی لینک میده؟ یا بعد از یه مدتی لینک فعال میشه؟ یا مثلا برای دانلود فایل هست که تا یه زمان مشخصی اجازه دانلود رو میده؟ یا کلا یه چیز دیگه س! دوم اینکه مقدارش رو filename قرار دادین یعنی چی؟!
سوالم سوم هم در مورد خصوصیت rel بود که هر کدوم از این حالت ها کجا استفاده میشه؟
ممنون از راهنمایی تون.
با سلام خدمت شما دوست عزیز و گرامی
در مورد سوالتون باید بگم rel ارتباط بین دو صفحه رو مشخص میکنه منظور از ارتباط این است که مثلا در یک صفحه اچ تی ام ال سندی که میخواهیم لینک شود به آن ارتباط آن از چه نوعی باشد مثلا اگر فایل css باشد ارتباط آن ازنوع stylesheet است
و در مورد خصوصیت دانلود در html5 باید بهتون بگم این خصوصیت دقیقا وقتی شما رو کدتون و توی تگ a این خصوصیت رو بذارید میتونید نام فایل رو به راحتی تغییر بدید
اگه بازم مشکلی بود من و همکارانم 24 ساعته در خدمت هستیم
با تشکر از شما و همراهیتان