به طور معمول ، از فلش های گرافیکی در وب سایت ها برای سازماندهی پیمایش استفاده می شود. وقتی روی چنین اشاره گر کلیک می کنید ، به صفحه دیگری یا بخش دیگری از صفحه فعلی می روید. بعضی اوقات برخی اقدامات به آنها مرتبط می شوند - برجسته سازی محتوای قسمت برچسب ، راه اندازی اسکریپت JavaScript و غیره برای تأکید بر اینکه این پیکان یک عنصر فعال است ، از اثر "برجسته" استفاده کنید ، یعنی تغییرات ظاهری در زمان تغییر ماوس.
ضروری
دانش اولیه زبانهای HTML و CSS
دستورالعمل ها
مرحله 1
مشخص کنید کدام مکانیزم برای اجرای برجسته سازی پیکان برای شما بهتر است. چندین مورد وجود دارد ، دو مرحله ساده در مراحل بعدی این دستورالعمل آورده شده است. هر دو از کلاس شبه CSS hover استفاده می کنند. هنگامی که نشانگر ماوس بر روی یک عنصر گرافیکی (فلش) قرار دارد ، سبکی که در این کلاس شبه توصیف شده است روی آن اعمال می شود و بقیه زمان این سبک فعال نیست. برای هر دو گزینه شرح داده شده در زیر ، می توانید از همان HTML استفاده کنید کد ، اما توصیف سبک های مختلف است. کد پیکان در منبع صفحه را می توان به صورت زیر نوشت: ویژگی id شناسه پیوند (arrowA) را مشخص می کند ، که به وسیله آن مرورگر تعیین می کند کدام یک از توصیف های سبک را باید بر روی آن اعمال کرد.
گام 2
اولین گزینه شما را ملزم به تهیه دو تصویر پیکان - با و بدون نور پس زمینه می کند. آنها را به ترتیب در پرونده هایی با نام هایی مانند arrON.
a # arrowA ، a # arrowA: بازدید شده از {
نمایش: بلوک؛
ارتفاع: 30 پیکسل؛
عرض: 100 پیکسل
پس زمینه: url (arrOFF.gif) بدون تکرار
حاشیه: 0؛
}
a # arrowA: شناور {
پس زمینه: url (arrON.gif) بدون تکرار ؛
حاشیه: 0؛
}
بلوک اول شامل ابعاد پیکان است (ارتفاع: 30 پیکسل ؛ عرض: 100 پیکسل) - آنها را با ابعاد تصاویر پیکان آماده جایگزین کنید.
مرحله 3
گزینه دوم به شما امکان می دهد فقط با یک فایل تصویری کنار بیایید. شما باید هر دو تصویر پیکان را در آن قرار دهید - هم برجسته و هم غیرفعال. می توانید آنها را کنار هم قرار دهید ، می توانید یکی بالاتر از دیگری باشید. در کد نمونه ، فرض خواهیم کرد که فلش برجسته شده در زیر پیکان غیر فعال قرار گرفته است و پرونده توسط شما arr.
a # arrowA ، a # arrowA: بازدید شده از {
نمایش: بلوک؛
عرض: 100 پیکسل
ارتفاع: 30 پیکسل؛
پس زمینه: url (arr.gif) بدون تکرار ؛
حاشیه: 0؛
}
a # arrowA: شناور {
پس زمینه: url (arr.gif) بدون تکرار 31 پیکسل؛
حاشیه: 0؛
}
در اینجا نیز تغییر اندازه را فراموش نکنید.
