Изменение картинки при наведении на нее мыши

Изменение картинки при наведении на нее мыши

Рубрикатор блога

Отправить комментарий

Рубрикатор блога

Комментарии

Отправить комментарий

Похожий материал:

Иногда имеет смысл разнообразить страничку скромной динамикой
Некоторые разработчики используют флэш, но можно чудненько применить небольшой, но аккуратный скрипт.
Поместите в документе между

и следующий код функции скрипта:

Далее действия следующие:
Вариант, если картинка-ссылка:

1. «Подгружаем» ту картинку, которая будет появляться при навещении мыши:

2. Затем, в документе, где находится картинка, которую Вы хотите заменить при наведении на нее мышью – на другую, пишите:

                
                      ... какой-то Ваш код ...
                    
                      <a href="ВАШ URL"
                    
                       onMouseOver="ChangeImg('ImgName1','on1.gif')"
                    
                       onMouseOut="ChangeImg('ImgName1','off1.gif')">
                    
                       <img name="ImgName1" border="0"
                    
                       height="100" width="100"
                    
                       src="off.gif" alt="мышуй">a>
                    
                      ... какой-то Ваш код ...

3. Закрываем тело документа:

Если картинок несколько (допустим, меню), то:

1. «подгружаем»:

2. в документе добавляем только имена картинок и названия файлов:

                
                      ... какой-то Ваш код ...
                    
                      <a href="ВАШ URL"
                    
                       onMouseOver="ChangeImg('ImgName1','on1.gif')"
                    
                       onMouseOut="ChangeImg('ImgName1','off1.gif')">
                    
                       <img name="ImgName1" border="0"
                    
                       height="100" width="100"
                    
                       src="off1.gif" alt="мышуй">a>
                    
                      <a href="ВАШ URL"
                    
                       onMouseOver="ChangeImg('ImgName2','on2.gif')"
                    
                       onMouseOut="ChangeImg('ImgName2','off2.gif')">
                    
                       <img name="ImgName2" border="0"
                    
                       height="100" width="100"
                    
                       src="off2.gif" alt="мышуй">a>
                    
                      ...
                    
                      <a href="ВАШ URL"
                    
                       onMouseOver="ChangeImg('ImgNameN','onN.gif')"
                    
                       onMouseOut="ChangeImg('ImgNameN','offN.gif')">
                    
                       <img name="ImgNameN" border="0"
                    
                       height="100" width="100"
                    
                       src="offN.gif" alt="мышуй">a>
                    
                      ... какой-то Ваш код ...

3. Закрываем тело документа:

Аналогичные манипуляции производим, даже если «просто» картинка:

                
                      <body onload="preload('on1.gif')">
                    
                      ... какой-то Ваш код ...
                    
                      <img name="ImgName1" border="0"
                    
                       height="100" width="100"
                    
                       src="off1.gif" alt="мышуй"
                    
                       onMouseOver="ChangeImg('ImgName1','on1.gif')"
                    
                       onMouseOut="ChangeImg('ImgName1','off1.gif')">
                    
                      ... какой-то Ваш код ...
                    
                      body>

Пояснения:

onN.gif - картинка, которая появляется при наведении на offN.gif.

ImgNameN - имя картинки (необходимо, чтобы скрипт не перепутал что на что менять). Вы можете использовать сколько угодно картинок, только циферки и имена не забывайте добавлять.

onload в body нужен для того, чтобы картинки подгружались при загрузке страницы, а не при наведении мыши на картинку. Эффект-то нужен сразу

Источник http://www.annet.dn.ua/faq/js/piconmouse.shtml (там же можно посмотреть пример работы скрипта)
_________________

Ваша оценка: Пусто Средняя: 3.6 (5 votes)

JavaScript

Чт, 11/19/2009 - 14:31 — X3M-Slider

Блог пользователя X3M-Slider

Тема:

Оценка:

Комментарий: *

Адреса страниц и электронной почты автоматически преобразуются в ссылки.
Строки и параграфы переносятся автоматически.
You can enable syntax highlighting of source code with the following tags: , . Beside the tag style "" it is also possible to use "[foo]".


                    Image links with 'rel="lightbox"' in the  tag will appear in a Lightbox when clicked on.

                    Image links from G2 are formatted for use with Lightbox2
                    Image links with 'rel="lightshow"' in the  tag will appear in a Lightbox slideshow when clicked on.

                    Links to HTML content with 'rel="lightframe"' in the  tag will appear in a Lightbox when clicked on.

                    Links to video content with 'rel="lightvideo"' in the  tag will appear in a Lightbox when clicked on.

                    Links to inline or modal content with 'rel="lightmodal"' in the  tag will appear in a Lightbox when clicked on.


                  Подробнее о форматировании
 
                  
                    CAPTCHA
                    
                      Если вы человек, то тогда введите символы изображенные на картинке ниже
                    
  
                    
                      Какой код на картинке?: * 
                      
                        Введите символы, изображенные на картинке.


        
          Похожий материал:
          
            
              
                
                  Устраняем конфликт между разными версиями jquery. А так же как сделать что бы YoxView работал с новой версией jquery
                
                
                  lightBox эффект всплывающих фотографий для Ucoz
                
                
                  Как отключить отправку формы по нажатию enter?
                
                
                  jQuery lightBox plugin - lightBox эффект всплывающих фотографий
                
                
                  Ширина options select IE

Главная | Портфолио | Услуги | Контакты | Блог

Рубрикатор блога

CMS Drupal (полезности и секреты) (19)

Игры (34)

CMS Joomla (полезности и секреты) (79)

Бумажные модели (15)

CSS (10)

Flash (6)

HTML (9)

JavaScript (14)

MySQL (3)

PHP (12)

Железо (59)

История (13)

Лирика (38)

Личности (665)

Машины (7)

Мои путешествия (125)

Мотоциклы (18)

Моя библиотека (476)

0-9 (4)

А (6)

Б (14)

В (21)

Г (8)

Д (26)

Е (0)

Ж (1)

З (39)

И (7)

К (28)

Л (4)

М (35)

Н (7)

О (16)

П (29)

Р (1)

С (22)

Т (12)

У (4)

Ф (1)

Х (23)

Ц (2)

Ч (9)

Ш (3)

Щ (0)

Э (7)

Ю (0)

Я (2)

Разная всячина (117)

Фильмы (519)

Фотография (18)

Фотоподборки (597)

Юмор (34)

Изменение картинки при наведении на нее мыши

Иногда имеет смысл разнообразить страничку скромной динамикой
Некоторые разработчики используют флэш, но можно чудненько применить небольшой, но аккуратный скрипт.
Поместите в документе между
и следующий код функции скрипта:

Далее действия следующие:
Вариант, если картинка-ссылка:

1. «Подгружаем» ту картинку, которая будет появляться при навещении мыши:
.

2. Затем, в документе, где находится картинка, которую Вы хотите заменить при наведении на нее мышью – на другую, пишите:

... какой-то Ваш код ...

<a href="ВАШ URL"

onMouseOver="ChangeImg('ImgName1','on1.gif')"

onMouseOut="ChangeImg('ImgName1','off1.gif')">

<img name="ImgName1" border="0"

height="100" width="100"

src="off.gif" alt="мышуй">a>

... какой-то Ваш код ...

3. Закрываем тело документа:

Если картинок несколько (допустим, меню), то:

1. «подгружаем»:

2. в документе добавляем только имена картинок и названия файлов:

... какой-то Ваш код ...

<a href="ВАШ URL"

onMouseOver="ChangeImg('ImgName1','on1.gif')"

onMouseOut="ChangeImg('ImgName1','off1.gif')">

<img name="ImgName1" border="0"

height="100" width="100"

src="off1.gif" alt="мышуй">a>

<a href="ВАШ URL"

onMouseOver="ChangeImg('ImgName2','on2.gif')"

onMouseOut="ChangeImg('ImgName2','off2.gif')">

<img name="ImgName2" border="0"

height="100" width="100"

src="off2.gif" alt="мышуй">a>

...

<a href="ВАШ URL"

onMouseOver="ChangeImg('ImgNameN','onN.gif')"

onMouseOut="ChangeImg('ImgNameN','offN.gif')">

<img name="ImgNameN" border="0"

height="100" width="100"

src="offN.gif" alt="мышуй">a>

... какой-то Ваш код ...

3. Закрываем тело документа:

Аналогичные манипуляции производим, даже если «просто» картинка:

<body onload="preload('on1.gif')">

... какой-то Ваш код ...

<img name="ImgName1" border="0"

height="100" width="100"

src="off1.gif" alt="мышуй"

onMouseOver="ChangeImg('ImgName1','on1.gif')"

onMouseOut="ChangeImg('ImgName1','off1.gif')">

... какой-то Ваш код ...

body>

Пояснения:

onN.gif - картинка, которая появляется при наведении на offN.gif.

ImgNameN - имя картинки (необходимо, чтобы скрипт не перепутал что на что менять). Вы можете использовать сколько угодно картинок, только циферки и имена не забывайте добавлять.

onload в body нужен для того, чтобы картинки подгружались при загрузке страницы, а не при наведении мыши на картинку. Эффект-то нужен сразу

Источник http://www.annet.dn.ua/faq/js/piconmouse.shtml (там же можно посмотреть пример работы скрипта)
_________________

Ваша оценка: Пусто Средняя: 3.6 (5 votes)

JavaScript

Чт, 11/19/2009 - 14:31 — X3M-Slider

Блог пользователя X3M-Slider

Комментарии

Отправить комментарий

Тема:

Оценка:

Комментарий: *

Адреса страниц и электронной почты автоматически преобразуются в ссылки.

Строки и параграфы переносятся автоматически.

You can enable syntax highlighting of source code with the following tags: , . Beside the tag style "" it is also possible to use "[foo]".
Image links with 'rel="lightbox"' in the tag will appear in a Lightbox when clicked on. Image links from G2 are formatted for use with Lightbox2 Image links with 'rel="lightshow"' in the tag will appear in a Lightbox slideshow when clicked on. Links to HTML content with 'rel="lightframe"' in the tag will appear in a Lightbox when clicked on. Links to video content with 'rel="lightvideo"' in the tag will appear in a Lightbox when clicked on. Links to inline or modal content with 'rel="lightmodal"' in the tag will appear in a Lightbox when clicked on.
Подробнее о форматировании CAPTCHA Если вы человек, то тогда введите символы изображенные на картинке ниже Какой код на картинке?: * Введите символы, изображенные на картинке.
Похожий материал: Устраняем конфликт между разными версиями jquery. А так же как сделать что бы YoxView работал с новой версией jquery lightBox эффект всплывающих фотографий для Ucoz Как отключить отправку формы по нажатию enter? jQuery lightBox plugin - lightBox эффект всплывающих фотографий Ширина options select IE

Главная | Портфолио | Услуги | Контакты | Блог