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

9 февраля 2012 в 10:21
Drupal7
Аватар пользователя Kevin99 Kevin99 0 11

Подскажите, почему не работает ни один вариант смены картинки при наведении мыши:

1 вариант
html
<a href="#" class="rollover"> </a>

css

A.rollover {
    background: url(images/sun1.png); /* Путь к файлу с исходным рисунком  */
    display: block; /* Рисунок как блочный элемент */
    width: 196px; /* Ширина рисунка */
    height: 183px; /* Высота рисунка */
   }
   A.rollover:hover {
    background: url(images/sun2.png); /* Путь к файлу с заменяемым рисунком  */
   }

2 вариант

html

<a href="1.html" class="rollover"></a>

css

A.rollover {
    background: url(images/mark.png); /* Путь к файлу с исходным  рисунком */
    display: block; /* Рисунок как блочный элемент */
    width: 151px; /* Ширина рисунка в пикселах */
    height: 40px; /* Высота рисунка */
   }
   A.rollover:hover {
    background-position: 0 -40px; /* Смещение фона */
   }

Комментарии

Аватар пользователя mamba mamba 0

значит дело в путях к картинке.
background: url(sun1.png); /* Путь к файлу с исходным рисунком */
сделай так и попробуй картинку положить в ту же папку где css файл лежит.

9 февраля 2012 в 16:23
Аватар пользователя oboroten oboroten 0
A.rollover {
    background: url(../images/mark.png); /* Путь к файлу с исходным  рисунком */
    display: block; /* Рисунок как блочный элемент */
    width: 151px; /* Ширина рисунка в пикселах */
    height: 40px; /* Высота рисунка */
   }
   A.rollover:hover {
    background-position: 0 -40px; /* Смещение фона */
   }<!--break-->

путь к картинке подправьте добавив вначале пути ../

9 февраля 2012 в 16:39
Аватар пользователя Kevin99 Kevin99 0

"mamba" wrote:
значит дело в путях к картинке.
background: url(sun1.png); /* Путь к файлу с исходным рисунком */
сделай так и попробуй картинку положить в ту же папку где css файл лежит.

Спасибо! Вы мне очень помогли. А то я намучился уже в поисках решения)

9 февраля 2012 в 16:47