Накладываем вотермарк на изображения
Скрипты
Накладываем вотермарк на изображения
Представленный скрипт позволит накладывать на выбранные вами изображения любой вотермарк (Watermark). В качестве вотермарка может выступать любое ваше изображение. Вотермарк будет накладываться автоматически, и после установки скрипта вам не придется накладывать их на изображения вручную.
Для начала, обзаводитесь вотермарком. Для этого вам потребуется фотошоп или еще что нибудь в этом роде. Когда рисунок вотермарка будет готов, можно продолжать.
Для всех изображений, к которым вы хотите прикрепить вотермарк, нужно прописать класс wmImage. Для примера:
Как только с изображениями закончено, нужно будет к странице подключить jQuery.
ВНИМАНИЕ! Если у вас сайт на UCOZ, то подключать jQuery не нужно!
jQuery подключаем следующим кодом, который нужно написать в разделе HEAD:
После этого, пишем следующий код после тега <BODY>:
WMWater='http://szenprogs.ru/scripts/watermark/wat.gif';
WMOpacity=0.6;
WMClass='wmImage';
WMPosX='98%';
WMPosY='98%';
</script>
<script type="text/javascript" src="http://szenprogs.ru/scripts/watermark/watermark.js"></script>
Теперь разберем параметры скрипта наложения вотермарка на изображения:
- WMWater - ссылка на файл вотермарка, который будет накладываться на изображения.
- WMOpacity - уровень прозрачности вотермарка. Значение в промежутке от 0 до 1, где 0 - полная прозрачность, а 1 - полная непрозрачность.
- WMClass - класс изображений, на которые будет накладываться вотермарк.
- WMPosX - положение вотермарка на изображении по горизонтали. Значение может быть как в процентах, так и в пикселах. Для размещения вотермарка по центру изображения задаем значение 'auto'.
- WMPosY - положение вотермарка на изображении по вертикали. Значение может быть как в процентах, так и в пикселах. Для размещения вотермарка по центру изображения задаем значение 'auto'.
Если вы все проделали правильно, то скрипт заработает сразу. Пример, как всегда, на странице.
Удачи в свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Накладываем вотермарк на изображения
Скрипты
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 15961 |
| Рейтинг: | 4.4/40 |
| Дата добавления: | 2010-02-21 17:19, Воскресенье |
| Добавил: | Szen |
| Теги: | jquery, вотермарк, Watermark |
Рекомендуем
Дополнительно к Накладываем вотермарк на изображения
Мини-форум
| № 0 | 2010-02-21 17:19 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Накладываем вотермарк на изображения". |
| Гость |
| № 1 | 2010-02-26 18:06 |
den47 | Szen, а скажи пожалуйста,вот он вотермак накладывает,как и делая в фотошопе,или просто по верх идет,и при сохранении картинки его не будет? и да,есть пару вопросов по другим скриптам,где можно задать? |
| Денис |
| № 2 | 2010-02-26 21:45 |
Szen | den47, скрипт полностью накрывает существующее изображение прозрачным гифом с вотермарком на фоне. Если кто-нибудь попытается сохранить картинку стандартным образом - он сохранит только прозрачный гиф. По другим скриптам вопросы принимаются на странице с этим скриптом. |
| Szen · WWW |
| № 3 | 2010-02-26 21:57 |
| den47 | я пробовал сделать как описано,но что-то не получается,ещё раз сейчас попробую поставить |
| Денис |
| № 4 | 2010-02-26 22:33 |
| Szen | Если не получится - оставьте ссылку на место, где скрипт повесили. |
| Szen · WWW |
| № 5 | 2010-05-09 15:43 |
Andreshka | Уважаемый автор,скажите пожалуйста,как сделать чтоб и сама картинка на которую накладывают вотермак не была прозрачной и чтоб вотермак не был прозрачным? |
| Алтунин Андрей Алексеевич · WWW |
| № 6 | 2010-05-09 15:47 |
| Andreshka | или хотяьы как сделать вотермак не прозрачным |
| Алтунин Андрей Алексеевич · WWW |
| № 7 | 2010-05-09 17:15 |
| Andreshka | И ещё,я сделал это в новостях сайта на скриншот,а в фотоальбом не получается. Можите ли вы сделать также только для фотоальбома? чтоб можно было разные вотермаки на разные картинки загружать,заранее благодарен |
| Алтунин Андрей Алексеевич · WWW |
| № 8 | 2010-05-09 17:29 |
| Szen | Andreshka, для того, чтобы вотермарк не был прозрачным нужно задать переменную в скрипте следующим образом: Code WMOpacity=1; По поводу разных вотермарков - это реализовать врядли получится. Но, на всякий случай, засветите адрес вашего фотоальбома. я посмотрю, что можно сделать. |
| Szen · WWW |
| № 9 | 2010-05-09 18:22 |
| Andreshka | А можете весь скрипт дать с непрозрачным вотермаком?А зачем адрес альбома засвечивать? Там всё как обычно... Я думаю нужно сделать доп поле - это будет ссыль на вотермак и как то дальше это всё растянуть... |
| Алтунин Андрей Алексеевич · WWW |
| № 10 | 2010-05-09 18:25 |
| Andreshka | Попробуйте написать скрипт для фотоальбома,буду признателен если у вас выйдет толк |
| Алтунин Андрей Алексеевич · WWW |
