при наведении меняешь стиль через img:hover {}

А так смотря какие там картинки, если их можно реализовать через CSS, то нету смысла их прорисовывать

dididima,

вот именно так и делаю, но в фф почему то книво работает, да и при этом надо иметь кучу картинок что не удобно, картинки обычные в jpg

Сообщение отредактировал mitzury - 24.10.2013, 13:18

Если я правильно понял, картинка стоит фоном?
Если так, то можно сделать спрайты, т.е. 2 картинки (те, которые будут меняться при наведении мышкой) совместить в одну. И при наведении через :hover {} менять не саму картинку, а background-position. Тогда не нужна будет куча картинок.
Например, в фоне должна быть картинка высотой 100px: делаем в фотошопе из двух 100-пиксельных картинок одну в 200px, поставив их друг над другом, и при наведении мышки смещаем ее на половину ее высоты, вот так:
div {
height: 100px;
background-image: url(такая-то картинка);
background-repeat: no-repeat;
background-position: 0 0;
}
div:hover {
background-position: 0 -100px;
}

Если и я правильно понял, есть одна картинка, и нужно сделать, чтобы при наведение показывалась другая

html


css


Сообщение отредактировал sdrc26 - 25.10.2013, 2:28

sdrc26,

попробовал ваш способ, неплохой.


Картинка одна, просто у картинки внизу должен быть текст, и полоска выделяющая этот текст и при наведении полоска должна меняться



вот если сделать что то вроде такого, то просто на кратинку будет наслаиваться вторая с полоской..
а можете подсказать координаты если картинка 320х215 ?

И как этот способ будет работать в браузерах различных?

Хм, немного не понял.
У вас текст и картинка или все на одной картинки, текст и т.п.?

Или же у вас просто текст и при наведение на него, должна открываться картинка как титл (мини обзор)
Или просто текст, который обведен/подчеркнут полоской, которая должна менять цвет при наведении на нее? если так, то вам тут даже картинка не нежна, решается все методом CSS



Откройте фотошоп, поставьте линейку, выберите вариант измерения в пикселях и разметкой картинки смотрите координаты =)



Способ который я указал, работает во всех популярных браузерах, без надобности создания под каждый своего класса

Сообщение отредактировал sdrc26 - 25.10.2013, 23:07

вам нужно что-то типа слайдера, что-бы текст менялся при наведение, скачайте исходники и посмотрите как там сделанно

Сообщение отредактировал WebKill - 26.10.2013, 0:20

Используйте jsfiddle.net для вставки примеров, всем будет значительно проще.

О, у меня заодно подобный вопрос. Как сделать так чтобы на всем сайте поверх контента пыла картинка полупрозрачная (например со словом ПРОДАЕТСЯ)?