Changing image on hover
The problem I am facing is that when I hover around the menu item, the image to be displayed on hover is displayed at the back of the old image. Moreover, the hover background image displayed is very small in width and height. Please help out. Thanks
yes. You could go with plain javascript but jquery will be easier. You’ll be able to map efficiently your effects, actions, and so on. With css you would only look for things bordering hacks but menu and navigation end to be much more than just images on hover.
10 Answers 10
As previously stated, no need for a JS solution.
Another way of doing it is by loading both images and hiding/showing them with the :hover event. Something like this:
.image_off, #home:hover .image_on < display:none >.image_on, #home:hover .image_off
Here is a js/jquery solution
//should go inside your tag function onHover() < $("#menuImg").attr('src', 'images/aboutR.png'); >function offHover() < $("#menuImg").attr('src', 'images/about.png'); >Place this code just before the closing body tag,
place the class home in the img tag. Done. Works perfectly.
#menu < width: 400px; height: 142px; margin-left: 353px; margin-top: -70px; padding-bottom: 16px; >#menu:hover 
(Image names changed for my convenience making the page.)
Remove the img tag, and set the width and height of #home (and any other menu item) to the width and height of the images.
Also, set the content to whatever the alt of the image would be (for accessibility purposes), and then set the text-indent property so it’s moved offpage.
Currently, when you hover, it’s changing the background image, but the img tag is on top, and it always will be.
Even if I am specifying the width and height, the background is displayed just for the text written inside a tag
you could do a:hover img which would get rid of the img, idk about size issue bc you didnt specify the sizes. if i were you i’d either ditch the img element, use it as background-image for a element, then change it on :hover. or if you want the img element, use the clip property following the same principles as above
Instead of display: none it should be visibility: hidden in order to preserve the size of the box since his width and height aren’t explicitly given.
You’re calling twice, once in the html and once in the css. I suggest deleting the html and strictly using css background image. You don’t need the z-index either.
you need to use position rule while using a z-index rule. Try adding position:relative where you used z-index .
are you just trying to make a simple image rollover? without seeing a working example i can’t make out exactly what you’re trying to do, but image rollovers are simple to do with CSS sprites, no jquery needed and this makes for a much more bulletproof website. it also makes your website respond faster because the default and over state images are the same image, no preload code necessary.
if you need a mapped image (rather than a full swap out) this can be accomplished with a background image, a container div and png-24 graphics (javascript required to make png-24s work in IE6, but who cares about supporting IE6 anymore anyway?).
a good way to change out nav images without resorting to javascript is by using the background-position property, like so:
// define your container element #nav-home < margin: 20px 5px; height: 15px; width: 40px; >// use a descendant selector to style the tag #nav-home a < background-image: url("/images/buttons-nav.gif"); display: block; // THIS IS VERY IMPORTANT!! background-position: 0 0; // the first number is horizontal placement, the second is vertical placement. at 0 0 it is positioned from the top left corner height: 15px; >// this is where you change the position of the background for the hover state #nav-home a:hover < background-position: -20px 0; //this moved it 20px to the right > and your html code would look like this:
your image would actually contain BOTH on and off states, like this: http://www.w3schools.com/css/img_navsprites_hover.gif then all you are doing is moving the image to one side to show the :hover state. (code example at http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav). you are basically making a window with a container div, then only showing a portion of the actual background image.
also, stay away from using :hover on anything but an tag as not all browsers support use of :hover on block level elements.
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
Заменить одну картинку на другую при наведении на неё курсора мыши.
Решение
Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но в большинстве случаев вполне достаточно и CSS.
Псевдокласс :hover
Вначале разберём, как делается собственно сам эффект. Для этой цели используется псевдокласс :hover , он добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже :hover работает только со ссылками, тогда как другие браузеры понимают :hover и для других элементов. Так что для универсальности придётся помещать изображение внутрь контейнера . Сам рисунок добавляется и меняется с помощью стилевого свойства background . Алгоритм действий следующий.
- Готовятся два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания.
- Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевое свойство background со значением url(URI) , здесь URI — путь к графическому файлу.
- Присоединяем псевдокласс к селектору A и снова включаем свойство background , но в качестве значения указываем замещающее изображение.
- Чтобы ссылка была по размеру картинки, её следует превратить в блочный элемент с помощью свойства display со значением block , а также задать высоту и ширину ссылки.
На рис. 1 приведены два изображения: исходное (рис. 1а) и замещающее (рис. 1б).
а 
б
Рис. 1. Картинки для создания эффекта перекатывания
Остаётся собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к атрибуту href тега .
Пример 1. Использование псевдокласса :hover
HTML5 CSS 2.1 IE Cr Op Sa Fx
Приведённый способ хотя и прост в реализации, но имеет определённый недостаток. Поскольку второй рисунок загружается только при наведении курсора на ссылку, то отображение картинки происходит с некоторой паузой. Для устранения этой задержки можно использовать не два изображения, а лишь одно.
Эффект перекатывания с одним рисунком
Казалось бы имеется противоречие, ведь эффект перекатывания состоит в замене одного рисунка на другой, как же тогда обойтись одной картинкой? На самом деле изображений будет два (рис. 2), но храниться они будут в одном графическом файле.
Рис. 2. Изображение с двумя картинками
Смена одного рисунка на другой происходит сдвигом изображения по вертикали за счёт использования универсального свойства background или background-position , как показано в примере 2.
Пример 2. Изменение положения рисунка
HTML5 CSS 2.1 IE Cr Op Sa Fx
Для селектора A устанавливается фоновое изображение через свойство background , ширина ( width ) совпадает с рисунком, а высота (свойство height ) равна половине высоты изображения. В итоге первоначально должна отображаться зеленая вкладка целиком.
При наведении на ссылку фон смещается вверх на половину высоты картинки (40 пикселов) с помощью background-position и становится видна оранжевая вкладка.
Как заменить изображение при наведении на него курсора? CSS
Многие из Вас ещё, независимо от знаний вёрстки и программирования, сталкивались с
заменой изображения при наведении на него. Самый частый пример — наведение курсора мыши на кнопку. В результате картинка менялась, возможно даже в размерах и форме. В данной статье я покажу как можно заменить изображение, изменить его размер при наведении на него, используя только CSS.
 | На будущее, рекомендую использовать именно такой метод, так как пользуясь средствами JS Вы рискуете попасть на пользователя, у которого он отключен в настройках браузера, в результате чего человек может не увидеть каких-либо деталей или не понять смысла задумки. |
Что будем использовать? Нам достаточно псевдоэлемента hover и свойства background. Из файлов это сам html файл и изображение.
В реализации всё просто. Код состоит из двух частей:
1. html с нужным div
2. свойства css для div
.img background: url("image001.jpg") no-repeat; /* изображение по умолчанию */
height: 120px; /* высота изображения */
width: 120px; /* ширина изображения */
>
.img:hover background: url("image002.jpg") no-repeat; /* новое изображение */
border: 2px solid #f00; // Устанавливаем красную рамку
height: 120px; /* высота изображения */
width: 120px; /* ширина изображения */
> Теперь предлагаю рассмотреть занимательный и простой пример работы кода. При желании можно скачать и разобрать принцип работы у себя на компьютере.
Демонстрация Скачать исходники
Как вы видите на примере, изображение, указанное по умолчанию (то есть image001), появляется при загрузке страницы, а image002 только при наведении курсора на первое изображение.
| Внимание! Нужно обязательно указывать ширину и высоту блока, в противном случае div просто не отобразится. Также будьте внимательны с указанием точных размеров блока, так как изображение внутри не будет масштабировано, так как оно считается фоновым. Если размеры блока будут меньше, то и видна будет только часть изображения. |
Чаще всего используется именно такой способ смены изображения. Если хотите заменить изображение в других случаях, например, при клике, то использовать надо уже не hover , а active .
Да, существуют и другие способы заменить изображение: JS, библиотека jQuery, CSS3, но о них я напишу в статьях в соответствующих разделах.