Засветление рисунка

[okunev2]

Ребята, а сделать так, чтобы не создавать рисунок с изображениями, нормальной картинкой и засветленной и этот код использовать:

.menu{
list-type-style:none;
}
.menu li,.menu a{
width:84px;
height:30px
}
.menu a{
float:left;
display:block;
background-repeat:no-repeat;
background-position: 0 0;
}
.menu a:hover{
background-position:0 -30px;
}

.menu .home{
background-image:url(images/button1.jpg);
}

А проще, как это сделать так чтобы было засветление рисунка, когда на него наводишь указатель мыши? Кажется это нужно делать на js, но нет под рукой примеров

[D.S.Denton]

<script language="javascript" type="text/javascript">

function change_img(id,img) {

document.getElementById(id).src = img;

}

примерно так...

[okunev2]

Нет, не понял, мне нужна функция js засвтления, а здесь просто смена рисунка!

[D.S.Denton]

а... тогда не подскажу...

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

нижняя - та самая что нужна нормальной/засветленной или затемненной

верхняя - по умолчанию полностью прозрачная гифка 1*1, при наведении заменяется на полупрозрачную (например http://d-library.info/static/img/trnsp.gif) 4*4, при отводе курсора обратно на полностью прозрачную.

т.е. добавляется две картинки суммой 0,3 кб и используются для всех изображений.

руки так и не дошли проверить насколько этот способ удобный

[yopopt]

А чем opacity не угодил?

[okunev2]

ни кто этого не реализововал?

[okunev2]

А чем opacity не угодил?

Первый раз слышу

[Vlad]

opacity - прозрачность в CSS. В смысле, при наведении на картинку, она становится полупрозрачной. Или как вариант полупрозрачным становится слой поверх рисунка.

[okunev2]

opacity - прозрачность в CSS. В смысле, при наведении на картинку, она становится полупрозрачной. Или как вариант полупрозрачным становится слой поверх рисунка.

А есть для моего случая пример?

[yopopt]

Прозрачность 50%:

a:hover{
 opacity:0.5; /* Для браузеров */
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* Для ие */
}

[okunev2]

Так? Это значит верхний рисунок просто будет прозрачным? А засветления не будет? Проще было бы чтобы рисунок в белую сторону осветлялся и усе, чтобы с двумя изображениями не париться!

[okunev2]

А примерчики есть у кого, чо не могу ничего на гуглить

[okunev2]

Ну запарился я, подскажите профи?

Как сделать так на css класс для чтобы было как на картинке:

тобишь слева рисунок, когда на него наводишь то происходит его изменения оттенка, это рисунок права, точно также?

Как можно сделать так чтобы при наведении на рисунок накладывалась поверх белая картинка или pixel белого цвета и рисунок приобретал такой оттенок? В ИЕ тоже охото чтобы работало, плиз добрые люди!

[okunev2]

Вот решение: http://www.tigir.com/opacity.htm

[okunev2]

Люди все то сделал вот только как индивидуально стилю дать имя, а именно тегу img:

a:hover img {
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
 -moz-opacity: 0.3;
 -khtml-opacity: 0.3;
 opacity: 0.3;
}

так как только в одном месте этот стиль нужно делать! А когда делаешь так a.img1:hover то этот стиль срабатывает только в Опере и Мозиле в ИЕ не пашет, видимо так hover не срабьатывает в ИЕ

Что делать?

[okunev2]

балин, размер блока надо было указать и усе работает в ИЕ тоже

a.img_opacity:hover {
 width: 188px;
 height: 138px;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
 -moz-opacity: 0.3;
 -khtml-opacity: 0.3;
 opacity: 0.3;
}