سبد (0)

تبلیغات

تصاویر در HTML

مثال (تصاویر در HTML)

Norwegian Mountain TripPulpit Rock

خودتان امتحان کنید »

مثال - خودتان امتحان کنید

Wiki

Insert images
نحوه درج تصویر در سند HTML.

Insert images from different locations
نحوه درج تصویر از پوشه ای دیگر یا از سروری دیگر.

(شما می توانید مثال های بیشتری را در پایین این صفحه مشاهده کنید.)


تگ <img> و خصوصیت Src

Wiki

در HTML، تصاویر به وسیله تگ <img> تعریف می شوند.

تگ <img> خالی می باشد(یک عنصر تهی می باشد)، به این معنی که این تگ تنها حاوی خصوصیت ها می شود و تگ بسته ای ندارد.

برای نمایش تصویر در صفحه وب، به خصوصیت src نیاز دارید. src مخفف کلمه source می باشد. مقدار این خصوصیت آدرس URL تصویری است که می خواهید نمایش داده شود. 

فرم نوشتاری تگ img

<img src="/url" alt="some_text"/>

URL اشاره دارد به مکانی که تصویر در آن ذخیره شده است. یک تصویر با نام boat.gif، در پوشه images در سایت beyamooz.com واقع شده که دارای URl به این صورت http://beyamooz.com/images/boat.gif می باشد.

مرورگر تصویری را که در تگ <img> وجود دارد را نشان می دهد. اگر شما تگ تصویر را بین دو پاراگراف قرار دهید، مرورگر ابتدا پاراگراف اول را نشان می دهد، سپس عکس و بعد از آن پاراگراف دوم را می آورد.


خصوصیت ALT

Wiki

خصوصیت alt یک alternate text یا "متن جایگزین" را برای یک تصویر مشخص می کند، که اگر عکس نمایش داده نشود آن متن نمایش داده می شود.

ذکر خصوصیت alt الزامی است و بدون آن صفحه وب، استاندارد نخواهد بود.

<img src="/boat.gif" alt="Big Boat" />

اگر کاربری به دلایلی (مثل کند بودن اتصال، خطایی در خصوصیت scr رخ دهد یا اگر کاربر از یک screen reader استفاده کند) نتواند عکس را مشاهده کند، خصوصیت alt اطلاعاتی در مورد عکس ارائه می دهد.


تنظیم طول و عرض یک عکس

Wiki

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

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

<img src="/pulpit.jpg" alt="Pulpit rock" width="304" height="228" />

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


نکات اساسی و مفید

Wiki

نکته: اگر یک فایل HTML حاوی ده تصویر باشد، یازده فایل (شامل 10 فایل تصویر و فایل HTML صفحه) برای نمایش صحیح صفحه نیاز می باشد. بارگذاری تصاویر زمان بر است، بنابراین پیشنهاد ما این است که: از تصاویر، با دقت استفاده کنید.

نکته: هنگامی که یک صفحه وب بارگذاری می شود، این مرورگر است که در آن لحظه، تصویر را از سرور دریافت می کند و آن را در صفحه درج می کند. بنابراین، مطمئن شوید که تصاویر به طور دقیق در همان نقطه نسبت به صفحه وب قرار گرفته باشند، در غیر این صورت کاربر عکس را نمی بیند و به جای آن یک آیکن با علامت ضربدر می بیند که نشان دهنده آن است که عکسی برای نمایش پیدا نشده است.


مثال - خودتان امتحان کنید

Wiki

Aligning images
نحوه تراز کردن تصویر در یک متن.

Let the image float
چگونه اجازه دهیم یک تصویر در سمت چپ یا راست یک پارگراف قرار گیرد.

Make a hyperlink of an image
چگونه از یک تصویر به عنوان لینک استفاده کنیم.

Create an image map
چگونه یک image map با ناحیه بندی متفاوت ایجاد کنیم که با کلیک روی هر ناحیه یک لینک اجرا شود.


تگ های تصویر

Tag Description
<img />

تعریف یک تصویر

<map>

تعریف یک image map

<area />

تعریف ناحیه ای به صورت لینک در یک image-map

دیدگاه‌ها  

+1 # matin60 1397-05-01 12:45
چگونه یک image map با ناحیه بندی متفاوت ایجاد کنیم که با کلیک روی هر ناحیه یک لینک اجرا شود.
برای ناحیه بندی نرم افزار مخصوص داریم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # rezapo 1397-04-21 02:27
سلام خسته نباشید در قسمت خودتان امتحان کنید . به جای دراز نوشته شده تراز
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-2 # شهربانو دوستی 1397-04-24 13:37
سلام وقت بخیر

تراز بندی تصاویر یعنی تعیین و تنظیم موقعیت تصاویر

که کلمه درست تراز هست. ممنون از دقت نظرتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # جوادرنجبر 1397-03-20 17:26
سلام چه طور یک عکس را از خود فولدر توی یک درایو کامپیوتر آدرس دهی کنیم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # نفیسه بختیاری 1396-05-28 19:29
سلام
اگه بخوایم چند تا تصویر در یک خط قرار بدهیم که به هم نچسبد باید چی کنیم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # مارسل 1396-03-02 04:08
سلام ممنون از سایت خوبتون .
واقعا خسته نباشید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # pdf 1395-08-27 12:01
ممنون آموزش هاتون عالی است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهدی دلاور 1395-07-11 21:26
سلام.

تفاوت بین HTML 4.01 و HTML5
خصوصیت های: align ،border ،hspace ،longdesc و vspace در HTML5 پشتیبانی نمی شود.

با اینکه align در html5 حذف شده چه طور هنوز اجرا میشن؟ آیا کلیه دستورات حذف شده html4 به همین صورت قابل اجرا هستند؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1395-07-14 08:21
با سلام.
در HTML5 تگ‌های جدیدی اضافه شده که تا حدودی به صفحات وب ساختار و معنی خاصی می‌بخشه. البته تفاوت تنها در این تگ‌ها نیست.
در مورد خصوصیت‌ها معمولا بعضی از آنها با آمدن ورژن جدید، منسوخ میشن و استفاده‌کردن از آنها دیگه نباید صورت بگیره، ولی چون باید در نسخه‌های قبلی درست اجرا بشن، اون موارد رو اجرا میکنن.

مثلا تگ align در table و ... که همگی باید توسط css و استایل به این تگ‌ها اعمال بشه و به کاربردن خصوصیت دیگه رایج نیست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهدی دلاور 1395-07-15 13:59
با این حساب ، وقتی html5 باشه دیگه دلیلی نداره که ما از نسخه های قبل تر اسفاده کنیم و به طور اتوماتیک نیازی هم به استفاده از تگ ها و ویژگی های نسخه قبلی نداریم. پس فکر نکنم نیازی هم به یادگیری دستورات منسوخ شده داشته باشیم. به جز اینکه:
1-بخواییم فقط اطلاعاتی در موردشون داشته باشیم یا اینکه
2-سایتی رو که با نسخه قبلی html نوشته شده باشه رو تغییر بدیم.

آیا دلایل بیشتری هم برای یادگیری موارد منسوخ شده وجود داره یا نه؟ چون میخوام سریعتر برم جلو و نمیخوام وقتم صرف جزئیات کمتر ضروری صرف بشه سوال میکنم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1395-07-15 17:23
بله. درست می‌فرمایید.
البته بعضی مواقع یادگیری نسخه‌ی قدیمی یک زبان نیاز میشه و نمیشه گفت همیشه بی‌نیاز خواهیم بود.
ولی اصولا هر نسخه‌ی جدید با خودش امکاناتی میاره که بعضی از موارد نسخه‌ی قبل رو عملا بی‌کاربرد میکنه.

مثلا چند سال پیش خوب یادم هست که چینش سایت توسط تگ table انجام میشد و خبری از استایل و css به این گستردگی نبود. سورس هر سایتی رو که باز می‌کردی دیزاین و اسکلت توسط تگ table چیده میشد، ولی الآن اصلا اینطور نیست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # حسین زارعی 1395-07-08 10:44
سلام ببخشید میخواستم بدونم چطور باید موقعیت عکس رو برای ایجاد لینک قسمتی از عکس به دست بیارم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # شهربانو دوستی 1395-07-13 16:23
سلام با استفاده از نرم افزار فتوشاپ موعیت نقطه مورد نظر در تصویر رو به دست بیارید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # محمد صادق 1395-05-04 15:56
با سلام ببخشید میخواستم بدونم چجوری میتونم این اندازه های عکس رو بدونم یعنی با چه نرم افزاری گر افتادم نمیدونم لطفا به جیمیلم ایمیلش کنین من یادم میره بخونمش.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # شهربانو دوستی 1395-07-13 16:25
با استفاده از فتوشاپ می تونید اندازه یه عکس رو بدست بیارید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # AMIRREZA79 1395-04-27 15:48
با سلام
ی سؤال داشتم من یک عکس در وب سایتم گذاشتم با توجه به معلوماتی که از وبسایت شما کسب کردم در قسمت تگ ها و کد نویسی هاش هیچ نقصی وجود نداشت اما نمیدونم چرا عکسی که گذاشتم تو وب سایتم لود نمیشه (وب سایتم رو هاست نیست)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # شهربانو دوستی 1395-07-13 16:24
سلام به احتمال زیاد ادرس عکس رو درست وارد نکردید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # roholah 1394-12-05 17:44
با سلام
میخواستم بدونم چطور باید تصاویر اسلاید وبلاگمو عوض کنم؟؟


با تشکر از زحماتتون و مطالب سایت بسیار خوبتون که تازه باهاش آشنا شدم...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-12-12 14:30
با سلام و تشکر
باید کدهای اسلایدر رو دید و اینکه وبلاگ شما این چنین قابلیتو رو داره یا نه.
سوالتون کلی هست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # toyota 1394-10-22 11:18
سلام با تشکر از سایت مفیدتون.
بنده برای قرار دادن یک تصویر در کنار صفحه سمت چپ باید چه کدی را وارد کنم و
لطفا راهنمایی نمایید که مختصات قسمت های مختلف را چگونه وارد کنم وکدهای مربوطه به این موضوع چه کد هایی میباشند.
خیلی ممنون
با تشکر از زحمات شما
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-12-12 14:34
با سلام.
سوالتون کمی گنگ هست. برای قراردادن تصویر میتونید از تگ img یا از خصوصیت background-imag e از طریق css استفاده کنید. موقعیت تصویر رو هم میتونید از طریق css تعیین کنید.
کد زیر در CSS باعث ایجاد تصویر در گوشه سمت چپ پایین مرورگر خواهد شد.
.divImg{
left:0;
bottom:0;
position:fixed;
background-imag e: url("/image.jpg");
background-repeat: no-repeat;
height:200px;
width:200px;
}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # yaser 1394-09-11 19:31
سلام خسته نباشید
در مورد این کد های یه توصیح بفرمائید
area shape="rect" coords="0,0,82, 126"
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1394-09-12 18:03
سلام . وقتی می خواهیم یک ناحیه را مشخص کنیم، اول باید مشخص کنیم که شکل اون ناحیه چطوری باشه. مثلا عبارت "shape="rect مشخص می کنه که ناحیه ی مورد نظر باید به صورت مستطیل باشه. خب برای در نظر گرفتن یک محدوده به شکل مستطیل، نیاز داریم تا 2 تا نقطه رو مشخص کنیم که دو راس مستطیل رو تشکیل بدهند. که در اینجا با استفاده از خصوصیت coords این کار انجام میشه و 4 عدد که به صورت x1,y1,x2,y2 هستند رو مشخص می کنیم. حالا به فرض اگه بخواهیم ناحیه مورد نظر دایره ای باشد، باید از "shape="circle استفاده کنیم. و همچنین باید مختصات مرکز دایره و شعاع دایره رو مشخص کنیم. که به صورت x,y,radius مشخص میشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # شهربانو دوستی 1394-06-27 14:36
با سلام
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # behnam1 1394-06-27 14:19
باسلام من تصاویرو خودم میبینم ولی وقتی ارسالش میکنم دیده نمیشه چکار باید انجام داد تصاویر تو پ۳۰ سییو هست
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # شهربانو دوستی 1394-06-27 14:37
با سلام
برای مشاده تصویر در صفحه وب بایستی ادرس تصویر را به درستی وارد نمایید. در صورتی که سند html و تصویر مورد نظر در یک مکان قرار داشته باشند تنها نام تصویر در جلوی خاصیت src کافی است. ولی در صورتی که تصویر و فایل در یک مکان نیستند ادرس تصویر باید به طور کامل ذکر شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # amin.z 1394-05-19 17:54
مثال اخر را متوجه نمی شوم لطفا توضیح بیشتری بدهید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1394-05-19 19:31
در مثال آخر یعنی http://beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_areamap یک تصویر با نواحی قابل کلیک داریم ...
برای اینکه با این مثال بخوبی آشنا شوید، ابتدا باید عنصر map و area که لینک آن در انتهای مطلب بالا آمده است را مطالعه فرمایید. اگر باز متوجه نشدید، بفرمایید تا توضیحات بیشتری ارائه شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # sdd 1394-05-09 16:27
سلام به چه شکل می شود عکس را در کنار عنوان سایت قرار داد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1394-05-10 13:57
سلام
ابتدا باید عکس مورد نظر را با پسوند ico. ایجاد کنید و بعد اون رو در قسمت head لینک کنید .بعنوان مثال می توانید از سایت http://www.favicon.cc/ استفاده کنید. و سپس به صورت زیر عمل کنید:
<link rel="shortcut icon" href="/http://m atrice.ir/templ ates/protostar/ favicon.ico" />
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+9 # کامران 2 1394-03-25 20:31
خواهشی از کاربران
در اینکه این سایت در نوع خودش اول است و مطمئنا در آینده ای نزدیک بدون هیچ رغیبی،رتبه اول را به خود اختصاص میدهد. نیاز به زمان است. از شما کاربر محترم ، خواهش دارم که اگر میخواهید تشکر و .. از این کار بسیار ارزشمند نمایید، در پایان و به همراه سوالات انجام دهید.این که یک نظر ثبت نمایید و تنها به عنوان یک تشکر،از ارزش فنی بخش نظرات کاسته میشود
برای اون دسته از کسانی که اشاره میکنند که مثلا ، آقا این مطالب که دز w3 و .. هست و از این طور صحبت ها،باید بگویم که اتفاقا مهم همین ایده و طرحه است. یعنی طراحی یک سایت و وب را در هر حوزه ای،هر کسی میتواند انجام دهد.مهم و ارزشمند همان ایده است خیلی ها آمدن و آموزش برنامه نویسی را با گذاشتن کلاس های آموزشی و دیگری با ارائه سی دی های آموزشی و در حوزه خدمات رایگان هم ،سعی بر گام به گام و .. . اما یک نفر به فکرش رسید که با ترجمه بهترین منابع آموزشی دنیا .. و این ایده و طرح قابل ستایش است
چرا که بیشتر کاربران در ترجمه ضعف دارند. حساسیت را کنار بگذارید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # کامران 2 1394-03-25 03:54
سلام

میشه خواهش کنم که برای مثال بالا در قسمت "نحوه تراز کردن تصویر در یک متن." یعنی همان "Aligning images" یک مثال برای تمام حالات در مثال ، یک مثال دیگر قرار دهید که با سی اس اس باشد و یا به گونه ای که در اچ تی ام ال 5 منسوخ نشده باشد
لطفا به صورت توضیح پاسخ ندهید و مانند همان مثال ، یک مثال کامل قرار دهید
قبلا برای وسط کردن عکس و ... در نظرات اشاره کرده اید، اما میشود خواهش کنم که برای تمام حالات در همان مثال ذکر شده، یک مثال به همان شکل در سایت قرار دهید و یا اگر وجود دارد، لینک آن را قرار دهید

با تشکر از سایت بسیار بسیار خوبتان
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1394-03-25 08:45
سلام
شما می توانید به جای خصوصیت align از دستور سی اس اس vertical-align استفاده کنید.
برای آموزش بیشتر می توانید به لینک زیر مراجعه نمایید:
www.beyamooz.com/cssref/227-css-properties/880-vertical-align
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # کامران 2 1394-03-25 19:49
سلام

ممنون از پاسخگویی سریع شما و سایت بروزتان

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

بسیار بسیار از سایت خوبتان تشکر میکنم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1394-03-26 00:19
ما کد مورد نظر شما رو در آدرس زیر ایجاد کرده ایم. لطفا پس از مطالعه ی این کد، اگر سوالی باقی موند در همینجا منتظر سوالات شما دوست گرامی هستیم :
codepen.io/sbaloot/pen/qdXmoW

به طور خلاصه روند کار به صورت زیر است:
1. ابتدا یک div که در بر دارنده ی تمامی عناصر است ایجاد می کنیم.
2. عکس مورد نظر را با استفاده از تگ img وارد می کنیم.
3.عکس مورد نظر را در یک div که آی دی آن برابر با image است قرار می دهیم.
4.در درون div دربردارنده، یک پاراگراف با آی دی text ایجاد می کنیم.

بعد از این، با استفاده از css مراحل زیر را انجام می دهیم:
1.عرض container را به طور دلخواه برابر با 500 پیکسل قرار می دهیم.
2.عکس را با استفاده از float به سمت راست شناور می کنیم.
3.متن مورد نظر را با استفاده از دستور text-align به سمت راست منتقل می کنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # کامران 2 1394-03-13 01:48
سلام

برای وسط قراردادن یک متن، اشاره کردید که از تگ center استفاده نکنیم و از استایل دهی css استفاده شود
حال برای وسط قرار داده عنصری مانند عکس باید چه کرد؟ باز هم از استفاده نماییم
لطفا با مثال توضیح دهید
ضمن اینکه اگر میشود در این باره کمی جامع توضیح دهید. یعنی برای وسط قرار دادن هر عنصری ، مثلا یک کد جاوااسکریپت و ....
تشکر میکنم از سایت بسیار خوبتان
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1394-03-13 15:18
برای وسط قرار دادن متن و عکس، می توانید به آخر این کامنت ها مراجعه کنید. سپس در کامنت یکی مانده به آخر جواب خودتون رو مطالعه کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # علیرضا62 1394-01-28 14:31
سلام
درمورد مختصات عکس ها بیشتر توضیح بدین من هیچی نفهمیدم اون اعدادو از کجا باید پیدا کنم
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # حسین ناظمیان 1394-01-05 00:43
با سلام
اگه دوتا تصویر داشتیم و خواستیم یکی از اونا مپ باشه چطور تعیین کنیم کدام تصویر مپ باشه؟
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1394-01-05 11:56
سلام
همان طور که می دانید از ویژگی usemap در تگ img استفاده می شود تا به مرورگر بفهمانیم که از کدام map استفاده کند، بنابراین برای یکی از دو تصویری که دارید، ویزگی usemap را تنظیم نمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # حسین ناظمیان 1394-01-05 00:24
سلام
در مثال http://beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_image_align درون align چه چیزی بنویسیم تا شکلک بیاد وسط صفحه؟
تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1394-01-05 11:51
سلام
برای قرار دادن تصاویر در وسط صفحه نمی توان از ویژگی align استفاده کرد...!
همان طور که می دانید تگ img یک عنصر inline است، یعنی به اندازه محتوایی که دارد طول یک سطر را اشغال می کند ...! بنابراین اگر خصوصیت CSS زیر را روی آن اعمال کنیم، وسط چین نخواهد شد ...!text-align:center; اما راه حل این است که تگ img را درون یک عنصر از نوع block مانند p یا div قرار داده و سپس خصوصیت ذکر شده در بالا را روی p یا div تنظیم نماییم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # lili 1393-12-23 18:26
سلام، ممنون از سایت خوبتون
من متوجه نشدم در مثال آخر(Create an image map) مختصات سیاره های کوچک رو چطور محاسبه کردین!!!
ممنون میشم راهنمایی کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مظاهر نصوحی 1393-12-24 11:00
<map name="planetmap ">
<area shape="rect" coords="0,0,82, 126" alt="Sun" href="/sun.htm"& gt;
<area shape="circle" coords="90,58,3 " alt="Mercury" href="/mercur.ht m">
<area shape="circle" coords="124,58, 8" alt="Venus" href="/venus.htm">
</map>


توجه بفرمایید که مختصات سه سیاره را بوسیله ی تگ area مشخص می کنیم. یکی را به صورت مستطیل "rect" و مابقی را به صورت دایره یا "circle" مشخص کرده ایم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # محمد 1394-05-31 23:15
ممنون از پاسخ ولی اصلا جواب سوال رو ندادید. هر کدوم از coords ها یک عدد بله متوجه شدیم برای دایره دو عدد اول صفر هستند. اعداد بعدی رو چگونه بدست میارید؟ برای مستطیل چطور؟ برنامه خاصی وجود داره؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # شهربانو دوستی 1394-06-03 08:38
برای اشیاء rect یا مربع مستطیلی شکل، از چهار عدد به عنوان گوشه چپ - بالا و راست - پائین استفاده می شود، در واقع شما میزان فاصله سمت چپ و بالای تصویر و همچنین سمت راست و پائین تصویر را برای قابل کلیک بودن تعریف می کنید.

برای اشیاء چندگانه یا poly باید از 6 مقدار استفاده کنید، این مقادیر موقعیت محل قابل کلیک شدن را نشان می دهند.

نهایتا برای اشیاء دایره ای شکل یا circle کافی است دو مقدار را تعیین کنید، البته برای تعیین انحراف از مرکز دایره، مقدار سومی نیز می توان تنظیم کرد که به فرض دایره را به شکل بیضی تبدیل می کند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # محمد 1394-05-31 23:11
آقا هرچی شما جواب سوال رو ندادید. coords رو از کجا آوردین؟ دایره و بقیه که مهم نیست برادر من
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # شهربانو دوستی 1394-06-03 08:42
با سلام
ویژگی coords در تگ area استفاده می شود و مختصات یک ناحیه را در image-map مشخص می کند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # lili 1393-12-24 11:36
بله، این موضوع رو متوجه شدم، منظورم قسمت coords="0,0,82, 126" و coords="90,58,3 " و coords="124,58, 8" هستش.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1394-01-05 11:44
برای اطلاع دوستان، ویژگی coords در تگ area استفاده می شود و مختصات یک ناحیه را در image-map مشخص می کند.
و اما جواب شما دوست عزیز
همان طور که می دانید خصوصیت coords باید همراه خصوصیت shape استفاده شود. حالا با توجه به مقادیری که برای shape تنظیم می کنیم، می توان coords را تنظیم کرد:
rect: اگر shape را مستطیل در نظر بگیریم، coords باید با چهار عدد تنظیم شود. دو عدد اول مختصات نقطه اول را مشخص می کند که بترتیب فاصله از چپ و بالا است و دو عدد دوم مختصات نقطه دوم را مشخص می کند. به این ترتیب با داشتن مختصات دو نقطه، ناحیه ی مستطیل شکل ایجاد می شود.
circle: اگر shape را دایره در نظر بگیریم، coords باید با سه عدد تنظیم شود. دو عدد اول مختصات مرکز دایره را مشخص می کند که بترتیب فاصله از چپ و بالاست و عدد سوم شعاع دایره را مشخص می کند.
poly: اگر shape را یک چند ضعلی در نظر بگیریم، به این ترتیب در خصوصیت coords باید مختصات تمام گوشه ها را ذکر کنیم. اگر مختصات نقطه اول و آخر یکی نباشد، مرورگر بطور پیش فرض نقطه اول و آخر را تطابق می دهد.
توجه: مختصات گوشه بالا و سمت راست 0,0 است.
برای کسب اطلاعات بیشتر در مورد تگ تگ area به لینک زیر مرجعه کنید:
www.beyamooz.com/tags/312-html-tag/1929
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مظاهر نصوحی 1393-12-25 08:39
اگر عکس را در یک ادیتور تصویر ساده مثلاً paint باز کنید، می بینید که فضایی که خورشید گرفته از 0 پیکسل تا 82 پیکسل روی محور x و از 0 تا 126 پیکسل روی محور y می باشد. بنابراین یک مستطیل یا "rect" با این مختصات (coordinate) برای این محدوده در نظر گرفته شده است.
برای اشکال دوار ابتدا مختصات مرکز دایره را مشخص می کنیم که در این مثال برای یکی از سیارات 90,58 و برای دیگری 124,58 مشخص شده اند و سپس شعاع دایره را مشخص می کنیم که به ترتیب برای اولین دایره 3 و برای بعدی 8 پیکسل می باشد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # Ashkan Jamshidi 1393-12-16 21:05
ممنون از سایت و زحماتی که میکشید
همون اموزشها رو بیرون با هزینه هنگفت و صد البته ناقص تدریس میکنند
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # oommiidd 1393-12-10 23:40
سلام دوستان یه سول
من لوگوی خودم رو تو وبم قرار دادم اما با چه تگی اونو از سمت راست به سمت چپ بیارم؟؟؟؟؟؟
ممنون میشم کمک کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-12-11 08:16
سلام، برای جواب به این سوال باید کد HTML مربوط به لوگو را نیز قرار می دادید ...!
حالت 1: اگر لوگو داخل div است و div مذکور تمام طول سطر را اشغال کرده است، بنابراین خصوصیت زیر را روی div تنظیم کنید:text-align:right; یا خصوصیت زیر را روی لوگو تنظیم کنید:margin-right:0
2- اگر کد HTML صفحه پیچیده است، خیلی راحت خصوصیت زیر را روی لوگو تنظیم کنید:position: absolute;
top: 0;
right: 0;
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # علیرضا 1393-11-26 10:04
با سلام خصوصیت alt در خط زیر چیکار میکنه من وقتی پاکش میکنم هیچ تغییری ایجاد نمیشه؟
alt="Pulpit rock"
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مظاهر نصوحی 1393-11-26 11:08
وقتی تصویر به دلایلی لود نمیشه، در محل تصویر مقدار منتسب به این خصوصیت یعنی هر چه در ALT قرار دارد توسط مرورگر به کاربر نمایش داده می شود.
برای بررسی لینک تصویر را اشتباه درج کنید و صفحه را ملاحظه فرمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # cr7 1393-10-27 15:04
منظورم همین عنصری است که الان سمت چپ سایت شماست و در عکس من سمت راسته.همین مستطیل درازه!
اگه منظورم رو فهمیدید راهنمایی کنید
ممنون@
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-10-28 08:21
اگر احتمالاً از CMSهایی مثل جوملا و یا وردپرس استفاده می کنید، برای جابه جایی مکان ماژول ها، از قسمت مدیریت CMS براحتی قابل انجام است.
مثلاً در مدیریت جوملا، باید به منوی "مدیریت ماژول ها" برید و پس از پیدا کردن ماژول مورد نظرتون، نسبت به Positionهای قالب نصب شده، مکان ماژول رو تغییر بدید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # cr7 1393-10-26 22:07
سلام من vive sourceبعضی از قسمت های سایت ها رو میگرم و داخل قالب خود قرار میدهم!ورنگ موقعیت و...هاشون رو تغییر میدم

حالا میخواستم ببینم این کار حرومه یا نه؟
این سوال رو باید توی انجمن دینی میفرستادم اما هیچ کدام انها نمیدونند ریپ چیه!اگه شما تایید نمیکنیدممنون میشم جوابش رو به وبم بفرستید!
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-10-27 14:08
بنظرم اشکالی ندارد که برای طراحی سایت تان از دیگر سایت ها الگو بگیرید و اگر این کار را با نگاه کردن بجای کپی کردن کدهای CSS انجام دهید هیچ اشکالی ندارد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # cr7 1393-10-23 00:00
یه سوال دیگه.چطوری منوی های قالب سایتم را به سمت راست و قسمت پست هارا به سمت چپ ببرم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-10-23 08:19
قائدتاً منو و یا ماژول پست های سایتتون داخل یک div است، برای پیدا کردن div مذکور بصورت زیر عمل کنید:
1- در مرورگر فایرفاکس، سایت رو باز کنید.
2- روی منوی سایتتون راست کلیک کرده و گزینه Inspect Element را انتخاب نمایید.
3- در پایین صفحه مرورگر، پنل Inspect Element باز می شود که شامل دو قسمت است، سمت چپ، کدهای HTML صفحه را می بینید و سمت راست، کدهای CSS عنصر انتخاب شده را خواهید دید. بنابراین روی عناصر در سمت چپ حرکت کنید تا به div حاوی منو برسید.
4- حالا که div مذکور در حالت انتخاب است، سمت چپ پنل Inspect Element خصوصیت float:right را اضافه نمایید.
5- زمانی که نتیجه رضایت بخش بود، خصوصیت یا خصوصیت های اضافه شده را به فایل css قالبتون اضافه نمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # cr7 1393-10-24 10:10
ببخشید انقدر سوال میپرسم.بین سرتیتر و hr(خط جداکننده)چند تا تگ(نظر،ادامه مطلب و نویسنده )هست
چطوری این تگ ها رو جاشون رو عوض کنم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1393-10-25 16:33
خواهش می کنم ...
با CSS نمی توانید موارد ذکر شده را جابه جا کنید و باید در کد دست ببرید. در این صورت زمان آپدیت به مشکل برخواهید خورد ...! (یعنی اگر هم موفق بشید جابه جا کنید، زمان آپدیت CMS همه چیز به روز اول بر میگرده)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # cr7 1393-10-25 22:01
ممنون صادق جان
فهمیدم!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # cr7 1393-10-24 09:58
پسر دمت گرم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # cr7 1393-10-21 17:11
سلام در قسمت لینک دار کردن قسمتی از عکس این قسمت یعنی چی "usemap="#plane tmap
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1393-10-22 09:15
سلام، همان طور که میدانید در آخرین مثلا آموزش بالا، قصد داشتیم، قابل کلیک کردن قسمت هایی از عکس را با استفاده از عنصر map آموزش دهیم.
بنابراین فرض کنید یک تگ img در صفحه داریم که می خواهیم برای قابل کلیک کردن قسمت هایی از آن، آنرا ناحیه بندی کنیم، خوب برای ناحیه بندی عکس، نیاز به یک عنصر دگیر بنام map داریم، مسلماً خواهید پرسید که حالا چطوری این دوتا تگ را به هم وصل کنیم ...؟ جواب این سوال، در حقیقیت در سوالی است که شما پرسیده اید ...!
برای توضیحات بیشتر لطفاً به لینک زیر مراجعه نمایید:
http://beyamooz.com/tags/312-html-tag/2256-%D8%AA%DA%AF-map
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # cr7 1393-10-21 00:11
سلام.من این لینک رو کپی میکنم بصورت لینک میاد و درسته اما خودم مینویسم لینک نیست!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1393-10-21 07:56
سلام
برای ایجاد لینک با استفاده از تگ a چندتا چیز رو باید رعایت کنید:
1- تنظیم خصوصیت href با آدرس مورد نظرتان، اگر ویژگی href را نداشته باشد آن تنها یک نگهدارنده مکان برای یک لینک است و تنها بصورت یک متن معمولی نمایش داده می شود.
2- تگ a باید تگ پایان داشته باشد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # cr7 1393-10-20 23:56
سلام.چرا این لینک عکسش میاد اما لینک نیست!مشکل چیه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-10-21 07:23
سلام، برای ایجاد لینک با استفاده از تگ a، حتماً خصوصیت href آنرا نیز، باید مقدار دهی کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # راد 1393-10-03 13:31
سلام
میخوام از کاربر بخواهم که عکس خود را در صفحه لود کند. و آن عکس در صفحه دیده شود.
ممنون میشم اگر راهنماییم بفرمایید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-10-04 19:06
سلام، برای انجام این کار نیاز به برنامه نویسی سمت سرور دارید، بنابراین یکی از لینک های زیر را انتخاب نمایید:
1- آموزش PHP:
http://beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-php
2- آموزش ASP.NET:
http://beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-asp-net
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # sara 1393-09-16 15:42
سلام خسته نباشید لطفا بگید وقتی یک لینک عکس درست میکنیم چه طور میشه چند تا عکس در این لینک قرار بدیم یعنی زمانی روی این لینک کلیک میکنیم جند عکس داخلش باشه مثل یک آلبوم...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-09-17 08:14
سلام، برای ساخت گالری تصاویر یا همان آلبوم لطفاً به قسمت "آموزش CSS-ساخت گالری تصاویر" برید:
www.beyamooz.com/css/87-advance/298
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # روح اله - R 1393-09-16 08:34
با سلام و تشکر از زحمات شما

شما در قسمت "خصوصیت Alt" گفتید: نیز اگر موس را روی آن عکس ببریم این نوشته نمایش داده می شود!
این قاعده برای خصوصیت Alt نیست، بلکه برای خصوصیت title هست.
لطف تصحیح بفرمایید.

با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-09-16 08:43
ممنون، اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # sara 1393-09-15 15:16
من دارم اموزشهای شما رو تو فایل نوت پد که خودم ساختم تمرین میکنم ولی وقتی تو browser رندر میشه هیچ عکسی نشون نمیده راهنمایی کنید ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1393-09-16 07:37
لطفاً به این مثال توجه فرمایید، فرض کنید درحال آماده سازی سایتی با ساختار فولدر بندی زیر هستیم:
1- فولدری با نام style: در این فولدر، فایل های CSS خارجی سایت قرار دارد.
2- فولدری با نام images: همان طور که از اسم آن پیداست، شامل عکس های سایت است.
3- فولدری با نام js: شامل فایل های جاوااسکریبت است
4- فولدری با نام core: شامل فایل های برنامه نویسی شده همراه با فایل های HTML
حالا فایل core/test.html را تصور کنید که داخل آن قصد داریم یک عکس استفاده کنیم، برای آدرس دهی عکس توسط خصوصیت src، به نکات زیر توجه فرمایید:
1- فایل test.html داخل فولدر core است بنابراین برای رسیدن به فولدر images باید با استفاده از دو نقطه (..) یک گام به عقب برگردیم.
2- عکس های سایت داخل فولدر images، است بنابراین برای دسترسی به عکس ها، باید وارد فولدر images شویم.
نهایتاً خصوصیت src تگ img را بصورت زیر مقداری دهی می کنیم:
src=../images/bg.gif
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # sara 1393-09-15 15:13
سلام لطفا توضیح بدید چه جوری یک عکس را به وسط صفحه انتقال بدیم؟ ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1393-09-16 08:17
سلام، به چند روش می توان عکس را وسط چین کرد، اما قبل از بیان روش ها این بحث نیاز به یک مقدمه دارد ...!
برای ترازبندی یک عنصر، قبل از هر چیز باید مفهوم عناصر block و inline را کاملاً متوجه شده باشید.
1- عناصر block عناصری هستند که تمام طول یک سطر را به خود اختصاص می دهند، مثل div و ul و p، حالا تصور کنید بخواهیم، محتوای هر کدام از این عناصر را وسط چین کنیم، خوب براحتی با استفاده از خصوصیت text-align و مقدار center محتوی، وسط چین خواهد شد.
2- عناصر inline: عناصری هستند که طول یک سطر را تنها به اندازه ی محتوایی که دارند، اشغال می کنند، مثل عنصر img و a و span، حالا تصویر کنید با روش قبل (text-align=cen ter) بخواهیم عکس را وسط چین کنیم، خوب بنظرتان، عکس وسط چین می شود، خیر نمی شود ...! شاید دلیل وسط چین نشدن عکس را درک نکرده باشید، اجازه دهید تا بیشتر توضیح بدهم! مثال را با دقت بیشتری نگاه کنید:
گفته ایم که محتوای تگ img وسط چین شود، خوب حالا شما بگید، زمانی که تگ img به اندازه ی محتوایش، طول یک سطر را اشغال می کند، بنابراین text-align=cent er بی معنی است.
پس برای وسط چین کردن عکس چی کار کنیم ...؟ چند روش برای این کار وجود دارد:
1- عکس را داخل یک عنصر block مثل div قرار بدید و سپس text-align=cent er را روی div اعمال کنید.
2- عنصر img را block کنیم، بنحوی که تمام طول سطر را اشغال کند. با استفاده از خصوصیت display در css می توان عناصر را inline یا block کرد، نهایتاً خصوصیت CSS زیر را برای وسط چین کردن عکس تنظیم نمایید:
display:block; margin:0 auto
از استاتید محترم، اگر روش های دگیری به نظرشان می رسد، همینجا ذکر نمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # sara 1393-09-16 11:39
مرسی از div استفاده کردم حل شد ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی HTML

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی