• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6251 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

ترفندهای حرفه ای و پیشرفته Front End (جلسه 9) : استایل دهی به تصاویر مشکل دار یا broken images - قسمت 1

0 140 ۳۰ مهر ۹۵

در این جلسه با یه ترفند حرفه ای و پیشرفته دیگه در خدمتتون هستیم و امیدواریم که بتونید از اون استفاده کنید.broken-images

همونطور که میدونید و حتما با اون برخورد کردید، وقتی مشکلی برای تصاویر بوجود میاد، اون تصاویر بر روی مرورگر نمایش داده نمیشن و چنین چیزی جای عکسا نمایش داده میشه:style broken images

میبینید که ظاهر خیلی زشت و نامناسبی داره و متنی که نمایش داده میشه همون متنی هست که درون ویژگی alt تصویر قرار میدیم. این ظاهر در مرورگرهای مختف هم فرق داره و هر کدوم ساز خودشو میزنه. اما شما با استفاده از ترفندی که امروز در اختیارتون قرار میگیره میتونین به تگ img خودتون استایلهای CSS رو نسبت بدین که تصاویری که به مشکل بر میخورن بهتر نمایش داده بشن.

دو مورد درباره المنت img:

برای فهم بیشتر اینکه ما چطور به broken images استایل دهی میکنیم، دو تا نکته رو باید بدونید و باهاش آشنایی داشته باشید.

  1. ما میتونیم استایلهای مورد نظرمون رو برای تایپوگرافی به img مورد نظر اعمال کنیم: این استایلها به متن alt یا alternative text اعمال میشن و تاثیری بر روی خود تصویر ندارن.
  2. المنت img یک replaced element هست: به المنتهایی که ظاهر و ابعاد اونا با استفاده از منابع بیرونی یا خارجی مشخص میشه، replaced element گفته میشه. بدلیل اینکه المنت مورد نظر با توجه به یک منبع خارجی کنترل میشه، بنابراین نمیشه از کلاسهای کاذب after و before برای اون استفاده کرد. ولی زمانی که تصاویر با مشکلی برخورد کنن و لود نشن، کلاسهای کاذب برای المنت img نمایش داده میشن.

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

حالا بیاید با هم وارد مرحله کدنویسی و پیاده سازی این ترفند بشیم. کد زیر رو در نظر بگیرید:

همونطور که میبینید یک تگ img قرار دادیم و یک آدرس تصویر رو قرار دادیم که اصلا وجود نداره و 404 میده. برای ویژگی alt هم یک متن kanye Laughing قرار دادیم. تا اینجای کار ظاهر تصویر در مرورگر بصورت زیر هست:style broken images 2

میبینید که بازم همون ظاهر بد به همراه متن alt نمایش داده شده.

اضافه کردن اطلاعات کمکی:

یک راه که ما میتونیم با استفاده از اون broken image ها رو پشتیبانی کنیم اینه که به کاربران بگیم که برای تصویر مورد نظر مشکلی بوجود اومده و اطلاعاتی در اختیارش بزاریم. همچنین با استفاده از عبارت attr() نیز میتونین آدرس تصویر مشکل دار رو به کاربران نمایش بدین. برای اینکار از کد CSS زیر استفاده میکنیم:

همونطور که دیدید در ابتدا تعدادی ویژگی استفاده کردیم که تایپوگرافی تصویر مورد نظر رو تغییر بدیم و بعد از اون با استفاده از کلاسهای کاذب after و before متنهایی رو به بعد و قبل اون اضافه کردیم و برای هر کدوم استایلی رو در نظر گرفتیم. با استفاده از عبارت attr هم تونستیم به ویژگی src تصویر مورد نظر دسترسی پیدا کنیم و اون رو در زیر broken image نمایش بدیم. تا اینجای کار خروجی در مرورگر بصورت زیر خواهد بود:style broken images 3

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

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram