Наложение вотермарка без всяких php
Наложение вотермарка без всяких php
Представленный скрипт позволит накладывать на все изображения в
каталоге файлов(к примеру) ваш вотермарк (Watermark). Для этого не нужен
php и платный хостинг. Радуемся и благодарим меня =) В качестве вотермарка может выступать любое ваше изображение. Вотермарк
будет накладываться автоматически, и после установки скрипта вам не
придется накладывать их на изображения вручную.
Для начала, обзаводитесь вотермарком. Для этого вам потребуется фотошоп или еще что нибудь в этом роде.Когда рисунок вотермарка будет готов, можно продолжать.
На заметку: Для всех изображений, к которым вы хотите прикрепить вотермарк, нужно прописать класс
wmImage. Для примера:
Code
<img class="wmImage" src="http:///ucodes.ru/thumb-0.jpg/" width="200" border="0">
Как только с изображениями закончено, нужно будет к странице подключить jQuery.
ВНИМАНИЕ! Если у вас сайт на UCOZ, то подключать jQuery не нужно! jQuery подключаем следующим кодом, который нужно написать в между <head> и </head>:
Code
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
После этого, пишем следующий код после тега :
Code
<script type="text/javascript">
WMWater='Ссылка на изображение вотермарка';
WMOpacity=0.6;
WMClass='wmImage';
WMPosX='98%';
WMPosY='98%';
</script>
<script type="text/javascript" src="Путь к скрипту ватермарка"></script>
Путь к скрипту вотермарка это вот что: Code
var WMOpacity;
if(WMOpacity==undefined) WMOpacity=0.6;
var WMPosX;
if(WMPosX==undefined) WMPosX='98%';
var WMPosY;
if(WMPosY==undefined) WMPosY='98%';
var WMWater;
if(WMWater==undefined) WMWater='Ссылка на изображение вотермарка';
var WMClass;
if(WMClass==undefined) WMClass='wmImage';
Watermark={
BaseUrl: 'http://szenprogs.ru/scripts/watermark/',
GetImgWidth: function(obj){
var i=new Number(0);
var s=$(obj).css('border-left-width');
i=Number(s.substr(0,s.length-2));
s=$(obj).css('border-right-width');
i+=Number(s.substr(0,s.length-2));
s=$(obj).css('padding-left');
i+=Number(s.substr(0,s.length-2));
s=$(obj).css('padding-right');
i+=Number(s.substr(0,s.length-2));
i+=$(obj).width();
s=i+'px';
return s;
},
GetImgHeight: function(obj){
var i=new Number(0);
var s=$(obj).css('border-top-width');
i=Number(s.substr(0,s.length-2));
s=$(obj).css('border-bottom-width');
i+=Number(s.substr(0,s.length-2));
s=$(obj).css('padding-top');
i+=Number(s.substr(0,s.length-2));
s=$(obj).css('padding-bottom');
i+=Number(s.substr(0,s.length-2));
i+=$(obj).height();
s=i+'px';
return s;
},
GetImgLeft: function(obj){
var s=$(obj).css('left');
return s;
},
GetImgTop: function(obj){
var s=$(obj).css('top');
return s;
},
Init: function(){
var i=0;
var s;
$('img.'+WMClass).each(function(){
s='<img id="WMImageId'+i+'" src="'+Watermark.BaseUrl+'tr.gif" border="0" class="wmWater" style="position:absolute;';
s+='background:url('+WMWater+') no-repeat scroll '+WMPosX+' '+WMPosY+';';
s+='width:'+Watermark.GetImgWidth(this)+';';
s+='height:'+Watermark.GetImgHeight(this)+';';
s+='left:'+Watermark.GetImgLeft(this)+';';
s+='top:'+Watermark.GetImgTop(this)+';';
s+='" onmouseover="$(\'#WMBlockId'+i+'\').stop().show(\'fast\');" onmouseout="$(\'#WMBlockId'+i+'\').hide(\'fast\');">';
s+='<div id="WMBlockId'+i+'" style="background:#eee;display:none;position:absolute;text-align:center;font-size:8pt;padding:3px 5px;top:'+Number($(this).offset().top+2)+'px;left:'+Number($(this).offset().left+2)+'px;" onmouseover="$(this).stop();"><a href="http://szenprogs.ru/blog/2010-02-21-80/" target="_blank" title="Get Watermark Script">Watermark<\/a><\/div>';
$(this).after(s);
$('#WMBlockId'+i).css('opacity',0.9);
i++;
});
$('img.wmWater').css('opacity',WMOpacity);
}
}
$(document).ready(function(){
Watermark.Init();
});
Данный код копируем,вставляем в текстовой документ,вставляем ссылку на
изображения вотермарка,далее нажимаем сохранить как,называем егои в
конце приписываем .js,выбираем как все файлы,и ставим кодировку на UTF8
Теперь разберем параметры скрипта наложения вотермарка на изображения: WMWater - ссылка на файл вотермарка, который будет накладываться на изображения.
WMOpacity - уровень прозрачности вотермарка. Значение в промежутке от 0 до 1, где 0 - полная прозрачность, а 1 - полная непрозрачность.
WMClass - класс изображений, на которые будет накладываться вотермарк.
WMPosX - положение вотермарка на изображении по горизонтали. Значение может быть как в процентах, так и в пикселах. Для размещения вотермарка по центру изображения задаем значение 'auto'.
WMPosY - положение вотермарка на изображении по вертикали. Значение может быть как в процентах, так и в пикселах. Для размещения вотермарка по центру изображения задаем значение 'auto'.
C вами был Andreshka , пользуйтесь на здоровье ! Все вопросы в коментах!