Привіт всім відвідувачам Zura – Blog, сьогодні до вашої уваги, пропоную ознайомитись ще з одним красивим, і можливо для когось з вас виявиться ще і корисним ефектом, який стане в нагоді для вашого проекту.
Звісно, що для будь кого з вас перед тим як починати подальший перегляд публікації, захочиться спочатку поконкретніше дізнатись, про шо йде мова.
А саме, що це за ефект, для чого цей ефект можна застосувати, чим цей ефект може бути корисним для сайту, в принципі, ефект про який говориться в цій публікації можна багато для чого застосувати.
Постараюсь щоб не бути багатослівним, власне проявляється ефект таким чином, це коли ви наводите на картинку курсор миші, ця картинка міняється на іншу. Для чого цей ефект можна застосувати, найкраще пояснення це переглянути самому на прикладі, нижче можна переглянути демонстрацію ефекту.
Там відображаєтья годинник, годинник зеленого кольору, коли до годинника підвести курсор миші, колір міняється на синій.
Хто з вас переглянув демонстрацію ефекту, то побачив на сторіні, на якій показана демонстрація цього ефекту, що там знаходяться три варіанти годинника, всі три різного кольору, і в кожному з годинників, при наведенні курсора миші, міняється колір годинника.
Вважаю що варіантів для чого застосовувати такий ефект, можна придумати безліч, оскільки чи будь то картинка, чи сам колір картинки, (в моему прикладі який стосується токого ефекту, це колір годинника), чи саме фото, можна будь – які застосовувати.
Все що потрібно, щоб появився такий ефект, візьму за приклад той, який показаний в демонстрації, на сторінці цієї публікації (демонстрація ефекту вище).
Там потрібно всього чотири файли в папці, і прописати правила стилей CSS, і прописати правила саме на тій сторінці, на який плануєте застосовувати зміну картинки, при наведенні курсора миші. До речі стилі CSS, можна взагалі то чотирьма способами підключити до html сторінки.
В даному випадку, спосіб підключення CSS до html – сторінки який я застосував вважаю самим прийнятним, оскільки цей спосіб застосовується для того, щоб вказати правила, тільки в якомусь кокретному документі.
Називається “впровадження”, і стосуються ці правила тільки тієї сторінки, на якій вони прописані, прописуються між тегами <head></head>.
Можна звісно що, файл з правилами стилей CSS вставити в окрему папку, і на цей файл, прописати посилання на сторінці, на якій повинен відображатись цей ефект, там прописати посилання на файл, з правилами стилей CSS.
Я взагалі то вважаю, що для подібного ефекту доцільніше прописувати правила на сторінці, на який цей ефект має бути застосований, ніж створювати окремо файл зі стилями CSS, і вказувати потім на сторінці посилання, на цей файл.
Хоча, якщо ви плануєте при наведенні курсора миші зміну картинок не для одної сторінки, а для більше сторінок, то тоді звичайно що, краще для цього створити окремо файл стилей CSS, і на кожній сторінці, вказати посилання на цей файл.
Отож спочатку правила стилей CSS
a.rollover { background: url(img/folder/kartunka-1.png); /* малюнок ми який бачимо першим */ display: block; /* малюнок як блоковий елемент */ width: 720px; /* ширина малюнка */ height: 800px; /* довжина малюнка */ } a.rollover:hover { background: url(img/folder/kartunka-2.png); /* малюнок який ми бачимо при наведенні миші */ } a.rollover1 { background: url(img/folder/kartunka-3.png); /* малюнок ми який бачимо першим */ display: block; /* малюнок як блоковий елемент */ width: 720px; /* ширина малюнка */ height: 800px; /* довжина малюнка */ } a.rollover1:hover { background: url(img/folder/kartunka-5.png); /* малюнок який ми бачимо при наведенні миші */ } a.rollover2 { background: url(img/folder/kartunka-5.png); /* малюнок ми який бачимо першим */ display: block; /* малюнок як блоковий елемент */ width: 720px; /* ширина малюнка */ height: 800px; /* довжина малюнка */ } a.rollover2:hover { background: url(img/folder/kartunka-2.png); /* малюнок який ми бачимо при наведенні миші */ }
Давайте розбиремо код, в коді вказані правила для зміни трьох картинок, бачимо що вказані три індентифікатори (a.rollover, a.rollover1, і a.rollover2), якщо на сторінці планується зміна для більше картинок, тоді додаєте ще індентифікатори, скажем нам потрібно додати ще одну картинку, тоді додаємо індентифікатор з назвою (a.rollover3), ну і відповідно в ньому все прописуєте.
Просто копіюєте блок одного індентифікатора, скажем (a.rollover2), копіюєте все що відноситься до блоку (a.rollover2),
a.rollover2 {
background: url(img/folder/kartunka-5.png); /* малюнок ми який бачимо першим */
display: block; /* малюнок як блоковий елемент */
width: 720px; /* ширина малюнка */
height: 800px; /* довжина малюнка */
}
a.rollover2:hover {
background: url(img/folder/kartunka-2.png); /* малюнок який ми бачимо при наведенні миші */
}
і вставляєте нижче, а потім просто поміняєте в назві індентифікатора цифру “2” на цифру “3”.
Після того як зберегти зміни і обновити сторінку, на сторінці появляться дві одинакові картинки, щоб картинки були не одинаковими, звичайно що в індентифікаторі який ви додали, в посиланні потрібно вказати на інший файл картинки, скажем замість (kartunka-5.png) вказати (kartunka – 4.png).
А в рядку коду, в якому вказано посиланні на такий файл, який має відображатись після наведення курсора миші, вказати скажем (kartunka-3.png).
Тоді на сторінці, додана картинка буде вже відображатись з тим кольором, який вказаний в файлі (kartunka -4.png), а при наведенні курсора миші, буде відображатись картинка (годинник”) з кольором який вказаний в файлі (kartunka – 3.png)
До речі в коді вище, не вказаний тег <style>, звісно якщо ви вказуєте правила стилей css на сторінці, а не в файлі, то правила необхідно вписати між тегами <style> </style>, в цьому коді тег <style> не вказаний.
Причина така, що як вказую тег <style>, тоді код не вірно відображається, оскільки не коректно в мене тепер працює плагін, який призначений саме для відображення кодів на сторінці, після того як обновив WordPress, перестав в мене плагін працювати належним чином, і тепер прийдеться шукати якийсь альтернативний варіант.
Замість <style> в коді “якогось того” відображається символ (<), не звертати увагу на такий глюк не можливо, тому тег <style> не вказаний.
А орієнтуватись також можна по коду нижче, .
Переглянути код можна нижче:
Ох і дуже “допомогло” мені саме обновлення, не раджу часто обновлювати WordPress, як бачу зараз, що крім лишньої роботи нічого корисного не дало, хоча як сказати, оскильки і в цьому можна знайти якусь користь.
Скажем подумати як виправляти різні глюки після обновлення, погодьтесь і в цьому також присутня якась користь — і користь від цього це досвід, в виправленні глюків, які зявляються після обновлення старої на нову версії csm WordPress.
власне третій рядок:
background: url(img/folder/kartunka-1.png);
в рядку вказана адреса картинки (годинника) “background: url” папка “img”, а в папці “img” ще одна папка “folder”, і в папці “folder” файл “kartunka-1.png”, це файл “годинника” розового кольору, розширення png.
Можите повністю поміняти на свої файли і папки, і ваші файли з папкою необхідно прописати саме в цьому рядку.
width: 720px; height: 800px;
шостий і пятий рядок, там виставлена ширина і довжина картинки, в цих рядках регулюються розміри картинки, ввиставляєте в цьому рядку потрібні вам значення, щоб зробити розмір каринки такий який вас влаштовує.
a.rollover:hover {
background: url(img/folder/kartunka-2.png); /* малюнок який ми бачимо при наведенні миші */
далі рядок призначений для другої картинки, там виставляється тільки посилання на другу картинку, саме вона появляється після наведення курсора миші..
Ну і все, якшо ви плануєте застосувати для проекту зміну тільки одної картинки, то прописуєте тільки одне правило з індентифікатором “rollover”, прописуєте на сторінці між тегами “head” правила стилей CSS.
А між тегами “body” вибираєте місце і прописуєте посилання і індентифікатор, який вкаже на картинку
<a href=”#” class=”rollover”> </a>
Отож, як я вже відзначав, скільки папок, чи назву папки, чи назву файлів, все це ви можите поміняти в кодах, варіантів для ефекту можна багато застосувати, наприклад зробити щоб на кольоровому фото при наведенні на картинку курсора миші, щоб появлялося фото з ефектом “сепая”, “сепая” це ефект старого фото.
Для одної картинки, вам не потрібно в стилях CSS, в кодах вказувати правила для ще одних картинок, а вказати правило тільки для двох файлів, відповідно додати в папку для картинок тільки два файли, це одне кольорове фото, а друге фото, з ефектом “сепая”.
Нижче код стилях CSS, який розрахований на дві картинки:
a.rollover { background: url(img/folder/kartunka-1.png); /* малюнок ми який бачимо першим */ display: block; /* малюнок як блоковий елемент */ width: 720px; /* ширина малюнка */ height: 800px; /* довжина малюнка */ } a.rollover:hover { background: url(img/folder/kartunka-2.png); /* малюнок який ми бачимо при наведенні миші */ }
На цьому все до зустрічі.