Créer un lien «imprimer»

Vous avez toujours rêver qu'en appuyant sur un lien dans votre article, la fenêtre d'impression de votre navigateur s'ouvre. Ok, Ok, j'ai bossé pour vous ;-)

Sommaire:

Insérez le lien via l'éditeur
Insérez le lien via le code HTML
Donnez du style à votre lien
Quelques icones libres de droit

Imprimer l'article

Insérez le lien via l'éditeur

Les Over-blogueurs et les utilisateurs de FCKeditor peuvent s'affranchir de mettre leur nez dans le code HTML pour créer ce lien. Pour cela, en cours de rédaction de votre article, sélectionnez la phrase qui doit lancer l'impression, par exemple "Imprimer l'article" puis cliquez sur le bouton "créer / modifier lien" de la barre d'outils de l'éditeur. Dans la liste déroulante "Protocole" sélectionnez "<autre>" et dans le champs "URL", saisissez le code:

javascript:self.print()

Cliquez sur le bouton "OK" (cf. Figure 1)

Figure 1

Insérez le lien via le code HTML

Pour les autres utilisateurs, vous pouvez coder le lien en mode HTML de la manière suivante:

<a href="javascript:self.print()"> Imprimer l'article</a>

Donnez du style à votre lien

Vous pouvez donner du style à ce lien en créant des règles de style associées. Dans votre CSS, vous pouvez par exemple ajouter:

CSS

a.print {
    color: #c33;
    text-decoration: underline;
    background: url(image-imprimante.gif) left center no-repeat;
    padding-left: 20px;
}
a:hover.print {
    text-decoration: none;
}

Pour appliquer ce style, en édition dans votre article, vous pouvez:

• Par l'éditeur, faire un clique-droit sur le lien > sélectionner "Créer / modifier lien" > selectionner l'onglet "Avancé" et dans le champs "Classes de Feuilles de Style" rajouter print (cf. figure 2).

Classes de Feuilles de style
print             

Figure 2

• ou, en mode source, coder l'appel à la classe comme suit:

<a class="print" href="javascript:self.print()">Imprimer l'article</a>

Résultat:

Imprimer l'article

Quelques icones libres de droit

J'ai pensé à tout, voici quelques icones que vous pouvez utiliser pour donner du style à votre lien:

S'il vous plaît,  ne copiez/collez pas directement l'url de ces icones dans votre CSS. Si vous procédez ainsi, la bande passante du serveur sur lequel se trouve l'image va être fortement solicitée, vous allez avoir des soucis d'affichage et je serais dans l'obligation de déplacer l'image pour éviter ces hotlinks.

Pour les utiliser faite un clique-droit sur l'icone qui vous intéresse puis sélectionnez "enregistrez sous...". Et enregistre l'image sur votre ordinateur. Il ne vous reste plus qu'à uploader cette image dans votre espace de stockage.