CSS Обработка изображений (затенение, высветление)

[digital_sword]

Здравствуйте! Вопрос:

Средствами css можно как-то затемнить, размыть изображение, как бы наставить на него белую полупрозрачную пленку и т.п.? Есть для этого какие-нибудь стили?

[Pavel_html]

Нельзя. Для этого надо использовать JavaScript.

[Иван Шумов]

http://absolvo.ru/2008-05-07/upravlenie-pr...shhyu-polzunka/

вот вам

[digital_sword]

У меня таблица изображений (3*4). Каждое изображение таблицы представляет собой уменьшенную копию большой картинки. (#gallery ul li a img {display:block; width:50px; height:50px; border:0;}).

Так вот, как с помощью чего-то сделать, чтобы эти маленькие картинки были высветлены, или размыты?

[Иван Шумов]

с помощью фотошопа или в php GD-lib

[digital_sword]

Прошел по ссылке.

В теге

пишу:

<script type="text/javascript">
function setOpacity(value) {
testObj.style.opacity = value/10;
testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
}
</script>

в

:

<img src="papka/15.jpg" onLoad="setOpacity(1)">

Не работает. Как вставлять этот скрипт? Что вместо testObj писать?

[strix]

Погуглите применение fading-эффекта - судя по всему именно этот эффект вас интересует.

Также как вариант, можно основное изображение сделать фоновым, а поверх накладывать прозрачный гиф/ и по наведению мыши менять на полупрозрачный пнг (в том числе с градиентом, нужным вам оттенком). При этом можно обойтись только css. Готовое решение, думаю, придумаете сами ))

А вот такие трюки, как размытие картинки - никак не выйдет

[digital_sword]

Нашел прозрачность:

<script type="text/javascript">
function setOpacity(obj, value) {
obj.style.opacity = value/10;
obj.style.filter = 'alpha(opacity=' + value*10 + ')';
}
</script>
...
<img src="papka/15.jpg" onLoad="setOpacity(this, 1)">

Вообще надо сделать так: http://florang.ru/323.jpg, исходник галереи беру здесь: http://www.cssplay.co.uk/menu/photo_not_so_simple. Запрозрачить получается, но нужно, чтобы при наведении на прозрачную маленькую картинку, большая появлялась непрозрачной. А галерея организована так, что при наведении на маленькую, она "перепрыгивает" влево, и становится большой

#gallery ul li a:hover b {position:absolute; left:-548px; top:0; width:548px; height:380px; text-align:center; background:#888; z-index:20;}

, и тоже прозрачной, а мне прозрачность большой картинки не нужна.

Как это можно сделать?

[Sotnikov]

Раз уже не важно Js это или нет, то лови там тебе еще и эффект при наведении...

http://www.tigir.com/opacity.htm

[digital_sword]

Раз уже не важно Js это или нет, то лови там тебе еще и эффект при наведении...

http://www.tigir.com/opacity.htm

То, что нужно! Спасибо! Взял именно CSS прозрачность оттуда. Хотя и JS там есть...