تصاویر و پیوند(راهنمای html)

تصاویر و پیوند(راهنمای html)

9073 تعداد بازدید | دوشنبه 15 تیر ماه 1394

همانطور که گفته شد، علاوه بر متن، تصویر نیز می‌تواند در دستور مورد استفاده قرار گیرد و به عنوان پیوند منظور شود. رنگ پیوند تصویر را نیز می‌توان همانند رنگ پیوند متن در نظر گرفت. ممکن است با انتقال ماوس به تصویری که به عنوان پیوند است، علامت ماوس تغییر کند.

همانطور که گفته شد، علاوه بر متن، تصویر نیز می‌تواند در دستور <A> مورد استفاده قرار گیرد و به عنوان پیوند منظور شود. رنگ پیوند تصویر را نیز می‌توان همانند رنگ پیوند متن در نظر گرفت. ممکن است با انتقال ماوس به تصویری که به عنوان پیوند است، علامت ماوس تغییر کند. با استفاده از اسکریپتها می‌توان در دستور <A>، اندازه یا محتویات تصویر را تغییر داد و یک دکمه انیمیشن ایجاد کرد.

برنامه‌ای که با استفاده از پیوند و تصویر، یک دکمه تصویری ایجاد می‌کند. همانطور که در این برنامه می‌بینید، یک فایل تصویر به نام about.gif باید در دسترس باشد و همچنین باید به فایلی به نام about.htm ایجاد کنید که با اجزای پیوند، متنی را (هرچند ساده) نمایش دهد. تا متوجه شوید که پیوند اجرا شده است. اگر شما تصویر about.gif را ندارید می‌توانید از هر تصویری استفاده کنید. نتیجه اجرای این برنامه در شکل 4-4 آمده است.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Anchors and Images </TITLE>
</HEAD>
<BODY>
<B> Button wich a border </B> <BR>
<A HREF = "about1.htm">
<IMG SRC = "a:\about.gif" ALT = "About Button" HEIGHT = "55" WIDTH = "55">
</A>
<BR> <BR>
<B> Same button without a border </B> <BR>
<A HREF = "about.htm">
<IMG SRC = "a:\about.gif" ALT="About Button" BORDER="0" HEIGHT="55" WIDTH="55">
</A>
</BODY>
</HTML>

تشریح مثال 2-4
در حالت اول، صفت BORDER در دستور IMG مشخص نشده است، به همین دلیل دور تصویر، کادری رسم شده است و در حالت دوم، این صفت بصورت BORDER="0" مشخص شده است که موجب شد کادری به دور تصویر رسم شود. در این برنامه، یک اشکال ظریف وجود دارد و آن، یک خط کوچک آبی رنگ است که در زیر تصویر اولی رسم شده است. علتش این است که بین انتهای دستور <IMG> و </A> فاصله‌ای وجود داشته است.

نقشه‌های تصویری
در بحث قبل، تصویری را به عنوان پیوند انتخاب کردید. وقتی بر روی تصویر کلیک شد، یک مقصد به عنوان نتیجه پیوند اجرا شده است. می‌توان کاری کرد که هر ناحیه تصویر، به عنوان یک پیوند منظور شود و هرکدام به مقصدهای گوناگونی مراجعه کنند. این تصویر را نقشه تصویری گویند. به هریک از ناحیه‌های تصویر که مثل یک پیوند عمل می‌کند، نقطه حساس می‌گویند. بنابراین، نقشه تصویری، تصویری است که شامل چندین نقطه حساس است و موجب می‌شود URLهای گوناگون مورد استفاده قرار گیرند. دو دسته از نقشه‌های تصویری عبارتند از نقشه‌های تصویری کارگزار و نقشه‌های تصویری کاربر. در نقشه‌های تصویری کارگزار، از مراحل زیر پیروی می‌شود:
1.کاربر نقطه‌ای از تصویر را کلیک می‌کند.
2.مرورگر، درخواستی را به کارگزار وب می‌فرستد و URL، سند مربوط به آن ناحیه کلیک‌شده درخواست می‌کند. مختصات جایی که کلیک شد، به برنامه‌ای به نام imagemap در کارگزار ارسال می‌شود که اطلاعات دریافتی را رمزگشایی می‌کند.
3.کارگزار پس از تغییر درخواست، اطلاعاتی را ارسال می‌کند.
4.پس از دریافت پاسخ، مرورگر، URL جدید را درخواست می‌کند.
مفهوم نقشه‌های تصویری کارگزار، معایبی دارد. چون این نقشه‌ها وابسته به کارگزار هستند.، پردازش آنها چندان سریع نیست.
در نقشه‌های تصویری کاربر، تمام اطلاعات مربوط به نقش‌کردن ناحیه‌های تصویر به URL، فراهم است و در یک فایل HTML قرار دارد. این کار امتیازات زیر را دارد:
1.برای تعیین مقصد، نیاز به تماس با کارگزار نیست.
2.هنگام حرکت ماوس بر روی تصویر، URLآن نیز می‌تواند نمایش داده شود.
3.نقشه‌های تصویری بدون نیاز به کارگزار یا پشتیبانی مدیریت سیستم، قابل ایجاد هستند.
استفاده از نقشه‌های تصویری کاربر، امتیازات زیادی دارد و در ادامه به شرح آن خواهیم پرداخت. اکنون به بررسی صفات نقشه تصویری می‌پردازیم.

صفات نقشه تصویری
نقشه‌های تصویری کاربر، صفاتی دارد که با دستور <AREA> مورد استفاده قرار می‌گیرند. نقشه‌های تصویری کارگزار، به جز صفات مربوط به دستور <IMG> صفات دیگری ندارد. مهمترین صفات نقشه تصویری را در اینجا بررسی می‌کنیم.
صفت TARGET. این صفت، همچون صفت TARGET در دستور <A>، مقصد پیوند را مشخص می‌کند. مقدار آن، نام فریم یا پنجره است. بدین ترتیب، می‌توان تعیین کرد که نتیجه یک پیوند در کدام فریم ظاهر شود. دستور زیر را ببینید:
<AREA SHAPE="RECT" COORDS="0,0,50%,50%" HREF="http://www.yahoo.com" TARGET="display_frame">
این دستور، صفحه‌ای را که توسط صفت href مشخص می‌شود، در فریمی به نام "display_frame" قرار می‌دهد. اگر صفت TARGET ذکر نشود، نتیجه کار در فریم یا پنجره‌ای که سند HTML در آن قرار دارد، ظاهر می‌شود. همانند صفت TARGET مربوط به دستور <A>، می‌توان از اسامی _blank، _self، _parent و _top نیز استفاده کرد که شرح آنها گذشت.
صفت NOHREF. این صفت مشخص می‌کند که برای ناحیه مورد نظر، پیوندی وجود ندارد. یکی از دو صفت HREF یا NOHREF باید در دستور <AREA> وجود داشته باشند. دستور زیر، نمونه‌ای از کاربرد NOHREF را نشان می‌دهد:
<AREA SHAPE="circle" COORDS="150,150,81" NOHREF>
صفات ALT و TITLE. با صفت ALT می‌توان متنی را تعیین کرد تا درصورتیکه مرورگر نتوانست تصویر را به صفحه وب بیاورد آن متن را به جای آن نشان دهد. در مرورگرهای گرافیکی می‌توان از صفت TITLE استفاده کرد که همان اثر ALT را دارد. اگر از هر دو صفت استفاده شود، ALT قبل از TITLE بررسی می‌شود. برای امنیت، خوب است که از هر دو استفاده شود. یکی از معایب صفت ALT مربوط به نقشه تصویری کاربر این است که مرورگرهای غیرگرافیکی، همواره ALT را انتخاب نمی‌کنند تا صفحه دلخواه را تولید نمایند. به جای مجموعه‌ای از پیوندها، کاربر فقط پیام معمولی را مشاهده خواهد کرد.
صفت TABINDEX. در مرورگرهایی که از صفحه کلید استفاده می‌کنند، با استفاده از این صفت می‌توان تعیین کرد که کد دستور <AREA>، با چند بار فشردن TAB به یک ناحیه می‌رسد. مقادیر این صفت مثبت هستند و درصورتیکه اعداد منفی انتخاب شوند، از آنها صرفنظر خواهد شد. دستور زیر مشخص می‌کند که با اولین TAB، این ناحیه فعال شود:
<AREA SHAPE="RECT" COORDS="0,0,50%,50%" HREF="http://www.yahoo.com" TABINDEX="1">
اگر مرورگر از TABINDEX پشتیبانی نکند، ترتیب پیوندها همان ترتیبی است که در صفحه نمایش ظاهر می‌شوند.

مقالات مرتبط به طراحی سایت :

تنظیم تصویر در صفحه وب (راهنمای html)
چند رسانه ای در وب ( راهنمای html)
خواص لیستها(راهنمای html)
خواص فاصله گذاری(راهنمای html)
خواص مرز کادرها (راهنمای html)
خواص شیوه نامه ها (راهنمای html)
شیوه نامه ها (راهنمای html)
اسکریپت و نقشه های تصویری(راهنمای html)
ایجاد نقشه تصویری کاربر(راهنمای html)
تصاویر و پیوند(راهنمای html)
قرار دادن تصویر در صفحه وب(راهنمای html)
پیوند در HTML (راهنمای جامع html)