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

Скрипты

Рисунок Накладываем вотермарк на изображения
Накладываем вотермарк на изображения Накладываем вотермарк на изображения
оценка: 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
Категория:Скрипты
Просмотрено:13295
Рейтинг: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:

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

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



Онлайн всего: 11
Гостей: 8
Пользователей: 3

SergeyDut, oi_bogidanov1965, PetrDut
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz