блог BlogGood.ru

Mouseover and Mouse out

We can use OnMouseover and OnMouseout events to trigger various functions or effects. We will try to learn the uses by some demos here.

OnMouseover and OnMouseout on a table row.

We can change the background color of a table row by using mouseover events. Same way we can change to different color or restore the original color by using mouseout event. Here is an example.

 
 
 this is table cell this is another  

Image changing onMouseOver & Out by JavaScript

We can use onMouseOver and onMouseOut events to swap images and create an image rollover navigational links. Using this when mouse is passed over the link we can display another image.

This is done by using two images. One image is displayed first as a hyper link and with the help of onMouseOut event the other image is displayed. Here are two images

Here is the demo of on Mouse Over and on Mouse out event on a image hyper link

Here is the code of the above demo

Using this technique a push button type image button can be developed. On button is first displayed and the second button with Push effect is displayed once the mouse is placed over it.

Using Multiple Images

Use different names for each image ( watch the name attribute of images displayed )

plus2net.com

Источник

HTML Image Hover Effects Using Onmouseover

This article shows a quick and easy way to add a hover effect to a graphic used for a link (anchor). The HTML anchor element, , is used to jump, i.e. link, to another web page or location. The hover HTML method used in this article is also called the mouse over effect, because it uses the images’s onmouseover event to manipulate the link’s graphic. For this hover effect example no cascading style sheets (CSS) are used.

What is a web page link in HTML?

As an example, to link to the home page of this website the HTML code would be:

It shows in the browser as a link like this:

How do I use an image for a link?

Instead of a simple text link the HTML img element can be used to replace the text. Set the HTML image src attribute to the image address (URL) or the path on the web server to the image:

In this case the link now shows as a home graphic:

How do I generated a HTML hover image effect?

The mouse over image effect uses a tiny bit of JavaScript on two mouse events, onmouseover and onmouseout. The image hover effects are activated as the events fire when the mouse moves over the graphic and then away from the graphic. Firstly two graphics are required for the effect, usually the same image in different colors. Here are the images used for this example:

The HTML hover image effect code sets the image src (for source) attribute to the correct graphic using the onmouseover and onmouseout events. This is the code:

With this code when the mouse hovers over the home image it turns green:

If the images used are button graphics then you can get button hover effects in a similar way:

Author: Daniel S. Fowler Published: 2016-12-28 Updated: 2017-01-01

Do you have a question or comment about this article?

(Alternatively, use the email address at the bottom of the web page.)

↓markdown↓ CMS is fast and simple. Build websites quickly and publish easily. For beginner to expert.

Free Android Projects and Samples:

Источник

2.10 Смена картинки через onMouseOver

Вспомним обработчики событий onMouseOver и onMouseOut. Мы уже делали нечто похожее — с помощью этих команд появлялся текст в строке состояния. Еще раз обратите внимание, что не требуются тэги . Обработчики событий onMouseOver и onMouseOut встраиваются в команду HTML . Скрипт:

Вы уже знаете о событиях достаточно, чтобы разобрать скрипт. Когда убираете курсор с картинки, появляется b.gif. Когда наводите на картинку, появляется а.gif.

Обратите внимание, что команда IMG связана с обработчиками onMouse в команде HREF через команду NAME=»pic1″. Не имеет значения, сколько изображений у вас на странице и в каком порядке они располагаются, если вы присвоили отдельное имя каждой нужной картинке.

• onMouseOver и onMouseOut различают регистр. Нельзя менять заглавные и строчные буквы.
• Так как необходимо ставить кавычки после onMouseOver= и onMouseOut=, название файла *.gif ставится в одинарные кавычки.
• document.pic1.src следует иерархии объектов. Document относится к объекту документ, a pic1 — это имя объекта изображение (имя можно придумать какое угодно). src (источник) — это свойство объекта изображение, которое указывает файл с картинкой.
• В этом примере onMouseOver меняет источник изображения на а.gif.
• ОnMouseOut заставляет объект изображение показывать b.gif.
• Имейте в виду, что для наилучшего эффекта картинки должны быть одинакового размера.

Рассмотренные выше команды приведены в примере 2.12, а результат выполнения на рис. 2.12.

Пример 2.12. Смена картинки

Портрет дальнего родственника

Источник

Картинка, меняющаяся при наведении мыши

Мне часто приходится сталкиваться с задачей, когда заказчик сайта требует, чтобы кнопка, например, «Заказать звонок» менялась цветом при наведении на нее мышки. Если вы столкнулись с такой задачей и не знаете, как ее решить, то вы попали на правильную страницу.

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

Как сделать меняющуюся картинку при наведении на нее мыши?

Для примера я буду использовать две картинки:

и картинка-кнопка после наведения на нее мыши « knopka-1-1.png »

Теперь залейте эти кнопки в папку « images », если папки нет, создайте. А мы переходим к коду.

Способ №1 – с помощью CSS

В HTML вставляете вот такой код между тегами :

В CSS вставляете вот этот код:

/* кнопка */ .knopka a < background:url(images/knopka-1.png) no-repeat; /* картинка 1 */ height:37px; /* высота картинки */ width:172px; /* ширина картинки */ display: block; /* отображаем картинку */ >/* кнопка при наведении мышки */ .knopka a:hover < background:url(images/knopka-1-1.png) no-repeat; /* картинка 2 */ >

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

Вот так будет выглядеть готовый код:

Результат посмотрите в конце статьи.

Способ №2 – с помощью javascript

Вот так будет выглядеть готовый код:

Можно было бы на этом закончить статью. Но буду чувствовать вину, если не договорю все до конца. Дело в том, что можно использовать одну картинку-кнопку, а с помощью css свойств сделать эффекты.

Для примера я буду использовать эту картинку:

Способ №3 – с помощью CSS. Эффект черно-белой кнопки

В HTML вставляете вот такой код между тегами :

В CSS вставляете вот этот код:

/* кнопка2 */ .knopka2 a < background:url(images/knopka-1.png) no-repeat; /* картинка 1 */ height:37px; /* высота картинки */ width:172px; /* ширина картинки */ display: block; /* отображаем картинку */ >/* кнопка при наведении мышки */ .knopka2 a:hover < -webkit-filter: grayscale(100%); /* Эффект «Черно-белой кнопки» */ >

Эффекты можете добавлять любые, посмотреть можете их здесь.

Источник