|
|
|
 |
 |
Исходник |
 |
|
 |
 |
|
Автор:
|
|
|
Название:
|
JavaScript.RollOverImage. Динамически изменяющиеся картинки при наведение на них курсора мыши. |
|
Дата:
|
07 December 2005 |
|
Описание: |
Данный компонент предназначен для реализации на странице динамических картинок (RollOvers) которые изменяются при наведении на них курсора мыши. Очень часто используются в различных меню. Достаточно такой скрипт подключить к странице и у нужных картинок добавить аттрибут oversrc и указать там ссылку на картинку которая будет появляться вместо существующей при наведении на ней курсора мыши. Компонент сам найдёт нужные картинки при загрузке документа и проинициализирует их. Для того, что бы это работало ещё и в Mozilla, нужно подключить ещё так же и скрипт описанный ранее тут: http://www.aspnetmania.com/Code/Code/174.html, при том, выше, чем этот скрипт. Пример использования скрипта можно посмотреть тут: http://mosaicsys.org/resources/samples/rollover/example.html. В примере показано 2 флажка один из которых меняется при наведении на него курсора мыши. Скачать полностью пример можно тут http://mosaicsys.org/resources/samples/rollover/rollover.zip |
| |
Разместить ссылку на этот исходник в форуме вы можете вставив в текст сообщения
следующую строку:
[CODEPOST ID=175]JavaScript.RollOverImage. Динамически изменяющиеся картинки при наведение на них курсора мыши.[/CODEPOST] |
| Оценка: |
Проголосовало 7 посетителей, средняя оценка 3.29 |
| Оценить: |
|
1 // Author: Denis Ivchenko (voodoos) http://aspnetmania.com/Users/User/1010.html
2
3 RollOverImage = function(element) {
4 this.element = element;
5
6 this.imgOver = new Image();
7 this.imgOver.src = element.getAttribute('oversrc');
8
9 this.imgOut = new Image();
10 this.imgOut.src = element.getAttribute('src');
11
12 var instance = this;
13 element.attachEvent("onmouseover", function(event) { instance.onMouseOver(event); } );
14 element.attachEvent("onmouseout", function(event) { instance.onMouseOut(event); } );
15 }
16
17 RollOverImage.prototype.element = null;
18 RollOverImage.prototype.imgOut = null;
19 RollOverImage.prototype.imgOver = null;
20
21 RollOverImage.prototype.onMouseOver = function(event) {
22 this.element.src = this.imgOver.src;
23 }
24
25 RollOverImage.prototype.onMouseOut = function(event) {
26 this.element.src = this.imgOut.src;
27 }
28
29 RollOverImage.PageLoad = function (event) {
30 var images = document.getElementsByTagName('img');
31
32 for(i = 0; i < images.length; i ++) {
33 var overSrc = images[i].getAttribute('oversrc');
34
35 if(overSrc != null)
36 new RollOverImage(images[i]);
37 }
38 }
39
40 window.attachEvent("onload", function(event) { RollOverImage.PageLoad(event); } ); |
| Вернуться к списку исходников в категории Общие вопросы программирования на ASP.NET |
|
|
|
 |
 |
 |
|
|