Активные пользователи
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Наложение WaterMark'a без PHP!
Liga
Дата: Пятница, 14.12.2012, 02:14 | Сообщение # 1
Оффлайн
Администраторы
Регистрация: 25.07.2012
Сообщений: 33
Замечания:
IP: Скрытая информация
3
[blue]Представленный скрипт позволит накладывать на все изображения в каталоге файлов (к примеру) ваш вотермарк (Watermark). Для этого не нужен
php и платный хостинг.
В качестве вотермарка может выступать любое ваше изображение[/blue]

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

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

На заметку:
Для всех изображений, к которым вы хотите прикрепить вотермарк, нужно прописать класс wmImage. Для примера:
Code
<img class="wmImage" src="http:///youscripts.at.ua/0123.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>


После этого, пишем следующий код после тега <BODY>:
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!
Теперь разберем параметры скрипта наложения вотермарка на изображения:

[blue]WMWater - ссылка на файл вотермарка, который будет накладываться на изображения.
WMOpacity - уровень прозрачности вотермарка. Значение в промежутке от 0 до 1, где 0 - полная прозрачность, а 1 - полная непрозрачность.
WMClass - класс изображений, на которые будет накладываться вотермарк.
WMPosX
- положение вотермарка на изображении по горизонтали. Значение может быть как в процентах, так и в пикселах. Для размещения вотермарка по центру изображения задаем значение 'auto'.
WMPosY -
положение вотермарка на изображении по вертикали. Значение может быть как в процентах, так и в пикселах. Для размещения вотермарка по центру изображения задаем значение 'auto'.[/blue]
  • Страница 1 из 1
  • 1
Поиск:

Зарегистрироваться
Здравствуйте! Вы видите это сообщение так как вы не вошли на сайт под своим логином. Зарегистрируйтесь пожалуйста, и данное окно исчезнет.                                                                                              by
YouScripts
>