C'est encore et toujours avec le javascript que l'on peut faire des merveilles ! Protéger ses images n'est pas facile sur le net. La seule solution efficace étant de ne pas les mettre en ligne. Inscrire quelque chose sur l'image est une autre bonne solution mais peu pratique.

Ensuite vient l'anti-clic droit mais comme son nom l'indique, le clic droit n'est plus fonctionnel et ça n'est pas top. L'anti-clic droit sur les seules images étant préférable (disponible sur ce blog).

Une autre alternative est de convertir les images en images de fond, ainsi, le clic droit sur celles-ci ne permet plus de sauvegarder l'image ou de l'ouvrir dans un nouvel onglet.

C'est l'objet de ce tuto qui va convertir automatiquement vos images en background-image. (Faites un clic droit sur l'image ci-contre ^^)

Pour fonctionner, il faut que le javascript soit activé sur votre compte. Pour en faire la demande, envoyez un mail au support Eklablog (vous pouvez cliquer sur le logo Eklablog en haut à droite de cet article; à droite du point d'interrogation)

Mise en place du script

Il vous suffit de placer le script ci-dessous dans un module simple HTML de l'un des menus.

<script type="text/javascript">// <![CDATA[ if(typeof(onJSFilesLoaded) != "object") onJSFilesLoaded = []; onJSFilesLoaded.push(function(){ var a =$$('.hide_img'); for (i=0;i<a.length;i++){ var mySecondElement = new Element('div.content_hide_img').wraps(a[i]); mySecondElement.setStyle('background-image','url('+a[i].getProperty('src')+')'); mySecondElement.setStyle('background-size','100%'); if (Browser.firefox) {mySecondElement.addEvent('contextmenu', function(){ return false; });} var tmp_img = new Image(); tmp_img.src=a[i].getProperty('src'); if (a[i].getProperty('width')) {real_width =a[i].getProperty('width')+'px'; } else { real_width = tmp_img.width; } if (a[i].getProperty('height')) {real_height=a[i].getProperty('height')+'px'; } else { real_height = tmp_img.height;} mySecondElement.setStyle('width',real_width); mySecondElement.setStyle('height',real_height); a[i].destroy(); } }); // ]]></script>

Utilisation

Pour les images que vous souhaitez convertir en image de fond, il suffit simplement de leur affecter la classe hide_img.

Par exemple, si le code HTML de votre image est le suivant:

<img src="http://data0.ek.la/newlook/mod_article48355404_501bfc508d601.jpg?7049" alt="Pour essai" />

Vous rajoutez class="hide_img" pour obtenir :

<img class="hide_img" src="http://data0.ek.la/newlook/mod_article48355404_501bfc508d601.jpg?7049" alt="Pour essai" />

Vous pouvez aussi affecter la classe hide_img à l'aide de l'éditeur de votre article. (Voir le paragraphe Application aux images de ce tuto)

Voilà, en 1 petite minute l'opération est terminée !