تبلیغات
iranexperts - مطالب ابر map tag

Map در HTML5 و HTML4

پنجشنبه 16 تیر 1390  04:23 ب.ظ    ویرایش: پنجشنبه 16 تیر 1390 05:55 ب.ظ
توسط: کاظم
نوع مطلب: HTML5 ،
ارسال به

بسیاری از وقتها شده که توی سایت می خواهیم یه عکسی رو بگذاریم و وقتی کار بر روی یکی از اشیا اون عکس   کلیک کرد وارد یه صفحه دیگه شد. عموما اینکار رو با فلش و تا حد کمی با جی کوئری انجام میشه .
خوشبختانه تکی به نام map وجود داره که کمتر استفاده میشه  بوسیله اون میشه با توجه به اشاره گر موس روی عکس یک لینک خاصی رو ارائه کرد.
به فرم نوشت map در زیر دقت کنید.

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>

ابتدا یک عکس اضافه می کنیم و خاصیت use map اونو به یک نام دلخواهی ست می کنیم
بعدش با استفاده از تک map یک map ایجاد می کنیم و در قسمت نامش همان نامی رو وارد می کنیم که در usemap وارد کرده ایم در واقع با این کار می گیم که map روی کدوم تصویر اعمال بشه

سپس نواحی یا همون area را در   map مشخص می کنیم
نحوه ایجاد area در بالا به خوبی قابل مشاهد ه هستش
بعنوان مثال در سطر اول میگیم یه مستطیل از نقطه 0 و 0  تا نقطه 82 و 126  اگر روی آن کلیک شد صفحه sun.htm رو باز کنه.
در area دوم میگیم یک دایره که مرکز آن 90 و 58 هستش و با شعاع 3 اگر کلیک شد صفحه mercur.htm را باز کنه

لینک مثالش هم  اینجا موجوده!!!!
که روی هر شی از عکس کلیک کنید اون عکس رو بصورت جداگانه میاره.





   


نظرات()   

iranexperts

آموزش جی کوئری ، html5 و CSS3

POWERED BY MIHANBLOG.COM

Design by Renato Mitra at http://Mitra.ch