قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
خانه / اموزش / html/css / تصاوير HTML

تصاوير HTML

تصاوير HTMLReviewed by سالار on Mar 2Rating: 5.0

تگ < img > :

از تگ < img > برای قرار دادن عکس يا تصاوير بر روی صفحه استفاده می شود . تگ < img > فقط خصوصيات را نگهداری کرده و دارای تگ پايانی نيست  ( در همان تگ ابتدايی بسته می شود ) .

نکات مهم تگ < img > :

  1. در تگ < img > با خاصيت src به مکان فايل عکسی که قرار است نمايش داده شود اشاره می کنيم . تصاوير HTML در مکانی غير از صفحه اصلی ذخيره شده و در هنگام نمايش صفحه از مبدا ، فراخوانی می شوند .
  2. با استفاده از خاصيت alt تگ < img > می توان از قبل يک متن جايگزين تعيين کرد ، که چنانچه مرورگر به هر دليلي نتوانست عکس را نمايش دهد ، به جای آن متن جايگزين را نشان دهد . اين متن در هنگام قرار گيری موس بر روی عکس در يک کادر زرد رنگ نيز نمايش داده می شود . متن جايگزين می تواند شامل توضيحی راجع به عکس اصلی باشد .

مثال : در مثال زير يک عکس به صفحه پيوند زده شده است ، برای مشاهده متن جايگزين موس را چند لحظه بر روی عکس نگه داريد :

Example
< img src =”http://www.DeveloperStudio.ir/Pic/imgexample.jpg” alt =”DeveloperStudio PICTURE” / > کد
DeveloperStudio PICTURE خروجی

 

خواص مهم تگ img
نام خاصيت نوع خاصيت شرح
align top
bottom
middle
left
right
نحوه ترازبندی عکس را نسبت به محتويات ديگر صفحه و متن دور آن را تعيين می کند ، که يکی از حالت های زير می تواند باشد :
۱) top : عکس در بالای متن و محتويات ديگر قرار می گيرد .
۲) bottom : عکس در پايين متن و محتويات ديگر قرار می گيرد .
۳) middle : عکس در وسط متن و محتويات ديگر قرار می گيرد .
۴) left : عکس در سمت چپ متن و محتويات ديگر قرار می گيرد .
۵) right : عکس در سمت راست متن و محتويات ديگر قرار می گيرد .
border pixel تعيين کننده ضخامت خط حاشيه دور عکس است .
height pixel
درصد %
ميزان ارتفاع عکس را تعيين می کند .
hspace pixel ميزان فضايی خالی در ۲ طرف راست و چپ عکس را تعيين می کند .
ismap URL
مسير فايل
تعيين کننده اين است که عکس به عنوان يک نقشه تصويری سمت سرور استفاده می شود . برای اطلاعات بيشتر به قسمت تگ < map > برويد .
longdesc URL
مسير فايل
مسير فايلی که اطلاعات کاملی راجع به عکس مورد نظر نگهداری می کند را مشخص می کند .
src URL
مسير فايل
مسير کامل فايل نگهدارنده عکس را تعيين می کند .
usemap URL
مسير فايل
تعيين کننده اين است که عکس به عنوان يک نقشه تصويری سمت کلاينت استفاده می شود . برای اطلاعات بيشتر به قسمت تگ < map > برويد .
vspace pixel ميزان فضاي خالی به دور عکس در بالا و پايين را مشخص می کند .
width pixel
درصد %
میزان عرض عکس را تعيين می کند .

تگ < area > , < map > :

ايجاد يک نقشه تصويری ( يک عکس با نواحی مختلف قابل کليک شدن ) :
از تگ < map > برای ايجاد يک نقشه تصويری استفاده می شود . يک نقشه تصويری , عکسی است که ناحيه های متفاوت آن قابل کليک کردن بوده که می توان با کليک بر روی هر قسمت به يک صفحه يا فايل ديگر پيوند بر قرار کرد .
هر تگ < area > در درون تگ < map > ، می تواند تعيين کننده يک ناحيه مجزا قابل کليک شدن باشد که با تعيين مختصات آن بر روی عکس ، آن ناحيه مشخص می شود .

نکته مهم : ما ابتدا به وسيله تگ < map > و تگ های درونی < area > يک نقشه تصويری با نواحی مختلف قابل کليک شدن ايجاد کرده ، سپس آن نقشه را به يک عکس بر روی صفحه پيوند می دهيم .
برای اين کار خاصيت usemap را در تگ < img > عکس مورد نظر برابر نام Name يا id ، نقشه تصويری ايجاد شده قرار می دهيم . برای درک بهتر به مثال دقت کنيد :

خواص مهم تگ map
نام خاصيت نوع خاصيت شرح
name
يا
id
name
نام
يک نام منحصر به فرد برای نقشه تصويری تعيين می کند .

 

خواص مهم تگ area
نام خاصيت نوع خاصيت شرح
Coords ابتدا به خاصيت shape توجه کنيد .
مشخص کننده مختصات نقاط مختلف يک چند ضلعی (مربع ، مستطيل و … ) برای تعيين ناحيه مورد نظر از عکس برای ايجاد پيوند است که دارای حالت های زير است :
rect : مربع . تعيين کننده مختصات چهار نقطه مختلف يک مربع يا مستطيل
coords =left,top,right,bottom
circ : دايره . مشخص کننده نقطه مرکز و شعاع يک دايره
coords=center X, center Y ,radius
poly : چند ضلعی . مشخص کننده مختصات انواع نقاط مختلف يک چند ضلعی
coords = X1 Y1, X2 Y2, … , Xn Yn
href URL
مسير و نام فايل
برای تعيين آدرس کامل صفحه يا فایل مقصد پيوند به کار می رود .
nohref true
false
در صورتی که مقدار آن برابر true باشد ، آن ناحيه از عکس فعال و قابل کليک کردن بوده و در صورت false بودن غير فعال است .
shape rect
rectangle
circ
circle
poly
polygon
شکل ناحيه قابل کليک شدن از يک عکس يا نقشه تصويری را تعيين می کند ، که مختصات آن توسط خاصيت coords در همين تگ مقدار دهی می شود و. انواع اشکال ممکن عبارتند از :
rect , rectangle : مربع يا مستطيل
circ , circle : دایره يا بيضی
poly , polygon : چند ضلعی
target _blank
_parent
_self
_top
نحوه باز شدن و نمايش پنجره صفحه مقصد را تعيين می کند که دارای حالت های زير است:
– blank : لينک در يک پنجره جديد باز خواهد شد .
– self : لينک در همان پنجره يا قابی که کليک شده است باز خواهد شد .
-parent : لينک در قاب اصلی يا مادر باز خواهد شد .
-top : لينک در همان پنجره ای که کليک شده است به طور کامل باز خواهد شد .

مثال : در تصوير زير برای رفتن به توضيح در مورد هر تگ ، بر روی قسمت مربوط به آن کليک کنيد :

Example
< img src=”../Pic/TagsList.jpg” alt=”learner” usemap=”#taglist” />
< map id=”taglist” >
    < area id=”table” alt=”table tag” shape=”rect” coords=”1, 2, 194, 122″ href=”HtmlTable1.aspx” />
    < area id=”body” alt=”body tag” shape=”rect” coords=”194, 0, 386, 119″ href=”basictags1.aspx” />
    < area id=”link” alt=”link tag” shape=”rect” coords=”0, 121, 193, 242″ href=”HtmlLinks2.aspx” />
< area id=”p” alt=”p tag” shape=”rect” coords=”192, 119, 386, 242″ href=”textformat1.aspx” />
< /map >
کد
learner

table tag body tag link tag p tag
خروجی

 

مطلب پیشنهادی

هر آنچه که راجع به cpanel باید بدانید ( قسمت اول )

هر آنچه که راجع به cpanel باید بدانید ( قسمت اول )Reviewed by سالار on …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

 
در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید تا بهترین پست هفته مارو در ایمیل خودتون دریافت کنید :)

تبریک ! شما عضو خبرنامه ما شدید