نمایش عکس در HTML

[P O U R I A]

فهرست مطالب:

1. تعیین طول و عرض یک عکس (اندازه عکس)، با مشخصه های width و height در HTML
2. تعیین یک عنوان برای یک عکس، با مشخصه title در HTML
3. تعیین یک متن جایگزین برای عکس، با مشخصه alt در HTML
4. استفاده از یک عکس به عنوان لینک، در HTML
5. ساخت یک نقشه تصویری (image map)، در HTML

منبع: kelidestan

 

[P O U R I A]

تعیین طول و عرض یک عکس (اندازه عکس)، با مشخصه های width و height در HTML

تعیین طول و عرض یک عکس (اندازه عکس)، با مشخصه های width و height در HTML

با استفاده از مشخصه های width و height در HTML ، می توانیم اندازه نمایش یک عکس را تعیین کنیم. باید توجه داشت، که اگر اندازه عکس، از اندازه تعیین شده کوچکتر باشد، آنگاه ممکن است که عکس با کیفیت خوبی نمایش داده نشود، بنابراین معمولا این مشخصه ها، برای کوچکتر نمایش دادن یک عکس به کار می روند.

نحوه استفاده از مشخصه های width و height در HTML ، به صورت زیر می باشد :

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]img[/B][/COLOR] [COLOR=#000066]src[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"logo.png"[/COLOR] [COLOR=#000066]width[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"50px"[/COLOR] [COLOR=#000066]height[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"60px"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

که در آن، px به معنای واحد پیکسل می باشد.

به مثال زیر توجه کنید :

[h=4]مثال :[/h]ابتدا یک بار، تصویر را به صورت معمولی نمایش می دهیم و سپس آن را با اندازه ای کوچکتر نمایش خواهیم داد :

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]img[/B][/COLOR] [COLOR=#000066]src[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"image.png"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]br[/B][/COLOR] [COLOR=#66CC66]/[/COLOR]><[COLOR=#000000][B]br[/B][/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]img[/B][/COLOR] [COLOR=#000066]src[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"image.png"[/COLOR] [COLOR=#000066]width[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"30px"[/COLOR] [COLOR=#000066]height[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"30px"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

 

[P O U R I A]

تعیین یک عنوان برای یک عکس، با مشخصه title در HTML

تعیین یک عنوان برای یک عکس، با مشخصه title در HTML

با استفاده از مشخصه title در HTML ، می توانیم یک عنوان برای عکس تعریف کنیم. منظور از عنوان، این است که هنگامی که کاربر، موس خود را بر روی عکس می برد، یک متن از پیش تعیین شده، نمایش داده شود. این متن، می تواند برای توضیح بیشتر در مورد عکس، به ما کمک کند. به مثال زیر توجه کنید :

مثال :

مشخصه title را برای یک عکس به کار می بریم، تا هنگامی که کاربر، موس خود را بر روی عکس می برد، عبارت ((باشگاه مهندسان ایران)) نمایش داده شود :

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]img[/B][/COLOR] [COLOR=#000066]src[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"image.png"[/COLOR] [COLOR=#000066]title[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"[/COLOR][/COLOR][/FONT][/FONT][/COLOR][COLOR=#ff0000]باشگاه مهندسان ایران[/COLOR][COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900][COLOR=#FF0000]"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

---

​

---

 

[P O U R I A]

تعیین یک متن جایگزین برای عکس، با مشخصه alt در HTML

تعیین یک متن جایگزین برای عکس، با مشخصه alt در HTML

با استفاده از مشخصه alt در HTML ، می توانیم یک متن جایگزین برای عکس، تعیین کنیم. منظور از متن جایگزین، این است که اگر مرورگر اینترنت، عکسی را که مشخص کرده ایم، پیدا نکرد (عکس دیگر موجود نباشد یا آدرس عکس، اشتباه تعیین شده باشد)، آنگاه این متن به جای عکس، به کاربر نمایش داده شود. مشخصه alt برای موتورهای جستجو (مثل گوگل) مهم است و تعیین متن جایگزین برای عکس ها، می تواند در بدست آوردن رتبه های بالاتر در نتایج جستجو در موتورهای جستجو، به شما کمک کند.

به مثال زیر توجه کنید :

[h=4]مثال :[/h]یک عکس را که وجود ندارد، آدرس دهی می کنیم و یک متن جایگزین، با استفاده از مشخصه alt ، برای آن در نظر می گیریم :

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]img[/B][/COLOR] [COLOR=#000066]src[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"image.png"[/COLOR] [COLOR=#000066]alt[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"www.kelidestan.com"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

مشاهده پیوست Untitled.jpg
مشاهده می کنید که چون مرورگر اینترنت، نتوانسته است عکس مورد نظر را بیابد (چنین عکسی وجود ندارد)، بنابراین متن جایگزین که توسط مشخصه alt تعیین شده را نمایش داده است.

 

[P O U R I A]

استفاده از یک عکس به عنوان لینک، در HTML

استفاده از یک عکس به عنوان لینک، در HTML

برای استفاده از یک عکس، به صورت لینک، تنها کافی است که عکس را به صورت معمولی تعریف کنیم و سپس آن را در میان تگی های شروع و پایان a قرار بدهیم (تگ a برای تعریف یک لینک به کار می رود).

به مثال زیر توجه کنید :

مثال :

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"http://www.www.www.iran-eng.ir/index.php"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]img[/B][/COLOR] [COLOR=#000066]src[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"image.png"[/COLOR] [COLOR=#000066]title[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"باشگاه مهندسان ایران"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

---

---

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

نکته :

برخی مرورگرها، هنگامی که یک عکس را به صورت لینک به کار می بریم، دور آن عکس، یک خط حاشیه نمایش می دهند. برای عدم نمایش این خط حاشیه، باید مشخصه border-width تگ img را برابر صفر قرار بدهیم (مشخصه border-width در CSS). به مثال زیر توجه کنید :

مثال :

همان مثال قبل را این بار با مشخصه border-width برابر صفر برای تگ img ، بازنویسی می کنیم (مشخصه border-width در CSS) :

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"http://www.www.www.iran-eng.ir/index.php"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]img[/B][/COLOR] [COLOR=#000066]src[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"image.png"[/COLOR] [COLOR=#000066]style[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"border-width:0px"[/COLOR] [COLOR=#000066]title[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"باشگاه مهندسان ایران"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

---

---

 

[P O U R I A]

ساخت یک نقشه تصویری (image map)، در HTML

ساخت یک نقشه تصویری (image map)، در HTML

یک نقشه تصویری (image map)، عکسی می باشد که بخش های مختلف آن، به صورت لینک هستند و ما را به صفحات مختلفی از سایت هدایت می کنند.

برای یادگیری چگونگی ساخت یک نقشه تصویری (image map)، به مثال زیر توجه کنید :

[h=4]مثال :[/h]ابتدا عکس را به طور معمولی، با تگ img ، تعریف می کنیم. تنها باید درون تگ img ، به map مورد نظرمان، ارجاع بدهیم. منظور از map ، تگ map ای هست که با یک نام، آن را مشخص کرده ایم. درون تگ map ، یک سری ناحیه تعریف می کنیم (با تگ area) و سپس برای هر ناحیه، یک صفحه مقصد مشخص شده است :

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]img[/B][/COLOR] [COLOR=#000066]src[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"image.png"[/COLOR] [COLOR=#000066]width[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"145"[/COLOR] [COLOR=#000066]height[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"60"[/COLOR] [COLOR=#000066]title[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"آموزش"[/COLOR] [COLOR=#000066]usemap[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"#map"[/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]map[/B][/COLOR] [COLOR=#000066]name[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"map"[/COLOR]>[/COLOR]
  [COLOR=#009900]<[COLOR=#000000][B]area[/B][/COLOR] [COLOR=#000066]shape[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"rect"[/COLOR] [COLOR=#000066]coords[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"0,0,60,60"[/COLOR] [COLOR=#000066]title[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"مهندسان ایران"[/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"http://www.www.www.iran-eng.ir/index.php"[/COLOR]>[/COLOR]
  [COLOR=#009900]<[COLOR=#000000][B]area[/B][/COLOR] [COLOR=#000066]shape[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"circle"[/COLOR] [COLOR=#000066]coords[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"90,30,30"[/COLOR] [COLOR=#000066]title[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"HTML آموزش"[/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"http://www.www.www.iran-eng.ir/html/index.php"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]map[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

درون هر تگ area ، باید با مشخصه shape ، تعیین کنیم که شکل ناحیه، به چه صورت باشد. در کد بالا، دو ناحیه تعریف کرده ایم، یکی به شکل مستطیل (rect مخفف rectangle ، به معنی مستطیل) می باشد و ناحیه دیگر، به شکل دایره (circle) است. دقت کنید که برای کل تصویر (درون تگ img) و همچنین برای دو ناحیه، عنوان های (title) متفاوتی مشخص کرده ایم تا با بردن موس بر روی نواحی مختلف، به راحتی بتوانید مرز آنها را تشخیص بدهید.

وقتی ناحیه را به شکل مستطیل (rect) انتخاب کنیم، باید مختصات نقاط ابتدا و انتهای ناحیه را برای مشخصه coords ، به صورت 4 عدد، مشخص کنیم. همچنین برای ناحیه به شکل دایره (circle)، باید سه عدد را برای مشخصه coords تعیین کنیم. دو عدد اول، مختصات x و y مرکز دایره می باشد و عدد سوم، اندازه شعاع دایره است.

[h=4]نتیجه :[/h]

---

---