آموزش نمایش تصاویر در HTML

آموزش نمایش تصاویر در HTML

عنصر img

<img src= alt= height= width= longdesc= usemap= />

عنصر درون خطی نمایش تصاویر است و صفات اصلی آن:

src:حاوی آدرس تصاویر

Alt: نوشته توصیفی تصویر. اگر مرورگر کاربر موفق به اجرای تصویر مورد نظر نشود، به جای تصویر نمایش داده می شود.

height, width: طول و عرض تصویر مورد نظر را تعین می‌ کنند.

usemap: برای تعیین نقشه مرتبط در نقشه تصویری(توضیحات در ادامه خواهد آمد)

<img width="174" height="45" alt="pic" src="pic.jpg" />

عنصر object

<object data= type= standby= height= width= >

شبیه به عنصر قبلی ست و به دلیل انعطاف بالا در نمایش کاربردی تر است. عنصری درون خطی بوده و برای قرار دادن انواع فایل ها یا قالب های مختلف در صفحات وب به کار می رود.

Data: حاوی آدرس تصویر مورد نظر است.

Type: نوع تصویر را معین می کند، مرورگر قبل از دانلود تصویر می تواند نوع فایل را بررسی می کند.

height, width: طول و عرض تصویر مورد نظر را تعیین می کنند.

standby: متنی که در هنگام دانلود تصویر نمایش داده می شود، برای مثال: تصویر در حال بارگذاری است.

نقشه تصویری

< img usemap= /> <map name= > <area href= alt= shape= coords= />

بوسیله صفت usemap از عنصر img ایجاد می گردد. کاربرد آن ایجاد لینک در نقاط مختلف یک تصویر است. فرض کنید می خواهیم تصویری از نقشه ایران در یک صفحه وب بگنجانیم، به گونه ای که کاربر بتواند با کلیک روی تصویر هر یک از استان ها به صفحه مخصوص آن استان منتقل شود. کافی ست بخش هایی که هنگام کلیک کردن بر روی آن ها فعال خواهند شد، را تعریف کنیم.

<a href="#dummy"> <img alt="Robert and Murray" width="277" height="127" src="photorcmm.jpg" usemap="#maprcmm" /> </a> </p>

<map name="maprcmm"> <area href="http://cern.web.cern.ch/CERN/Divisions/ETT/WPE/People/RobertCailli au/" shape="rect" coords="0, 0, 138, 127" /> <area href="http://www.muzmo.com/Murray/" shape="rect" coords="139, 0, 277, 127" /> </map>

map: این عنصر در هر جای سند می تواند به کار برده شود، عنصر img از طریق صفت usemap خود و تطابق مقدار آن با صفت name از عنصر map، نقشه مرتبط را شناسایی می کند. عنصر map شامل عناصری به نام area است که بخش های قابل کلیک تصویر و مقصد لینک را مشخص می کنند. هر عنصر area دارای صفت coords است که مختصات بخش مورد نظر را مشخص می کند. دیگر عنصر آن shape است که شکل هندسی بخش مورد نظر تعیین می کند.مقادیر قابل استفاده:


Default: تمام شکل را تعیین می کند.

Rect: مستطیلی شکل(minx miny maxx maxy)

circle: دایره شکل(centrex centrey radius)

poly:چند ضلعی(x1 y1 x2 y2 x3 y3)

از آنجا که ساخت نقشه های تصویری با دست و استفاده از کدنویسی طاقت فرساست و نیاز به دقت زیادی دارد می توان از نرم افزارهایی که دارای رابط گرافیکی هستند استفاده نمود، از بهترین نمون های آن می توان به adobe image ready اشاره نمود.



نظرات کاربران



عبارت امنیتی : حاصل 2 × 1 می شود :
متن پیام :