تصاوير در HTML
برچسب <img> و مشخصه src
تصاوير در فايلهاي HTML توسط برچسب <img> قرار داده مي شوند. اين برچسب، يک برچسب خالي مي باشد يعني نيازي به برچسب انتهايي ندارد و فقط شامل مشخصه هاي مربوط به خود مي باشد. براي مشخص کردن تصويري که بايد در صفحه قرار بگيرد نياز به استفاده از مشخصه src (source) داريم که به وسيله آن آدرس و نام فايل معرفي مي شود.
<img src="http://www.you.com/product.gif">
اگر فايل HTML و تصوير در کنار هم قرار داشته باشند مي توانيم از <img src="product.gif"> استفاده کنيم و نيازي به ذکر کامل آدرس نيست. مرورگر تصوير را در هرجايي که از برچسب img استفاده کرده ايد قرار خواهد داد. مثلا اگر از اين برچسب بين دو پاراگراف استفاده کرده ايد مرورگر ابتدا پاراگراف اول را نمايش مي دهد سپس تصوير و در نهايت پاراگراف ديگر را نشان خواهد داد. به عنوان مثال ديگر اگر عبارت <td><img src="product.gif"></td> را در جدول به کار ببريد يکي از خانه هاي جدول شامل تصوير product.gif خواهد بود. (در مورد جداول در مبحث بعدي صحبت خواهيم کرد)
مشخصه alt
اين مشخصه براي ايجاد يک متن توصيفي بر روي تصوير به کار مي رود؛ و وقتي کاربر ماوس را روي تصوير مي برد و براي چند لحظه نگاه مي دارد، اين متن در يک کادر کوچک ديده خواهد شد مانند :
<img src="boat.gif" alt="Big Boat">
که باعث ديده شدن عبارت Big Boat در يک کادر کوچک مي شود وکاربرد اين مشخصه بيشتر وقتي است که اگر تصوير به دليل هر مشکلي در صفحه ديده نشد کاربر بداند که چه تصويري را نديده است که در اين صورت عبارت مشخصه alt به جاي تصوير ديده خواهد شد. مانند :
نکته
سعي کنيد در صفحات وبي که مي سازد فقط در صورت نياز از تصوير وعکس استفاده کنيد و از زياد کردن حجم صفحه خود بپرهيزيد چون هنگامي که کاربر در اينترنت صفحه شما را مي بيند بايد مدت زيادتري براي تکميل شدن نمايش صفحه شما صبر کند و ممکن است اين موضوع کاربر را از ديدن صفحه پشيمان کند !
تصوير پس زمينه
براي اضافه کردن تصويري به پس زمينه صفحه مي توانيد از ساختار :
<body background="background.jpg">
استفاده کنيد که به جاي background.jpg مي توانيد نام هر فايل تصويري ديگري را قرار دهيد. اگر ابعاد تصوير شما از صفحه کوچکتر باشد تصوير تا پر کردن کل صفحه تکرار خواهد شد. پس اگر تصميم داريد که تصويري به پس زمينه خود اضافه کنيد توصيه مي شود که از فايلهاي کوچکي که مي توانند مانند موزائيک در کنار هم قرار گيرند، استفاده کنيد. ضمنا در انتخاب تصوير و انتخاب رنگ متن دقت کنيد تا متن شما خوانايي خود را از دست ندهد. مثال زير در همين رابطه است.
.jpg)
مشخصه align در تصاوير
اين مشخصه طريقه تراز شدن تصاوير و متن را تعيين مي کند. مثال زير در همين رابطه است.
.jpg)
* توجه داشته باشيد که تصاوير به طور پيش فرض به صورت align="bottom" قرار خواهند گرفت.
همچنين مشخصه align مي تواند طرز قرار گرفتن يک تصوير در کنار يک پاراگراف را تعيين کند که مثلا تصوير در سمت راست پاراگراف قرار گيرد يا در سمت چپ. به مثال زير توجه کنيد.
.jpg)
تغيير ابعاد تصاوير
توسط مشخصه width و height مي توانيد ابعاد تصوير را تغيير داده و آن را بزرگتر و يا کوچکتر کنيد. فقط دقت کنيد که ابعاد را متناسب تغيير دهيد چون در غير اين صورت تصوير وضوح و زيبايي خود را از دست خواهد داد.
.jpg)
ساخت لينک بر روي قسمتي از تصوير
براي اين کار بايد از دو برچسب <map> و <area> استفاده کنيد. روش کار بدين صورت است که ناحيه هايي را مي خواهيد کاربر با کليک بر روي آن به صفحه ديگري متصل شود را توسط اشکالي مشخص مي کنيد. اين اشکال دايره، مستطيل و چند ضلعي خواهند بود که توسط مشخصه shape تعيين مي شوند.
*دايره به صورتshape="circle" معرفي مي شود و مختصات آن توسط مشخصه coords تعيين مي شود. مثلا در coords="39, 41, 32" دو عدد اول مختصات مرکز دايره و عدد سمت راست اندازه شعاع دايره مي باشد. مشخصه آشناي href که در برچسب <a> از آن استفاده کرديم، صفحه اي را که کابر با کليک بر ناحيه مشخص شده توسط شکل به آن منتقل خواهد شد را تعيين مي کند.
*مستطيل توسط shape="rect" و مختصات قطر آن مثلا توسط coords="77, 12, 112, 72" تعيين مي شود که دو عدد سمت چپ مختصات گوشه بالاي سمت چپ و دو عدد سمت راست مختصات گوشه پايين سمت راست مي باشند.
*براي استفاده از چند ضلعي بايد از shape="polygon" استفاده کنيد و اعداد دوبه دو مختصات گوشه هاي آن را تعيين مي کند : coords="146, 7, 124, 68, 193, 64, 183, 53, 184, 20".
همانطور که در مثال زير مي بينيد برچسب <map> مشخصه اي به نام name دارد که توسط آن برچسب <img> با برچسب <map> ارتباط برقرار مي کند براي ايجاد اين ارتباط بايد در برچسب <img> از مشخصه usemap استفاده کنيم که مقدار اين مشخصه نام برچسب <map> مي باشد. ضمنا نام برچسب <map> بايد همراه با علامت # به کار برده شود. مانند:
usemap="#picture"
مثال زير روش استفاده از برچسب ها و مشخصه هاي ذکر شده را مشخص خواهد کرد.
.jpg)
ساخت لينک براي تصوير
شما مي توانيد با کليک بر روي هر جاي تصوير به آدرس مورد نظر متصل شويد براي اينکار بايد از روش زير استفاده کنيد، که در اينجا مثلا با کليک بر روي تصوير buttonnext.gif به صفحه nextpage.htm خواهيد رفت.
<a href="nextpage.htm"><img src="buttonnext.gif" ></a>
ادامه دارد ......
ارسال مقاله توسط عضو محترم سايت با نام کاربري : davidfattahi
/س