Для того що б при наведенні курсору мишки відбувалася зміна картинки потрібно, крім розмірів, дописати шлях до нової зображенні в onmouseover = "" і шлях до початкової зображенні в onmouseout = ""
Для прикладу візьмемо таку картинку, як початкову:
І таку для зміни при наведенні:
Тепер напишемо код, в якому реалізуємо все вище описане.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Головне меню</title> </head> <body> <p><img src="images/but11.png" alt="" onmouseout="this.src='images/but11.png'" <!--курсор виходить за елемент-->
onmouseover="this.src='images/but12.png'" <!--курсор наведена на елемент-->
onmousedown="this.src='images/but13.png'" <!--кнопка натиснута на елементі-->
></p> </body> </html>
РЕЗУЛЬТАТ:
Для прикладу візьмемо таку картинку, як початкову:
І таку для зміни при наведенні:
Тепер напишемо код, в якому реалізуємо все вище описане.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Головне меню</title> </head> <body> <p><img src="images/but11.png" alt="" onmouseout="this.src='images/but11.png'" <!--курсор виходить за елемент-->
onmouseover="this.src='images/but12.png'" <!--курсор наведена на елемент-->
onmousedown="this.src='images/but13.png'" <!--кнопка натиснута на елементі-->
></p> </body> </html>
РЕЗУЛЬТАТ:
Немає коментарів:
Дописати коментар