Créer un lien «imprimer»

Publié le par PêUR

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.

 

Publié dans Webdev

Pour être informé des derniers articles, inscrivez vous :

Commenter cet article

matt 15/02/2007 09:10

J'aurai besoin d'aide pour modifier le javascript de LightboxJS, pour pouvoir créer un bouton ou un lien IMPRIMER à coté du bouton ClOSE.
J'ai eut beau chercher sur le net, rien ne dit comment faire.
Merci.

PêUR 15/02/2007 19:42

Je ne m'aventure pas dans cette modification :)

matt 14/02/2007 15:45

Savez vous ou je pourrai trouver de l'aide car j'ai eut beau chercher sur le net, rien ne dit comment faire.
Merci
et bonne continuation

PêUR 14/02/2007 22:39

Faire quoi? Quelle est la question?

matt 12/02/2007 12:35

Bonjour,

Je vien de découvrir lighboxJS et je voulai savoir si on pouvai créer un lien IMPRIMER dans la lightbox a coté du bouton ClOSE.

Merci

PêUR 12/02/2007 20:38

Oui mais tu dois modifier le javascript. Bon courage!

pierre 09/10/2006 11:56

est qu'un peut créer un lien "aperçu avant l'impression " au lieu d'un lien "imprimer " ?

PêUR 09/10/2006 22:19

Pas aussi simplement... il faut passer, à ma connaissance, par activeX!!

Pierre 17/06/2006 11:25

ça a peu à voir avec cet article,
mais j'ai bricolé un truc pour changer l'apprance d'un article selon qu'on le regarde sur écran ou selon qu'on veut l'imprimer
(voir article:
"une équipe de foot pour la fête des pères"

est ce qu'il y aurait eu un moyen plus simple de faire celà dans le css ( c'est à dire remplacer une balise MARQUEE par des images fixes)

PêUR 01/07/2006 22:58

Si c'est toujours la même image tu peux en demandant dans ton CSS à ce que les marquee aient un background qui sera cette image. Sinon il faut ce tourner vers du DOM pour que les balises marquee soient transformées en balise image.