Накладываем вотермарк на изображения

Скрипты

Рисунок Накладываем вотермарк на изображения
Накладываем вотермарк на изображения Накладываем вотермарк на изображения
оценка: 4.4 из 5
оценок: 40, отзывов: 14

Представленный скрипт позволит накладывать на выбранные вами изображения любой вотермарк (Watermark). В качестве вотермарка может выступать любое ваше изображение. Вотермарк будет накладываться автоматически, и после установки скрипта вам не придется накладывать их на изображения вручную.

Для начала, обзаводитесь вотермарком. Для этого вам потребуется фотошоп или еще что нибудь в этом роде. Когда рисунок вотермарка будет готов, можно продолжать.

Для всех изображений, к которым вы хотите прикрепить вотермарк, нужно прописать класс wmImage. Для примера:

Code
<img class="wmImage" src="http://szenprogs.ru/images/lightbox/thumb-0.jpg" width="200" border="0">

Как только с изображениями закончено, нужно будет к странице подключить jQuery.
ВНИМАНИЕ! Если у вас сайт на UCOZ, то подключать jQuery не нужно!
jQuery подключаем следующим кодом, который нужно написать в разделе HEAD:

Code
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>

После этого, пишем следующий код после тега <BODY>:

Code
<script type="text/javascript">
  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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Накладываем вотермарк на изображения
Скрипты
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Скрипты
Просмотрено:13903
Рейтинг:4.4/40
Дата добавления:2010-02-21 17:19, Воскресенье
Добавил:Szen
Теги:jQuery, вотермарк, Watermark

Мини-форум

1-10 11-14
№ 02010-02-21 17:19
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Накладываем вотермарк на изображения".
Гость
№ 1
2010-02-26 18:06
den47
Аватар участника den47
Szen, а скажи пожалуйста,вот он вотермак накладывает,как и делая в фотошопе,или просто по верх идет,и при сохранении картинки его не будет? и да,есть пару вопросов по другим скриптам,где можно задать?
Денис
№ 2
2010-02-26 21:45
Szen
Аватар участника Szen
den47, скрипт полностью накрывает существующее изображение прозрачным гифом с вотермарком на фоне. Если кто-нибудь попытается сохранить картинку стандартным образом - он сохранит только прозрачный гиф.

По другим скриптам вопросы принимаются на странице с этим скриптом.

Szen · WWW
№ 3
2010-02-26 21:57
den47
Аватар участника den47
я пробовал сделать как описано,но что-то не получается,ещё раз сейчас попробую поставить
Денис
№ 4
2010-02-26 22:33
Szen
Аватар участника Szen
Если не получится - оставьте ссылку на место, где скрипт повесили.
Szen · WWW
№ 5
2010-05-09 15:43
Andreshka
Аватар участника Andreshka
Уважаемый автор,скажите пожалуйста,как сделать чтоб и сама картинка на которую накладывают вотермак не была прозрачной и чтоб вотермак не был прозрачным?
Алтунин Андрей Алексеевич · WWW
№ 6
2010-05-09 15:47
Andreshka
Аватар участника Andreshka
или хотяьы как сделать вотермак не прозрачным
Алтунин Андрей Алексеевич · WWW
№ 7
2010-05-09 17:15
Andreshka
Аватар участника Andreshka
И ещё,я сделал это в новостях сайта на скриншот,а в фотоальбом не получается. Можите ли вы сделать также только для фотоальбома? чтоб можно было разные вотермаки на разные картинки загружать,заранее благодарен
Алтунин Андрей Алексеевич · WWW
№ 8
2010-05-09 17:29
Szen
Аватар участника Szen
Andreshka, для того, чтобы вотермарк не был прозрачным нужно задать переменную в скрипте следующим образом:
Code
WMOpacity=1;

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

Szen · WWW
№ 9
2010-05-09 18:22
Andreshka
Аватар участника Andreshka
А можете весь скрипт дать с непрозрачным вотермаком?А зачем адрес альбома засвечивать? Там всё как обычно... Я думаю нужно сделать доп поле - это будет ссыль на вотермак и как то дальше это всё растянуть...
Алтунин Андрей Алексеевич · WWW
№ 10
2010-05-09 18:25
Andreshka
Аватар участника Andreshka
Попробуйте написать скрипт для фотоальбома,буду признателен если у вас выйдет толк
Алтунин Андрей Алексеевич · WWW
1-10 11-14
Учавствовать в обсуждении "Накладываем вотермарк на изображения" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Посетители
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Сколько сайтов у вас есть?
Всего ответов: 1839
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 1
Гостей: 1
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2018 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz