Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


Как поменять изображение (JavaScript)

Поменять изображение при наведении на него курсора мыши производится при помощи событий тега <img> — onMouseOver (событие при наведении курсора) и onMouseOut (событие ). После вызова этих событий нужно поменять атрибут изображения src.

Смена изображения при наведении

Например есть изображение (src="/images/1/3/138.jpg"), при наведении курсора на изображение должно появится изображение (src="/images/1/3/142.jpg"), при отводе курсора должно загружаться первое изображение.

Пример онлайн.

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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Как поменять изображение (JavaScript)</title>

<script type="text/javascript">

function changeImage(src)
{
    document.getElementById('image').src = src;
}

</script>

</head>

<body>

<h1><a href="/e/Как_поменять_изображение_(JavaScript)">Как поменять изображение (JavaScript)</a></h1>
<p>Наведите курсор на изображение</p>

<img src="/images/1/3/138.jpg" alt="Image" id="image" onMouseOver="changeImage('/images/1/3/142.jpg')" onMouseOut="changeImage('/images/1/3/138.jpg')">

</body>
</html>
Опубликовано: 13 ноября 2011  ·  Автор: Артём Фёдоров  ·  5274 просмотра

Категория

ГлавнаяПрограммированиеJavaScriptСобытияКак поменять изображение (JavaScript)

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

События, JavaScript, Программирование

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания