نمایش متن متحرک بر روی تصاویر در html 5
نوشتن توضیحات برای تصاویر در HTML 5
نمایش توضیحات بر روی تصاویر موجود در سایت شما می تواند به کاربران در شناسایی محتوای هر عکس و همچنین بهنیه سازی تصاویر سایت شما برای موتورهای جستجوگر مفید باشد. در HTML 5 تگ جدیدی با نام figure قابل استفاده است که با استفاده از آن می توانیم تصاویر موجود در سایت خود را علامت گذاری کنید و همچنین با استفاده از تگ figcaption در پایین تصویر خود می توانیم توضیحات مربوطه را به سادگی نمایش دهیم. در زیر با یک مثال ساده با چگونگی کار با این تگ های جدید HTML 5 آشنا می شویم.
1
2
3
4
5
6
7
8
9
10
11 |
<!DOCTYPE html>
<html>
<body dir="rtl">
<figure>
<img src="file.jpg">
<figcaption>
توضیحات مربوط به تصویر در اینجا نوشته می شود
</figcaption>
</figure>
</body>
</html> |
همانطور که می بینید در خروجی کدهای HTML که در بالا دیدیم مرورگر ما به صورت خودکار توضیحات قرار گرفته در تگ figcaption را به تصویری که در همان figure است انتساب داده است و آن متن را در زیر تصویر به صورتی که بازدید کنندگان متوجه می شوند که این متن توضیحی برای آن عکس است نمایش می دهد. همچنین موتورهای جستجوگر نیز مانند بینگ ، گوگل و یاهو توانایی این را دارند که با استفاده از توضیحاتی که در تگ figcaption هر تصویری نوشته می شود موضوع آن تصویر را مشخص کنند تا در هنگام جستجوی کاربران اینترنتی به دنبال عکس تصاویر شما را به آن ها در رتبه ها و صفحات اولیه نمایش دهند.
بهنیه سازی ظاهر نمایش توضیحات هر تصویر با استفاده از CSS 3
حال وقت آن رسیده با استفاده از CSS 3 ابتدا ظاهر متن توضیحی تصاویر سایت خود را زیبا تر بر روی آن ها نمایش دهیم و سپس باز هم با استفاده از CSS کاری انجام دهیم که وقتی کاربران با موس خود بر روی تصویری رفتن توضیحات آن تصویر به صورت اسلایدی یا متحرک بر روی آن تصویر ظاهر شود.
خوب ابتدا برای اینکه تعیین کنیم تصاویر سایت ما باید به چه صورتی نمایش داده شوند از کدهای CSS زیر برای تعیین حالت نمایش تگ های figure در صفحات سایت خود که در بر دارنده تصاویر ما هستند استفاده می کنیم. توجه داشته باشید که این کدها را باید در فایل CSS قالب سایت خود و یا در قسمت CSS سرآیند کدهای HTML سایت خود ( Head ) قرار دهید.
1
2
3
4
5
6
7
8
9 |
figure {
display: block;
position: relative;
/* تصویرها از راست به چپ در کنار یکدیگر نمایش داده شوند */
float: right;
overflow: hidden;
/* تعیین فاصله بین تصاویر از چپ و پایین ۳۰ پیکسل */
margin: 0 0 30px 30px;
} |
حال باید برای اینکه کادر توضیحات ما به صورت زیبا تر و بر روی تصویر نمایش داده شود از کدهای زیر استفاده می کنیم و تعیین می کنیم که در حالت اولیه این کادر توضیحات نمایش داده نشود و وقتی کاربر موس خود را بر روی تصویر آورد این کادر با توجه به پارامترهای زمانی تعیین شده ما به صورت متحرک ظاهر شود.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
figcaption {
position: absolute;
background: black;
/* ایجاد پس زمینه شفاف برای کادر توضیحات در تصاویر */
background: rgba(0,0,0,0.75);
/* تعیین رنگ متن نمایش داده شده به عنوان توضیحات تصویر */
color: white;
padding: 10px 20px;
/* در ابتدا نباید این توضیحات بر روی تصاویر نمایش داده شود */
opacity: 0;
/* تعیین زمان و حالتی که مقادیر انتساب شده باید اعمال شوند که منجر به متحرک شدن این کادر می شود */
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
/* وقتی کاربر موس را بر روی تصویر آورد باید کادر توضیحات نمایش داده شود */
opacity: 1;
} |
می توان گفت اکثر متدهایی که در کد CSS بالا استفاده کرده ایم برای نمایش و متحرک سازی کادر توضیحات هر تصویر خاصیت هایی هستند که در CSS 3 معرفی شده اند و امکان استفاده از آن ها در اختیاران طراحان وب و وبمسترها قرار گرفته است.
حال با استفاده از کدهای CSS زیر تعیین می کنیم که در ابتدای نمایش تصاویر و در حالت پیش فرض بجای نمایش کادر توضیحات بر روی عکس ها می خواهیم یک علامت سوال ( ? ) بر روی تصاویر نمایش داده شود و وقتی کاربر موس خود را بر روی تصاویر برد این کدها علامت سوال را محو می کنند.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 |
figure:before {
/* می خواهیم در ابتدا بر روی تصاویر یک علامت سوال نمایش داده شود */
content: "?";
position: absolute;
font-weight: 800;
background: black;
background: rgba(255,255,255,0.75);
text-shadow: 0 0 5px white;
color: black;
/* تعیین عرض و طول کادری که می خواهیم در آن علامت سوال نمایش داده شود */
width: 25px;
height: 25px;
/* برای دورگرد کردن کادر محتوی علامت سوال */
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 25px;
/* در هنگام نمایش این علامت سوال نیز باید به صورت انیمیشن ظاهر شود */
-moz-transition: all 0.6s ease;
/* برای اینکه بیست درصد علامت سوال را شفاف تر کنیم */
opacity: 0.8;
}
figure:hover:before {
/* وقتی کاربر موس خود را بر روی تصویر آورد باید علامت سوال محو شود */
opacity: 0;
} |
در آخرین مرحله نوشتن کدهای CSS تنها کافی است تعیین کنیم که کادر محتوی علامت سوال در چه مختصاتی نمایش داده شود مانند ( cap-left:before ) و کادر توضیحات در حالت معمول کجا مخفی شود ( مانند cap-left figcaption ) و اینکه کادر توضیحات در حالتی که کاربر موس را بر روی تصویر قرار داد در چه مختصاتی بر روی تصویر نمایش داده شود ( مانند cap-left:hover ) …
1
2
3
4
5
6
7
8
9
10
11
12 |
.cap-left:before { bottom: 10px; left: 10px; }
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }
.cap-right:before { bottom: 10px; right: 10px; }
.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }
.cap-top:before { top: 10px; left: 10px; }
.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }
.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; } |
همانطور که حتماً با دیدن کدهای بالا متوجه شده اید ما با تعیین چهار کلاس مختلف برای حالاتی که در بالا توضیح دادیم ۴ نمونه مختصات مختلف را تعیین کرده ایم که با استفاده از آن ها می توانیم در کدهای HTML صفحه خود کادر توضیحات را از هر طرفی که بخواهیم مثلاً بالا ، پایین ، چپ و راست نمایش دهیم.
چگونه در صفحات سایت خود از کدهای بالا برای تصویرها استفاده کنم ؟
کافی است همانطور که در قسمت اول این آموزش گفتیم از تگ figure برای مشخص کردن هر یک از تصاویر استفاده کنیم و در آن با استفاده از تگ figcaption توضیحاتی که می خواهیم بر روی تصاویر نیز نمایش داده شود را نیز مشخص کنیم. بیشتر کدهای CSS بالا برای اینکه به تگ ها نسبت داده شده اند به صورت خودکار بر روی ظاهر تصاویر سایت شما اعمال می شوند و فقط کافی است ما در کدهای HTML سایت خود مشخص کنیم که می خواهیم کادر توضیحات و علامت سوال از کدام طرف تصویر ظاهر و یا محو شوند مانند کدهای زیر
1
2
3
4
5
6 |
<figure>
<img src="imagefile.jpg">
<figcaption class="cap-top">
توضیحات مورد نظر
</figcaption>
</figure> |
می توانید در کد بالا به جای استفاده از cap-top از cap-right ، cap-left و یا cap-bot استفاده کنید برای تعیین جهتی که می خواهید علامت سوال در آن محدوده نمایش داده شود و کادر توضیحات نیز از همان جهت ظاهر و یا محو می شود.
همانطور که می بینید به سادگی توانستیم که یک افکت زیبا را برای نمایش توضیحات به صورت متحرک برای تصاویر سایت خود ایجاد و استفاده کنیم و این افکت ها هیچگونه تاثیر منفی بر روی مفید بودن استفاده از تگ figure برای شناسایی تصاویر سایت ما از طرف موتورهای جستجوگر مانند گوگل نمی گذارند.
پاسخ : نمایش متن متحرک بر روی تصاویر در html 5
