Francais

Pour utiliser Image Watermark vous devez, au minium, avoir... deux images. Celle à marquer, qui doit être présente dans un tag img dans votre code HTML, ainsi que le watermark, qui doit simplement être accessible publiquement. Voici le code HTML de base, avant d'implémenter image Watermark:

English

In order to use Image Watermark, you must have, at least, two images. The one you want to mark, who must be in an img tag in your HTML code, and the image you want to use as a watermark must be available to public. Here's the basic HTML code, before implementing Image Watermark: 


    <html>
    <head></head>
    <body>
        
        <img src="img/base_image.jpg" id="watermarked" />
        
    </body>
    </html>
Francais

Il faut aussi vous assurez d'avoir JQuery, ainsi que JQuery UI (avec au minimum les modules draggable, resizable, et slider si vous utilisez l'option opacitySlider). Le fichier css de JQuery UI sert uniquement à afficher l'icone de redimentionnement au bas à droite du watermark. Ah et le fichier de Image Watermark aussi :p

English

You also want to make sure to have JQuery and JQuery UI (at least with the draggable and resizable modules, as long with the slider module if you use the opacitySlider option). The CSS file of JQuery UI is used only to display the resize icon at the lower right of the watermark image. Oh, and also the Image Watermark file too :p 


    <html>
    <head>
        
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />	
        <script type="text/javascript" src="js/jquery-1.4.2.min.js">
        <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
        <script type="text/javascript" src="js/jquery-watermarker-0.2.js">
        
    </head>
    <body>
        <img src="img/base_image.jpg" id="watermarked" />
    </body>
    </html>
Francais

Maintenant créer des champs input (généralement de type hidden) pour contenir les valeurs des propriétés du watermark. Normalement, ces valeurs seront envoyé à l'aide d'un formulaire.

English

Now create the input fields (usually of type hidden) to contain the values of the watermark properties. Usually, thoses values will be sent using a form. 


    <html>
    <head>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />	
        <script type="text/javascript" src="js/jquery-1.4.2.min.js">
        <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
        <script type="text/javascript" src="js/jquery-watermarker-0.2.js">
    </head>
    <body>
        <img src="img/base_image.jpg" id="watermarked" />
        
        <form method="post" action="phpScriptToMergeBothImage.php">
            <input type="hidden" id="x" name="x" value="" />
            <input type="hidden" id="y" name="y" value="" />
            <input type="hidden" id="w" name="w" value="" />
            <input type="hidden" id="h" name="h" value="" />
            <input type="hidden" id="a" name="a" value="" />

            <input type="submit" name="save" value="Ok >" />
        </form>
        
    </body>
    </html>
Francais

Finalement, il faut lancer Image Watermark, et définir quels champs doivent contenir les valeurs. Nous avons aussi ajouté 2 styles CSS.

English

Finally, we must lauch Image Watermark, and define what fields will contain the values. We've also added 2 CSS styles. 


    <html>
    <head>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />	
        <script type="text/javascript" src="js/jquery-1.4.2.min.js">
        <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
        <script type="text/javascript" src="js/jquery-watermarker-0.2.js">
        
        <script type="text/javascript">
        //<!--
            $().ready(function(){
                $('#watermarked').Watermarker({
                    watermark_img:      'img/watermark.png',
                    onChange:           showCoords
                });
            });
            function showCoords(c)
            {
                $('#x').val(c.x);
                $('#y').val(c.y);
                $('#w').val(c.w);
                $('#h').val(c.h);
            };
        //-->
        </script>
        <style type="text/css">
            div.watermark
            {
                border:1px dashed #000;
            }
            img.watermark:hover{
                cursor:move;
            }
        </style>
        
    </head>
    <body>
        <img src="img/base_image.jpg" id="watermarked" />

        <form method="post" action="phpScriptToMergeBothImage.php">
            <input type="hidden" id="x" name="x" value="" />
            <input type="hidden" id="y" name="y" value="" />
            <input type="hidden" id="w" name="w" value="" />
            <input type="hidden" id="h" name="h" value="" />

            <input type="submit" name="save" value="Ok >" />
        </form>
    </body>
    </html>
watermark_img
Type:
String
Default:
Obligatoire/Mandatory
Francais

Défini l'emplacement de l'image à utiliser comme watermark.

English

Define the location of the image to use as watermark. 


    $().ready(function(){
        $('#watermarked').Watermarker({
            watermark_img:      'img/watermark.png'
        });
    });
opacity
Type:
float
Default:
1.00
Francais

Défini le taux d'opacité par défaut du watermark.
Interval accepté: de 0.00 à 1.00 (Par défaut: 1.0)

English

Define the opacity level of the watermark.
Valid range: from 0.00 to 1.00 (By default: 1.0) 


    $().ready(function(){
        $('#watermarked').Watermarker({
            opacity:      0.5
        });
    });
opacitySlider
Type:
Element
Default:
null
Francais

Défini l'élément dans lequel placer le slider d'opacité.

English

Define the element to place the slider into. 


    $().ready(function(){
        $('#watermarked').Watermarker({
            opacitySlider:      $('#sliderdiv')
        });
    });
position
Type:
String
Default:
'center'
Francais

Si aucune position spécifique n'est défini avec les options x et y, l'option position indique où placer le watermark par rapport à l'image principale. Les valeurs autorisées sont:

  • topleft
  • topcenter
  • topright
  • centerleft
  • centercenter
  • center (raccourci pour centercenter)
  • centerright
  • bottomleft
  • bottomcenter
  • bottomright
English

If no specific position is defined with the x and y options, the position option tell where to place the watermark in the main image. The autorised values are:

  • topleft
  • topcenter
  • topright
  • centerleft
  • centercenter
  • center (raccourci pour centercenter)
  • centerright
  • bottomleft
  • bottomcenter
  • bottomright

 

    $().ready(function(){
        $('#watermarked').Watermarker({
            position:      'bottomright'
        });
    });
x & y
Type:
Integer
Default:
null
Francais

Défini une position spécifique pour le watermark. Les options x et y ont priorité sur l'option position.

English

Define a specific position for the watermark. The x and y option are having priority over the position option. 


    $().ready(function(){
        $('#watermarked').Watermarker({
            x:      150,
            y:      100
        });
    });
w & h
Type:
String, Integer
Default:
'100%'
Francais

Défini une une dimension spécifique pour le watermark.

English

Define a specific dimension for the watermark. 


    $().ready(function(){
        $('#watermarked').Watermarker({
            w:      '100%',
            h:      '56px'
        });
    });
onChange
Type:
Francais

Cet évènement est déclenché à chaque fois qu'un changement surviens avec le watermark.

English

This event is triggered each time a change occur with the watermark. 


    $().ready(function(){
        $('#watermarked').Watermarker({
            onChange:           showCoords
        });
    });
    
    function showCoords(c)
    {
        $('#inputx').val(c.x);
        $('#inputy').val(c.y);
        $('#inputw').val(c.w);
        $('#inputh').val(c.h);
        $('#inputa').val(c.opacity);
    };