تصاویر در HTML
Insert images
نحوه درج تصویر در سند HTML.
Insert images from different locations
نحوه درج تصویر از پوشه ای دیگر یا از سروری دیگر.
(شما می توانید مثال های بیشتری را در پایین این صفحه مشاهده کنید.)
تگ <img> و خصوصیت Src
در HTML، تصاویر به وسیله تگ <img> تعریف می شوند.
تگ <img> خالی می باشد(یک عنصر تهی می باشد)، به این معنی که این تگ تنها حاوی خصوصیت ها می شود و تگ بسته ای ندارد.
برای نمایش تصویر در صفحه وب، به خصوصیت src نیاز دارید. src مخفف کلمه source می باشد. مقدار این خصوصیت آدرس URL تصویری است که می خواهید نمایش داده شود.
فرم نوشتاری تگ img
URL اشاره دارد به مکانی که تصویر در آن ذخیره شده است. یک تصویر با نام boat.gif، در پوشه images در سایت beyamooz.com واقع شده که دارای URl به این صورت http://beyamooz.com/images/boat.gif می باشد.
مرورگر تصویری را که در تگ <img> وجود دارد را نشان می دهد. اگر شما تگ تصویر را بین دو پاراگراف قرار دهید، مرورگر ابتدا پاراگراف اول را نشان می دهد، سپس عکس و بعد از آن پاراگراف دوم را می آورد.
خصوصیت ALT
خصوصیت alt یک alternate text یا "متن جایگزین" را برای یک تصویر مشخص می کند، که اگر عکس نمایش داده نشود آن متن نمایش داده می شود.
ذکر خصوصیت alt الزامی است و بدون آن صفحه وب، استاندارد نخواهد بود.
اگر کاربری به دلایلی (مثل کند بودن اتصال، خطایی در خصوصیت scr رخ دهد یا اگر کاربر از یک screen reader استفاده کند) نتواند عکس را مشاهده کند، خصوصیت alt اطلاعاتی در مورد عکس ارائه می دهد.
تنظیم طول و عرض یک عکس
خصوصیت height و width برای مشخص کردن طول و عرض یک عکس استفاده می شود.
مقدار این خصوصیت ها به طور پیش فرض بر اساس پیکسل مشخص می شوند.
نکته: این کار خوبی است که خصوصیت عرض و طول یک عکس را مشخص کنید. اگر این خصوصیت ها تنظیم شوند، زمانی که صفحه در حال لود شدن است، مکان مورد نیاز برای عکس در بین دیگر عناصر صفحه رزرو شده است. بنابراین طرح صفحه در حال لود با طرح کاملاً لود شده ی صفحه، تفاوتی نخواهد داشت. اما اگر این خصوصیات را تنظیم نکنید، مرورگر نمی تواند اندازه عکس را تشخیص دهد و اگر تصویری در بین متن باشد. جای آن تا لود کامل تصویر خالی خواهد ماند.
نکات اساسی و مفید
نکته: اگر یک فایل HTML حاوی ده تصویر باشد، یازده فایل (شامل 10 فایل تصویر و فایل HTML صفحه) برای نمایش صحیح صفحه نیاز می باشد. بارگذاری تصاویر زمان بر است، بنابراین پیشنهاد ما این است که: از تصاویر، با دقت استفاده کنید.
نکته: هنگامی که یک صفحه وب بارگذاری می شود، این مرورگر است که در آن لحظه، تصویر را از سرور دریافت می کند و آن را در صفحه درج می کند. بنابراین، مطمئن شوید که تصاویر به طور دقیق در همان نقطه نسبت به صفحه وب قرار گرفته باشند، در غیر این صورت کاربر عکس را نمی بیند و به جای آن یک آیکن با علامت ضربدر می بیند که نشان دهنده آن است که عکسی برای نمایش پیدا نشده است.
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 |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 82208
دیدگاه‌ها
سلام. اندازه طول و عرض یک تصویر را چگونه بدست بیاریم؟ در مثال مربوط به تگ img اون اعداد و از کجا آوردین؟
سلام
برای بدست آوردن مختصات یک تصویر بصورت زیر عمل کنید:
1- در ویندوز، روی فایل تصویر راست کلیک کنید و Properties بگیرید و در پنجره باز شده به تب Details برید.
2- در ویندوز، موس رو روی فایل تصویر نگهدارید تا کادر جزئیات تصویر ظاهر بشه ...
3- فایل تصویر را در فتوشاپ باز کنید و از طریق منوی Image - > Image Size اندازه تصویر رو بدست بیارید.
و ...
سلام، چجوری یک عکس که روی کامپیوترم قرار داره را با تگ img در مروگر نمایش بدیم؟
سلام، مواردی که در زیر عنوان می شود جزو استانداردهای هر پروژه است:
1- برای پروژه تان یک نام در نظر بگیرید و یک فولدر با همان نام در یکی از درایوهای کامپیوترتون ایجاد کنید. (مثلا beyamooz)
2- در root اصلی فولدر پروژه، یک فولدر با نام images ایجاد کنید و تصویر مورد نظر را داخل آن قرار دهید. (مثلا myimage.jpg)
3- در root اصلی فولدر پروژه یک فایل با عنوان index.htm ایجاد کنید و محتوای زیر را در آن قرار دهید:
<html>
<body>
<img src="/images/myi mage.jpg" alt="beyamooz" />
</body>
</html>
سلام عالی بود.
چگونه یک image map با ناحیه بندی متفاوت ایجاد کنیم که با کلیک روی هر ناحیه یک لینک اجرا شود.
برای ناحیه بندی نرم افزار مخصوص داریم؟
سلام چه طور یک عکس را از خود فولدر توی یک درایو کامپیوتر آدرس دهی کنیم
سلام
اگه بخوایم چند تا تصویر در یک خط قرار بدهیم که به هم نچسبد باید چی کنیم؟
سلام
beyamooz.com/css/87-advance/298-%D8%B3%D8%A7%D8%AE%D8%AA-%DA%AF%D8%A7%D9%84%D8%B1%DB%8C-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1-%D8%AF%D8%B1-css
سلام ممنون از سایت خوبتون .
واقعا خسته نباشید.
ممنون آموزش هاتون عالی است.
سلام.
تفاوت بین HTML 4.01 و HTML5
خصوصیت های: align ،border ،hspace ،longdesc و vspace در HTML5 پشتیبانی نمی شود.
با اینکه align در html5 حذف شده چه طور هنوز اجرا میشن؟ آیا کلیه دستورات حذف شده html4 به همین صورت قابل اجرا هستند؟
با سلام.
در HTML5 تگ‌های جدیدی اضافه شده که تا حدودی به صفحات وب ساختار و معنی خاصی می‌بخشه. البته تفاوت تنها در این تگ‌ها نیست.
در مورد خصوصیت‌ها معمولا بعضی از آنها با آمدن ورژن جدید، منسوخ میشن و استفاده‌کردن از آنها دیگه نباید صورت بگیره، ولی چون باید در نسخه‌های قبلی درست اجرا بشن، اون موارد رو اجرا میکنن.
مثلا تگ align در table و ... که همگی باید توسط css و استایل به این تگ‌ها اعمال بشه و به کاربردن خصوصیت دیگه رایج نیست.
با این حساب ، وقتی html5 باشه دیگه دلیلی نداره که ما از نسخه های قبل تر اسفاده کنیم و به طور اتوماتیک نیازی هم به استفاده از تگ ها و ویژگی های نسخه قبلی نداریم. پس فکر نکنم نیازی هم به یادگیری دستورات منسوخ شده داشته باشیم. به جز اینکه:
1-بخواییم فقط اطلاعاتی در موردشون داشته باشیم یا اینکه
2-سایتی رو که با نسخه قبلی html نوشته شده باشه رو تغییر بدیم.
آیا دلایل بیشتری هم برای یادگیری موارد منسوخ شده وجود داره یا نه؟ چون میخوام سریعتر برم جلو و نمیخوام وقتم صرف جزئیات کمتر ضروری صرف بشه سوال میکنم.
بله. درست می‌فرمایید.
البته بعضی مواقع یادگیری نسخه‌ی قدیمی یک زبان نیاز میشه و نمیشه گفت همیشه بی‌نیاز خواهیم بود.
ولی اصولا هر نسخه‌ی جدید با خودش امکاناتی میاره که بعضی از موارد نسخه‌ی قبل رو عملا بی‌کاربرد میکنه.
مثلا چند سال پیش خوب یادم هست که چینش سایت توسط تگ table انجام میشد و خبری از استایل و css به این گستردگی نبود. سورس هر سایتی رو که باز می‌کردی دیزاین و اسکلت توسط تگ table چیده میشد، ولی الآن اصلا اینطور نیست.
سلام ببخشید میخواستم بدونم چطور باید موقعیت عکس رو برای ایجاد لینک قسمتی از عکس به دست بیارم.
سلام با استفاده از نرم افزار فتوشاپ موعیت نقطه مورد نظر در تصویر رو به دست بیارید.
با سلام ببخشید میخواستم بدونم چجوری میتونم این اندازه های عکس رو بدونم یعنی با چه نرم افزاری گر افتادم نمیدونم لطفا به جیمیلم ایمیلش کنین من یادم میره بخونمش.
با استفاده از فتوشاپ می تونید اندازه یه عکس رو بدست بیارید
با سلام
ی سؤال داشتم من یک عکس در وب سایتم گذاشتم با توجه به معلوماتی که از وبسایت شما کسب کردم در قسمت تگ ها و کد نویسی هاش هیچ نقصی وجود نداشت اما نمیدونم چرا عکسی که گذاشتم تو وب سایتم لود نمیشه (وب سایتم رو هاست نیست)
سلام به احتمال زیاد ادرس عکس رو درست وارد نکردید
با سلام
میخواستم بدونم چطور باید تصاویر اسلاید وبلاگمو عوض کنم؟؟
با تشکر از زحماتتون و مطالب سایت بسیار خوبتون که تازه باهاش آشنا شدم...
با سلام و تشکر
باید کدهای اسلایدر رو دید و اینکه وبلاگ شما این چنین قابلیتو رو داره یا نه.
سوالتون کلی هست.
سلام با تشکر از سایت مفیدتون.
بنده برای قرار دادن یک تصویر در کنار صفحه سمت چپ باید چه کدی را وارد کنم و
لطفا راهنمایی نمایید که مختصات قسمت های مختلف را چگونه وارد کنم وکدهای مربوطه به این موضوع چه کد هایی میباشند.
خیلی ممنون
با تشکر از زحمات شما
با سلام.
سوالتون کمی گنگ هست. برای قراردادن تصویر میتونید از تگ 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;
}
سلام خسته نباشید
در مورد این کد های یه توصیح بفرمائید
area shape="rect" coords="0,0,82, 126"
سلام . وقتی می خواهیم یک ناحیه را مشخص کنیم، اول باید مشخص کنیم که شکل اون ناحیه چطوری باشه. مثلا عبارت "shape="rect مشخص می کنه که ناحیه ی مورد نظر باید به صورت مستطیل باشه. خب برای در نظر گرفتن یک محدوده به شکل مستطیل، نیاز داریم تا 2 تا نقطه رو مشخص کنیم که دو راس مستطیل رو تشکیل بدهند. که در اینجا با استفاده از خصوصیت coords این کار انجام میشه و 4 عدد که به صورت x1,y1,x2,y2 هستند رو مشخص می کنیم. حالا به فرض اگه بخواهیم ناحیه مورد نظر دایره ای باشد، باید از "shape="circle استفاده کنیم. و همچنین باید مختصات مرکز دایره و شعاع دایره رو مشخص کنیم. که به صورت x,y,radius مشخص میشه.
با سلام
باسلام من تصاویرو خودم میبینم ولی وقتی ارسالش میکنم دیده نمیشه چکار باید انجام داد تصاویر تو پ۳۰ سییو هست
با سلام
برای مشاده تصویر در صفحه وب بایستی ادرس تصویر را به درستی وارد نمایید. در صورتی که سند html و تصویر مورد نظر در یک مکان قرار داشته باشند تنها نام تصویر در جلوی خاصیت src کافی است. ولی در صورتی که تصویر و فایل در یک مکان نیستند ادرس تصویر باید به طور کامل ذکر شود.
مثال اخر را متوجه نمی شوم لطفا توضیح بیشتری بدهید
در مثال آخر یعنی beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_areamap یک تصویر با نواحی قابل کلیک داریم ...
برای اینکه با این مثال بخوبی آشنا شوید، ابتدا باید عنصر map و area که لینک آن در انتهای مطلب بالا آمده است را مطالعه فرمایید. اگر باز متوجه نشدید، بفرمایید تا توضیحات بیشتری ارائه شود.
سلام به چه شکل می شود عکس را در کنار عنوان سایت قرار داد
سلام
ابتدا باید عکس مورد نظر را با پسوند ico. ایجاد کنید و بعد اون رو در قسمت head لینک کنید .بعنوان مثال می توانید از سایت http://www.favicon.cc/ استفاده کنید. و سپس به صورت زیر عمل کنید:
<link rel="shortcut icon" href="/http://m atrice.ir/templ ates/protostar/ favicon.ico" />
خواهشی از کاربران
در اینکه این سایت در نوع خودش اول است و مطمئنا در آینده ای نزدیک بدون هیچ رغیبی،رتبه اول را به خود اختصاص میدهد. نیاز به زمان است. از شما کاربر محترم ، خواهش دارم که اگر میخواهید تشکر و .. از این کار بسیار ارزشمند نمایید، در پایان و به همراه سوالات انجام دهید.این که یک نظر ثبت نمایید و تنها به عنوان یک تشکر،از ارزش فنی بخش نظرات کاسته میشود
برای اون دسته از کسانی که اشاره میکنند که مثلا ، آقا این مطالب که دز w3 و .. هست و از این طور صحبت ها،باید بگویم که اتفاقا مهم همین ایده و طرحه است. یعنی طراحی یک سایت و وب را در هر حوزه ای،هر کسی میتواند انجام دهد.مهم و ارزشمند همان ایده است خیلی ها آمدن و آموزش برنامه نویسی را با گذاشتن کلاس های آموزشی و دیگری با ارائه سی دی های آموزشی و در حوزه خدمات رایگان هم ،سعی بر گام به گام و .. . اما یک نفر به فکرش رسید که با ترجمه بهترین منابع آموزشی دنیا .. و این ایده و طرح قابل ستایش است
چرا که بیشتر کاربران در ترجمه ضعف دارند. حساسیت را کنار بگذارید
سلام
میشه خواهش کنم که برای مثال بالا در قسمت "نحوه تراز کردن تصویر در یک متن." یعنی همان "Aligning images" یک مثال برای تمام حالات در مثال ، یک مثال دیگر قرار دهید که با سی اس اس باشد و یا به گونه ای که در اچ تی ام ال 5 منسوخ نشده باشد
لطفا به صورت توضیح پاسخ ندهید و مانند همان مثال ، یک مثال کامل قرار دهید
قبلا برای وسط کردن عکس و ... در نظرات اشاره کرده اید، اما میشود خواهش کنم که برای تمام حالات در همان مثال ذکر شده، یک مثال به همان شکل در سایت قرار دهید و یا اگر وجود دارد، لینک آن را قرار دهید
با تشکر از سایت بسیار بسیار خوبتان
سلام
شما می توانید به جای خصوصیت align از دستور سی اس اس vertical-align استفاده کنید.
برای آموزش بیشتر می توانید به لینک زیر مراجعه نمایید:
www.beyamooz.com/cssref/227-css-properties/880-vertical-align
سلام
ممنون از پاسخگویی سریع شما و سایت بروزتان
مدیریت محترم:
از پاسخ شما ، استفاده لازم را نمودم
فقط میشه بگویید که چگونه یک تصویر را در سمت راست و یا چپ پاراگراف قرار دهیم
ببینید برای پاراگراف در سی اس اس و نه برای زمینه . چون برای پس زمینه مطالعه نمودم و این دو یک تفاوت هایی با هم دارند.
این پاسخ قبلی شما هم بسیار کاربردی بود اما برای تراز کردن در یک خط و ...
حال درست مانند مثال بالا که یک عکس را در سمت راست و چپ پاراگراف قرار میدهید، یعنی یک پاراگراف 6 خطی فرضا داریم و حالا یک عکس با ارتفاعی در حدود همان 6 خط را بخوایم در چپ پاراگراف قرار دهیم
به طور که خود پاراگراف و متن تشخیص میدهد که به مکان عکس رسیده است و باید به خط بعد پاراگراف برود
نه مانند روش پس زمینه که این تشخیص را ندارد و متن با اضافه کردن نوشته هر خط، بر روی عکس قرار میگیرد و باید این تنظیمان را جدا انجام داد
بسیار بسیار از سایت خوبتان تشکر میکنم
ما کد مورد نظر شما رو در آدرس زیر ایجاد کرده ایم. لطفا پس از مطالعه ی این کد، اگر سوالی باقی موند در همینجا منتظر سوالات شما دوست گرامی هستیم :
codepen.io/sbaloot/pen/qdXmoW
به طور خلاصه روند کار به صورت زیر است:
1. ابتدا یک div که در بر دارنده ی تمامی عناصر است ایجاد می کنیم.
2. عکس مورد نظر را با استفاده از تگ img وارد می کنیم.
3.عکس مورد نظر را در یک div که آی دی آن برابر با image است قرار می دهیم.
4.در درون div دربردارنده، یک پاراگراف با آی دی text ایجاد می کنیم.
بعد از این، با استفاده از css مراحل زیر را انجام می دهیم:
1.عرض container را به طور دلخواه برابر با 500 پیکسل قرار می دهیم.
2.عکس را با استفاده از float به سمت راست شناور می کنیم.
3.متن مورد نظر را با استفاده از دستور text-align به سمت راست منتقل می کنیم.
سلام
برای وسط قراردادن یک متن، اشاره کردید که از تگ center استفاده نکنیم و از استایل دهی css استفاده شود
حال برای وسط قرار داده عنصری مانند عکس باید چه کرد؟ باز هم از استفاده نماییم
لطفا با مثال توضیح دهید
ضمن اینکه اگر میشود در این باره کمی جامع توضیح دهید. یعنی برای وسط قرار دادن هر عنصری ، مثلا یک کد جاوااسکریپت و ....
تشکر میکنم از سایت بسیار خوبتان
برای وسط قرار دادن متن و عکس، می توانید به آخر این کامنت ها مراجعه کنید. سپس در کامنت یکی مانده به آخر جواب خودتون رو مطالعه کنید.
سلام
درمورد مختصات عکس ها بیشتر توضیح بدین من هیچی نفهمیدم اون اعدادو از کجا باید پیدا کنم
ممنون
با سلام
اگه دوتا تصویر داشتیم و خواستیم یکی از اونا مپ باشه چطور تعیین کنیم کدام تصویر مپ باشه؟
با تشکر
سلام
همان طور که می دانید از ویژگی usemap در تگ img استفاده می شود تا به مرورگر بفهمانیم که از کدام map استفاده کند، بنابراین برای یکی از دو تصویری که دارید، ویزگی usemap را تنظیم نمایید.
سلام
در مثال beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_image_align درون align چه چیزی بنویسیم تا شکلک بیاد وسط صفحه؟
تشکر
سلام
برای قرار دادن تصاویر در وسط صفحه نمی توان از ویژگی align استفاده کرد...!
همان طور که می دانید تگ img یک عنصر inline است، یعنی به اندازه محتوایی که دارد طول یک سطر را اشغال می کند ...! بنابراین اگر خصوصیت CSS زیر را روی آن اعمال کنیم، وسط چین نخواهد شد ...!text-align:center; اما راه حل این است که تگ img را درون یک عنصر از نوع block مانند p یا div قرار داده و سپس خصوصیت ذکر شده در بالا را روی p یا div تنظیم نماییم.
سلام، ممنون از سایت خوبتون
من متوجه نشدم در مثال آخر(Create an image map) مختصات سیاره های کوچک رو چطور محاسبه کردین!!!
ممنون میشم راهنمایی کنید.
<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" مشخص کرده ایم
ممنون از پاسخ ولی اصلا جواب سوال رو ندادید. هر کدوم از coords ها یک عدد بله متوجه شدیم برای دایره دو عدد اول صفر هستند. اعداد بعدی رو چگونه بدست میارید؟ برای مستطیل چطور؟ برنامه خاصی وجود داره؟
برای اشیاء rect یا مربع مستطیلی شکل، از چهار عدد به عنوان گوشه چپ - بالا و راست - پائین استفاده می شود، در واقع شما میزان فاصله سمت چپ و بالای تصویر و همچنین سمت راست و پائین تصویر را برای قابل کلیک بودن تعریف می کنید.
برای اشیاء چندگانه یا poly باید از 6 مقدار استفاده کنید، این مقادیر موقعیت محل قابل کلیک شدن را نشان می دهند.
نهایتا برای اشیاء دایره ای شکل یا circle کافی است دو مقدار را تعیین کنید، البته برای تعیین انحراف از مرکز دایره، مقدار سومی نیز می توان تنظیم کرد که به فرض دایره را به شکل بیضی تبدیل می کند.
آقا هرچی شما جواب سوال رو ندادید. coords رو از کجا آوردین؟ دایره و بقیه که مهم نیست برادر من
با سلام
ویژگی coords در تگ area استفاده می شود و مختصات یک ناحیه را در image-map مشخص می کند.
بله، این موضوع رو متوجه شدم، منظورم قسمت coords="0,0,82, 126" و coords="90,58,3 " و coords="124,58, 8" هستش.
برای اطلاع دوستان، ویژگی 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
اگر عکس را در یک ادیتور تصویر ساده مثلاً paint باز کنید، می بینید که فضایی که خورشید گرفته از 0 پیکسل تا 82 پیکسل روی محور x و از 0 تا 126 پیکسل روی محور y می باشد. بنابراین یک مستطیل یا "rect" با این مختصات (coordinate) برای این محدوده در نظر گرفته شده است.
برای اشکال دوار ابتدا مختصات مرکز دایره را مشخص می کنیم که در این مثال برای یکی از سیارات 90,58 و برای دیگری 124,58 مشخص شده اند و سپس شعاع دایره را مشخص می کنیم که به ترتیب برای اولین دایره 3 و برای بعدی 8 پیکسل می باشد.
ممنون از سایت و زحماتی که میکشید
همون اموزشها رو بیرون با هزینه هنگفت و صد البته ناقص تدریس میکنند
سلام دوستان یه سول
من لوگوی خودم رو تو وبم قرار دادم اما با چه تگی اونو از سمت راست به سمت چپ بیارم؟؟؟؟؟؟
ممنون میشم کمک کنید.
سلام، برای جواب به این سوال باید کد HTML مربوط به لوگو را نیز قرار می دادید ...!
حالت 1: اگر لوگو داخل div است و div مذکور تمام طول سطر را اشغال کرده است، بنابراین خصوصیت زیر را روی div تنظیم کنید:text-align:right; یا خصوصیت زیر را روی لوگو تنظیم کنید:margin-right:0
2- اگر کد HTML صفحه پیچیده است، خیلی راحت خصوصیت زیر را روی لوگو تنظیم کنید:position: absolute;
top: 0;
right: 0;
با سلام خصوصیت alt در خط زیر چیکار میکنه من وقتی پاکش میکنم هیچ تغییری ایجاد نمیشه؟
alt="Pulpit rock"
وقتی تصویر به دلایلی لود نمیشه، در محل تصویر مقدار منتسب به این خصوصیت یعنی هر چه در ALT قرار دارد توسط مرورگر به کاربر نمایش داده می شود.
برای بررسی لینک تصویر را اشتباه درج کنید و صفحه را ملاحظه فرمایید.
منظورم همین عنصری است که الان سمت چپ سایت شماست و در عکس من سمت راسته.همین مستطیل درازه!
اگه منظورم رو فهمیدید راهنمایی کنید
ممنون@
اگر احتمالاً از CMSهایی مثل جوملا و یا وردپرس استفاده می کنید، برای جابه جایی مکان ماژول ها، از قسمت مدیریت CMS براحتی قابل انجام است.
مثلاً در مدیریت جوملا، باید به منوی "مدیریت ماژول ها" برید و پس از پیدا کردن ماژول مورد نظرتون، نسبت به Positionهای قالب نصب شده، مکان ماژول رو تغییر بدید.
سلام من vive sourceبعضی از قسمت های سایت ها رو میگرم و داخل قالب خود قرار میدهم!ورنگ موقعیت و...هاشون رو تغییر میدم
حالا میخواستم ببینم این کار حرومه یا نه؟
این سوال رو باید توی انجمن دینی میفرستادم اما هیچ کدام انها نمیدونند ریپ چیه!اگه شما تایید نمیکنیدممنون میشم جوابش رو به وبم بفرستید!
ممنون
بنظرم اشکالی ندارد که برای طراحی سایت تان از دیگر سایت ها الگو بگیرید و اگر این کار را با نگاه کردن بجای کپی کردن کدهای CSS انجام دهید هیچ اشکالی ندارد.
یه سوال دیگه.چطوری منوی های قالب سایتم را به سمت راست و قسمت پست هارا به سمت چپ ببرم؟
قائدتاً منو و یا ماژول پست های سایتتون داخل یک div است، برای پیدا کردن div مذکور بصورت زیر عمل کنید:
1- در مرورگر فایرفاکس، سایت رو باز کنید.
2- روی منوی سایتتون راست کلیک کرده و گزینه Inspect Element را انتخاب نمایید.
3- در پایین صفحه مرورگر، پنل Inspect Element باز می شود که شامل دو قسمت است، سمت چپ، کدهای HTML صفحه را می بینید و سمت راست، کدهای CSS عنصر انتخاب شده را خواهید دید. بنابراین روی عناصر در سمت چپ حرکت کنید تا به div حاوی منو برسید.
4- حالا که div مذکور در حالت انتخاب است، سمت چپ پنل Inspect Element خصوصیت float:right را اضافه نمایید.
5- زمانی که نتیجه رضایت بخش بود، خصوصیت یا خصوصیت های اضافه شده را به فایل css قالبتون اضافه نمایید.
ببخشید انقدر سوال میپرسم.بین سرتیتر و hr(خط جداکننده)چند تا تگ(نظر،ادامه مطلب و نویسنده )هست
چطوری این تگ ها رو جاشون رو عوض کنم؟
خواهش می کنم ...
با CSS نمی توانید موارد ذکر شده را جابه جا کنید و باید در کد دست ببرید. در این صورت زمان آپدیت به مشکل برخواهید خورد ...! (یعنی اگر هم موفق بشید جابه جا کنید، زمان آپدیت CMS همه چیز به روز اول بر میگرده)
ممنون صادق جان
فهمیدم!
پسر دمت گرم
سلام در قسمت لینک دار کردن قسمتی از عکس این قسمت یعنی چی "usemap="#plane tmap
سلام، همان طور که میدانید در آخرین مثلا آموزش بالا، قصد داشتیم، قابل کلیک کردن قسمت هایی از عکس را با استفاده از عنصر map آموزش دهیم.
بنابراین فرض کنید یک تگ img در صفحه داریم که می خواهیم برای قابل کلیک کردن قسمت هایی از آن، آنرا ناحیه بندی کنیم، خوب برای ناحیه بندی عکس، نیاز به یک عنصر دگیر بنام map داریم، مسلماً خواهید پرسید که حالا چطوری این دوتا تگ را به هم وصل کنیم ...؟ جواب این سوال، در حقیقیت در سوالی است که شما پرسیده اید ...!
برای توضیحات بیشتر لطفاً به لینک زیر مراجعه نمایید:
beyamooz.com/tags/312-html-tag/2256-%D8%AA%DA%AF-map
سلام.من این لینک رو کپی میکنم بصورت لینک میاد و درسته اما خودم مینویسم لینک نیست!
سلام
برای ایجاد لینک با استفاده از تگ a چندتا چیز رو باید رعایت کنید:
1- تنظیم خصوصیت href با آدرس مورد نظرتان، اگر ویژگی href را نداشته باشد آن تنها یک نگهدارنده مکان برای یک لینک است و تنها بصورت یک متن معمولی نمایش داده می شود.
2- تگ a باید تگ پایان داشته باشد.
سلام.چرا این لینک عکسش میاد اما لینک نیست!مشکل چیه؟
سلام، برای ایجاد لینک با استفاده از تگ a، حتماً خصوصیت href آنرا نیز، باید مقدار دهی کنید.
سلام
میخوام از کاربر بخواهم که عکس خود را در صفحه لود کند. و آن عکس در صفحه دیده شود.
ممنون میشم اگر راهنماییم بفرمایید
سلام، برای انجام این کار نیاز به برنامه نویسی سمت سرور دارید، بنابراین یکی از لینک های زیر را انتخاب نمایید:
1- آموزش PHP:
beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-php
2- آموزش ASP.NET:
beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-asp-net
سلام خسته نباشید لطفا بگید وقتی یک لینک عکس درست میکنیم چه طور میشه چند تا عکس در این لینک قرار بدیم یعنی زمانی روی این لینک کلیک میکنیم جند عکس داخلش باشه مثل یک آلبوم...
سلام، برای ساخت گالری تصاویر یا همان آلبوم لطفاً به قسمت "آموزش CSS-ساخت گالری تصاویر" برید:
www.beyamooz.com/css/87-advance/298
با سلام و تشکر از زحمات شما
شما در قسمت "خصوصیت Alt" گفتید: نیز اگر موس را روی آن عکس ببریم این نوشته نمایش داده می شود!
این قاعده برای خصوصیت Alt نیست، بلکه برای خصوصیت title هست.
لطف تصحیح بفرمایید.
با تشکر
ممنون، اصلاح شد.
من دارم اموزشهای شما رو تو فایل نوت پد که خودم ساختم تمرین میکنم ولی وقتی تو browser رندر میشه هیچ عکسی نشون نمیده راهنمایی کنید ممنون
لطفاً به این مثال توجه فرمایید، فرض کنید درحال آماده سازی سایتی با ساختار فولدر بندی زیر هستیم:
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
سلام لطفا توضیح بدید چه جوری یک عکس را به وسط صفحه انتقال بدیم؟ ممنون
سلام، به چند روش می توان عکس را وسط چین کرد، اما قبل از بیان روش ها این بحث نیاز به یک مقدمه دارد ...!
برای ترازبندی یک عنصر، قبل از هر چیز باید مفهوم عناصر 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
از استاتید محترم، اگر روش های دگیری به نظرشان می رسد، همینجا ذکر نمایید.
مرسی از div استفاده کردم حل شد ممنون
درود