Рисунок для курсора


Закрыть ... [X]

JavaScript

ТЕМА: Объект Image

Все картинки (элементы img) в документе являются экземплярами объекта Image. У каждого объектаImageсуществует свойствоsrc, которое можно менять. Используя это можно вносить изменения в графические образы, присутствующие на web-странице.

События мыши MouseOver и MouseOut

События mouseoverиmouseoutпроисходят, когда мышиный курсор перемещается на элемент или соответственно уходит за его пределы. Обработчики событий имеют именаonmouseoverиonmouseoutсоответственно. В примере 1 будем изменять это свойство в зависимости от того, какое наступает событиеmouseoverили mouseout.

Пример 1

В данном примере при наведении курсора мыши на рисунок, на его месте появляется другой рисунок.

Для обработки событий создана функция doEventс логическим параметром. При наведении курсора на картинку (возникает событие MouseOver) вызывается функцияdoEventс параметромtrue. В этом случае у картинки меняется значение свойстваsrcна flower.jpg. При уведении курсора за картинку (возникает событие onMouseOut) вызывается функцияdoEventс параметромfalseи значение этого свойства восстанавливается на bigdaisy.jpg.

<head>

<style>

body {background-color:#dfd8c5;}

img {width:274; height:233} </style>

<script>

function doEvent(type)

{

// переменная cv объект img с именем pic

var cv=document.getElementById('pic');

// если параметр функции равен true, то

// меняем свойство src объекта cv на flower.jpg

if(type) cv.src="flower.jpg";

// в противном случае показываем

// картинку с именем bigdaisy.jpg

else cv.src="bigdaisy.jpg";

}

</script>

</head>

<body>

<h1>События MouseOver и MouseOut</H1>

<p>Переведи мышиный курсор на цветок!</p>

<img name ="pic" id='pic' src="bigdaisy.jpg"

onMouseOver="doEvent(true);" onMouseOut="doEvent(false);">

</body>

Пример 2

В данном примере при наведении курсора мыши на кнопку, в текстовом поле формы появляется подсказка о назначении этой кнопки. При уведении курсора в сторону подсказка исчезает.

В скипте создан массив mess, содержащий все варианты подсказок.

Для обработки событий создана функция doEventс параметром, который совпадает с одним из индексов массива. Функция выводит значение элемента массива с этим индексом в поле info формы.

При наведении курсора на любую из кнопок (возникает событие onMouseOver) параметру присваивается значение1, 2 или 3. По этому событию вызывается функция, которой передаются эти параметры и выводятся в поле соответствующий элемент массива mess. При уведении курсора с кнопки (возникает событие onMouseOut) функции передается значение 0 и в поле выводится элемент массива с индексом 0, а именно пустая строка.

<head>

<style>body{background-color:#dfd8c5;}</style>

<script>

var mess = new Array("","Выключение компьютера",

"Удаление файлов с системного диска",

"Форматирование винчестера");

function doEvent(num)

{

// переменная cv объект с именем info

var cv=document.getElementById('info');

// меняем свойство value объекта cv на соответствующий элемент массива

cv.value= mess[num];

}

</script>

</head>

<body>

<h1>onMouseOver и onMouseOut</h1>

<P>Перед тем, как нажать кнопку, хорошо подумай!

<form>

<input type="button" value=" 1 "

onMouseOver="doEvent(1);" onMouseOut="doEvent(0);">

<input type="button" value=" 2 "

onMouseOver="doEvent(2);" onMouseOut="doEvent(0);">

<input type="button" value=" 3 "

onMouseOver="doEvent(3);" onMouseOut="doEvent(0);">

<br/><br/>

<input name="info" id='info' type="text" value="" size="50">

</form>

</body>

Пример 3

В данном примере после нажатия на кнопку, картинка в окне меняется автоматически, каждые несколько секунд.

<head>

<style> img{width:200;height:200}</style>

<script>

i=0;

function slideShow()

{

// массив картинок

ris = new Array('7.png', '8.png', '9.png', '6.png');

// Проверяем, Не вышел ли счётчик за пределы массива

if (i >= 4) i = 0; // если вышел, обнуляем счётчик.

//переменная r объект с именем slide

r=document.getElementById('slide')

// Меняем свойство src этого объекта на элемент из массива

r.src=ris[i];

i++; // Увеличиваем счётчик

// вызываем эту же функцию через каждые 1500 мс

setTimeout("slideShow()",1500);

}

</script>

</head>

<body>

<h1> слайд-шоу </h1>

<img id='slide' src="3.png" />

<form>

<input type="button" value=" Начать " onClick="slideShow() ;">

</form></body>

Вариант 1

В задании при наведении курсора мыши на фото автомобиля, в текстовом поле формы появляется сообщение о его марке и стоимости. При уведении курсора в сторону сообщение исчезает. Рисунки: car1.jpg,car2.jpg,car3.jpg,car4.jpg. Фон страницы любой светлый. Цвет текста темный, но не черный.

Организовать показ слайд-шоу из этих же картинок, чтобы каждая следующая картинка показывалась не автоматически, а при нажатии кнопки.

Вариант 2

В задании при наведении курсора мыши на названии животного, в ячейке таблицы появляется рисунок этого животного. При уведении курсора в сторону рисунок исчезает (то есть подставляется пустой рисунок empty-1.gif). Рисунки: gippopotam-1.gif, akula-1.gif, hobot-1.gif. Фон страницы любой светлый. Цвет текста темный, но не черный.

Организовать показ слайд-шоу из этих же картинок, чтобы каждая следующая картинка показывалась не автоматически, а при нажатии кнопки.

46


Источник: https://studfiles.net/preview/3349033/


Поделись с друзьями



Рекомендуем посмотреть ещё:



Похожие новости


Сливка раскраска распечатать
Рисунки городок в табакерке раскраска
Как рисовать бориса из бенди
Игра бесплатное лунтик учиться рисовать
Учимся рисовать для 7 лет видео
Рисунок по английскому языку перевод


Рисунок для курсора
Рисунок для курсора


Появление текста при наведении курсора на рисунок - Для
Иконка курсора: картинки и рисунок курсор, скачать фото



ШОКИРУЮЩИЕ НОВОСТИ


Похожие новости