VPF::наложение .png картинки на jpg через css

Reet

Дата 18.12.2009, 18:27 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 26
Регистрация: 27.7.2009

Репутация: нет
Всего: нет

подскажите как решить проблемку есть картинка картинка http://pics.kz/s1/10/1b/56/82/101b56822048...b8407abc9f2.jpg
и есть png приставка http://pics.kz/s4/fe/b6/84/00/feb68400c642...006507a48af.png
хочу сделать эффект чтоб при наведении мыши на первую картинку накладывалась вторая картинка .png
чтоб выглядело так http://pics.kz/s1/27/ea/e8/51/27eae851f4af...31eaafca203.jpg
подскажи те кто в курсе как реализовать данный пример

bars80080

Дата 18.12.2009, 18:41 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

если вопрос касается вёрстки, то две картинки можно наложить

1.

Код


<div class="con"><img src="pic1.png" /><img src="pic2.png" class="up" /></div>

Код


.con { position: relative; }
.up { position: absolute; left: 0px; top: 0px; }

Код


<div class="con"><img src="pic2.png" /></div>

Код


.con { background: url(pic1.png) no-repeat; }

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

Reet

Дата 18.12.2009, 18:48 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 26
Регистрация: 27.7.2009

Репутация: нет
Всего: нет

так нужно чтоб картинка png только на момент наведения мыши на картинку jpg а когда мышь убираеш что б png исчезала

bars80080

Дата 18.12.2009, 20:06 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

ну, это лучше на javascript делать, но и на css можно

Код


<div class="con"><img src="pic2.png" /></div>

Код


.con { background: url(pic1.png) no-repeat; width: 135px; height: 101px; }
.con img { display: none; }
.con:hover img { display: block; }

в ИЕ6 не работает

Reet

Дата 18.12.2009, 20:32 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 26
Регистрация: 27.7.2009

Репутация: нет
Всего: нет

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

Reet

Дата 18.12.2009, 21:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 26
Регистрация: 27.7.2009

Репутация: нет
Всего: нет

все спасибо сделал по другому на основе jquery.js-ver=1.3.2

bars80080

Дата 19.12.2009, 01:54 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Цитата(Reet @ 18.12.2009, 19:32

)

при загрузки страницы картинка не отображается

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

Another

Дата 18.3.2010, 06:17 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 232
Регистрация: 17.6.2006

Репутация: нет
Всего: -2

UP вопрос.
Аналогичный вопрос.
Как отписался bars80080 работает, но налаживается jpg под png, то-есть, в css нужно указывать в этом случае ту картинку, на которую будет налаживаться png. Если организовывать галерею то это неудобно, нужен иной способ. можно и при помощи JavaScript.
Кто-что может подсказать?

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »