پرسش و پاسخ – کار با تصاویر در HTML

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

پرسش و پاسخ - کار با تصاویر در HTML

Free-Learn

پرسش از شما، پاسخ از بنده تا جایی که بتونم و در توانم باشه، لطفا پرسش تان را فقط در رابطه با بخش مشخص شده ارسال نمایید تا نظم و ترتیب در بخش پرسش و پاسخ بخوبی رعایت شود.

برای مشاهده بخش – آموزش کار با تصاویر یا Images در HTML لطفا اینجا کلیک نمایید. .

لطفا پرسشی که ارسال مینمایید فقط مربوط به بخش [آموزش کار با تصاویر یا Images در HTML] باشد، در غیراینصورت پرسش شما تایید نخواهد شد.

Free-Learn

بنده خودم یکسری پرسش بهمراه پاسخ ارائه میدهم، امیدوارم که در بین پاسخ ها به جواب پرسش تان برسید ، ولی در صورتی که پرسش و پاسخ تان را در بین پرسش و پاسخ های زیر پیدا نکردید، لطفا حتما از طریق فرم زیر پرسش تان را ارسال نمایید.

Free-Learn

دریافت PDF یا پرینت این مطلب

27 پرسش و پاسخ

      • صفت alt بطور کلی میاد و یک متن رو جایگزین فایل تصویر میکنه که اگر به هر دلیلی تصویر نمایش داده نشد، آن متن نمایش داده شود.
      • صفت alt یکی از صفات بسیار مهم برای سئوی تصاویر و بطور کلی برای سئوی وبسایت می باشد.
      • صفت alt بطور کلی هویت یا شناسنامه ی یک تصویر می باشد.
      • گوگل تاکید میکنه که حتما از این صفت در درون تگ <img> استفاده نمایید.

      برای مثال لطفا اینجا کلیک نمایید (در این مثال جهت نمایش صفت alt ،فایل تصویر نمایش داده نمی شود)

    • با استفاده از این صفات ما میتونیم اندازه عرض و ارتفاع تصویرمون رو مشخص نماییم.
      برای بهینه تر بودن و نمایش هرچه بهتر تصاویر در یک صفحه ی وب سعی کنید حتما از این صفات استفاده نمایید.

    • به یک تصویر/عکس که دارای نقاط مختلف برای کلیک کردن باشد میگیم نقشه ی تصویری، برای مثال شما یک عکس دارید که بروی این عکس ۳ مکان رو میخواهید مشخص کنید که اگه کاربر برویش کلیک کرد مثلا به صفحات مختلفی منتقل شوند.
      پس باید از نقشه ی تصویری استفاده کرد، برای آموزش نحوه ایجاد یک نقشه ی تصویری لطفا اینجا کلیک نمایید.

  1. باسلام اول مرسی از سایت زیباتون دوم هم انکه میشه به عکس ها لینک های چن تایی داد من خیلی ابتدایی هستم اگه کمکم کنید ممنونتون میشم

    • سلام دوست خوبم
      اگر منظورتون از لینک های چندتایی به عکس اینه که مثلا یک عکس باشه که روش نقاط مختلفی برای کلیک کردن باشه بله میشه.
      بنده در پرسش و پاسخ قبلی این رو ذکر کردم (نقشه ی تصویری)
      لطفا برای مثال اینجا کلیک نمایید

    • سلام و عرض ادب خدمت شما دوست عزیز و محترم
      خوشحالم که در خدمت شما هستم
      برای دایره که از circle استفاده میکنیم و مستطیل از rect ، خب این بکنار
      برای اینکه بتونیم از چند ضلعی ها استفاده کنیم باید از poly استفاده کنیم.
      تنها چیزی که یکم ممکنه پیچیده باشه ، همین مختصات هس، یعنی در واقع نحوه درآوردن مختصات.
      راحت ترین حالت با دم دست ترین نرم افزار ، همین نرم افزار نقاشی Paint ویندوز است.
      عکس مورد نظرتون رو درون Paint باز کنید بعد ماوس رو که ببریت رو عکس ، گوشه پایین سمت چپ مختصات دقیق اون نقطه ای که ماوس رو عکس هس رو بهتون نشون میده، همون میشه مختصات ما.
      فقط نکته ای که در مورد Poly هس، اینه باید شما ۳ ضلع اصلی رو مشخص کنید
      مثلا میگیم مختصات ۳و۴ برای ضلع اول از بالا، مختصات ۵و۶ برای ضلع دوم از پایین سمت چپ و ۷و۸ برای ضلع سوم از پایین سمت راست ، در نهایت دوباره برمیگردیم به نقطه ضلع اول که بهتره مختصات اونم بنویسید.
      برای مثال لطفا اینجا کلیک کنید
      همچنین پیشنهاد میکنم، برای ساخت آنلاین انواع نقشه های تصویری ( فقط با چند کلیک ) ، حتما از ابزار آنلاین ساخت نقشه تصویری فری لرن استفاده نمایید.
      باتشکر

    • باسلام و عرض ادب خدمت شما دوست محترم
      خب چندین روش هست
      فرض میگیریم ۲ نمونه تصویر داریم . تصویر کوچک ( که بزاریم تو صفحه و کاربر روش کلیک کنه ) و تصویر بزرگ که وقتی روی تصویر کوچک کلیک شد تصویر بزرگ در اندازه اصلی نمایش داده شود.
      حال یک روش هست اینکه مثلا شما آدرس تصویر بزرگ رو داخل صفت href تگ a بزارید، که وقتی روی لینک یا تصویر کوچک کلیک شد، اون تصویر بزرگ در تب جدید مرورگر باز و نماش داده شود.
      روش دوم اینکه وقتی بروی تصویر کوچک کلیک شد، تصویر بزرگش بصورت مودال ( در قالب یک پنجره یا باکس بازشو در صفحه نمایش داده شود ).

      ۲ نمونه سورس ( یکی ساده و دیگری حرفه ای ) براتون قرار داده شده، لطفا بروی لینک زیر کلیک و دانلود نمایید.
      دانلود کن

    • باسلام و عرض ادب خدمت شما دوست محترم
      خب ممکنه توی آدرس دهی تصویر مشکل وجود داشته باشه. از کد زیر در صفحه وبتون استفاده نمایید ببینید آیا در مرورگر نمایش داده میشود یا خیر؟
      اگه نمایش داده شد پس یعنی مشکل از آدرس دهی هست ولی اگه نمایش داده نشد، لطفا یه ادیتور دیگه ( مثه ++NotePad ) با اینم امتحان کنید.

  2. سلام
    در برنامه ویژوال استودیو میخوام به طور اتوماتیک بدون اینکه دکه Ctrl+s رو فشار بدم نتیجه رو در مرورگر ببینم . حالا مشکل من اینه وقتی روی مثلا index کلیک راست میکنم و open in browser را کلیک میکنم مرورگر صفحه ای باز نمیکنه که نتیجه کد ها رو ببینم حالت go live هم فعاله و افزونه live server هم فعاله.
    سپاسگزارم

    • با سلام و عرض ادب
      بنده از دیگر ویرایشگرها همانند sublime و ++notepad استفاده میکنم و درحال حاضر از VB استفاده نمیکنم.
      لذا با توجه به اینکه افزونه live server نصب و فعاله نباید مشکلی وجود داشته باشه.
      حال در خوده نرم افزار یا در پوشه ای که در ویندوز هست ، بروی فایلی که میخواید Live بشه ، کلیک راست نمایید سپس گزینه Open with Live Server را بزنید.

  3. با سلام به شما
    می خواستم بدونم ایا واسه فایل های کوئری هم مثل css و جاوا اسکریپت یه لینک ایجاد میکنیم و اونو بعد از تگ قرار میدیم یا توی همون شیت سی اس اس مینویسیم؟؟
    سپاس فراوان

    • باسلام و عرض ادب
      اگه منظورتون از کوئری ( فایل هایی مثه Jquery ) می باشد، هیچ فرقی با جاوااسکریپت نداره – خب جی کوئری در واقع همون جاوااسکریپت می باشد فقط کمی فشرده شده و جم جورتر – ۲ روش برای فراخوانی هست. ( پیشنهاد میکنم حتما آموزش استفاده از جاوااسکریپت در HTML رو مطالعه نمایید )
      ۱ : استفاده از تگ script در قسمت head یا body صفحه برای فراخوانی فایل- مثال :

      ۲ : استفاده مستقیم در تگ های head یا body با استفاده از تگ script – مثال :

      =========================
      شاید سواله که فرق بین قرار دادن در تگ head و body چیه؟ بعضی از دستورات جاوااسکریپت حتما باید در head قرار بگیرند چون برای اجرا شدن باید حتما در head باشند تا به محض لود شدن صفحه بتونه دستورات رو فراخوانی کنه.
      بجز اینایی که باید حتما در head باشند، بقیش در body میتونن باشند تا تاثیری در سرعت بارگذاری سایت نزارن ( یعنی برای اجرا شدن حتما نمیخواد با لود صفحه انجام بشه )

پرسش تان را ارسال نمایید

لطفا متن پرسش تان را وارد نمایید.
لطفا نام تان را وارد نمایید.