Comment imprimer une image à partir d'un code javascript?

Comment imprimer une image à partir d'un code javascript? - HTML/CSS - Programmation

Marsh Posté le 02-05-2002 à 14:33:53    

Salut les gars  
Je me pose cette question car je connais un code qui permet d'imprimer toute la page mais ce que j'aimerai c'est un code qui permet d'imprimer uniquement l'image (par un bouton ou en cliquant directement sur celle ci)
Merci d'avance si vous avez une solution.

Reply

Marsh Posté le 02-05-2002 à 14:33:53   

Reply

Marsh Posté le 02-05-2002 à 15:34:23    

up

Reply

Marsh Posté le 02-05-2002 à 16:57:16    

re up

Reply

Marsh Posté le 02-04-2003 à 21:34:05    


 
 :bounce:  
 
ça m'interesse aussi !

Reply

Marsh Posté le 02-04-2003 à 21:56:13    

Je sais qu'on peut le faire avec des frames
javascript:parent.frames['framedelimage'].window.print()
 
mais comment faire si on a un script avec des div ?
Est ce que ça s'applique aux divs ?
 :??:

Reply

Marsh Posté le 02-04-2003 à 23:00:03    

ben... méthode bourrin :
 

var maPageEnFolie = new String();
maPageEnFolie = document.body.innerHTML;
document.body.innerHTML = "<img src='toto.gif'>";
window.print();
document.body.innerHTML = maPageEnFolie;
maPageEnFolie = "";


 
 :ange:

Reply

Marsh Posté le 03-04-2003 à 16:16:03    

MagicBuzz a écrit :

ben... méthode bourrin :
 

var maPageEnFolie = new String();
maPageEnFolie = document.body.innerHTML;
document.body.innerHTML = "<img src='toto.gif'>";
window.print();
document.body.innerHTML = maPageEnFolie;
maPageEnFolie = "";


 
 :ange:  


 
et une méthode propre et respectueuse des normes y'a pas ?

Reply

Marsh Posté le 03-04-2003 à 16:43:49    

RaTo02 a écrit :


 
et une méthode propre et respectueuse des normes y'a pas ?


 
Si, un code XHTML parfaitement propre et formaté UNIQUEMENT avec des CSS, avec deux feuilles de style, une pour l'écran et l'autre pour l'imprimante dans laquelle seule l'image est visible.

Reply

Marsh Posté le 03-04-2003 à 16:55:22    

Sinon un window.open sur l'url de l'image, suivi d'un print pour cette même fenêtre, ça marche pas ? (j'y connais quasi rien en JS :D)

Reply

Marsh Posté le 03-04-2003 à 23:12:36    

Hermes le Messager a écrit :


 
Si, un code XHTML parfaitement propre et formaté UNIQUEMENT avec des CSS, avec deux feuilles de style, une pour l'écran et l'autre pour l'imprimante dans laquelle seule l'image est visible.
 


 
Oui, c'est ce que je pensais faire.  
Mettre un lien qui sur une page qui présente l'image, puis en cliquant sur ce lien, cela imprimerait une autre page sur laquelle il y aurait juste l'image, c'est possible ça non ?

Reply

Marsh Posté le 03-04-2003 à 23:12:36   

Reply

Marsh Posté le 05-04-2003 à 22:26:04    

Hermes le Messager a écrit :


 
Si, un code XHTML parfaitement propre et formaté UNIQUEMENT avec des CSS, avec deux feuilles de style, une pour l'écran et l'autre pour l'imprimante dans laquelle seule l'image est visible.
 


 
tu pourrais t'expliker un peu plus ?

Reply

Marsh Posté le 06-04-2003 à 11:24:01    

RaTo02 a écrit :


 
tu pourrais t'expliker un peu plus ?


 
J'ai trouvé un lien qui explique comment faire avec 2 feuilles de style.
Mon probleme est le suivant :
j'ai une page qui propose 2 plans differents, et je souhaiterai que l'utilisateur puisse les imprimer séparement.
Si j'utilise la technique avec 2 feuilles de style, je vois pas trop comment je vais pouvoir faire, pour que ça imprime les plans séparement. ( il y aura 1 lien pour imprimer chaque plan, donc 2 liens  )
 :??:

Reply

Marsh Posté le 07-04-2003 à 12:32:40    

:bounce:

Reply

Marsh Posté le 07-04-2003 à 14:08:59    

RaTo02 a écrit :

tu pourrais t'expliker un peu plus ?


Ben il s'agit de faire en sorte que tous les élément soient cachés sauf celui de l'image.
 
Donc la feuille de style dédiée à l'impression pourra ressembler à ça :
 

* {
  display: none;
}
 
img#monImage {
  display: inline;
}


 
Le tag <img> de l'image en question doit avoir un id="monImage"
 
A essayer.
 
Voir la FAQ pour voir comment déclarer une feuille de style pour l'impression.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 07-04-2003 à 19:11:30    

gm_superstar a écrit :


Ben il s'agit de faire en sorte que tous les élément soient cachés sauf celui de l'image.
 
Donc la feuille de style dédiée à l'impression pourra ressembler à ça :
 

* {
  display: none;
}
 
img#monImage {
  display: inline;
}


 
Le tag <img> de l'image en question doit avoir un id="monImage"
 
A essayer.
 
Voir la FAQ pour voir comment déclarer une feuille de style pour l'impression.


 
Oui mais si sur la page j'ai deux images que je veux faire imprimer.
Sur la page, y'a deux plans de 2 villes différentes, et y'a 2 liens, 1 qui propose d'imprimer le plan de la ville1 et l'autre le plan de la ville2.
 
Le truc c'est que j'ai l'impression qu'avec les css, je peux que soit imprimer un plan et pas l'autre, soit imprimer les deux.
 
 :heink:

Reply

Marsh Posté le 07-04-2003 à 20:35:36    

Bah si tu veux plusieurs images, tu remplace id="monImage" par class="imagesAImprimer" puis :
 

img.imagesAImprimer {
 display: inline;
}


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 07-04-2003 à 22:27:57    

gm_superstar a écrit :

Bah si tu veux plusieurs images, tu remplace id="monImage" par class="imagesAImprimer" puis :
 

img.imagesAImprimer {
 display: inline;
}




 
Bon j'ai essayé ça :
ma feuille de style print.css :

* {
 display: none;
}
 
a.imprimer {
 display: inline;
}


 
Dans le head de ma page :
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
 
et dans le body les 2 liens :
 
<a href="javascript:window.print()" class="imprimer" title="Imprimer le plan">Imprimer le plan >></a>
(pour le 1er plan)
 
<a href="javascript:window.print()" class="imprimer" title="Imprimer le plan">Imprimer le plan >></a>
(pour le 2eme plan)
 
Et ça me donne comme resultat quand je clik sur imprimer le plan, une feuille blanche avec juste l'entete de la page et la date d'impression.


Message édité par Profil supprimé le 07-04-2003 à 22:31:46
Reply

Marsh Posté le 07-04-2003 à 22:34:28    

Tu veux imprimer des liens ou des images ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 07-04-2003 à 22:36:09    

gm_superstar a écrit :

Tu veux imprimer des liens ou des images ?


 
Je veux imprimer des images en cliquant sur des liens

Reply

Marsh Posté le 07-04-2003 à 22:40:47    

Oups je crois que je viens voir une erreur de ma part lol
je dois mettre
 
img.imprimer dans print.css et class="imprimer" sur les 2 plans non ?
je viens de le faire mais ça ne marche toujours pas... :??:

Reply

Marsh Posté le 08-04-2003 à 09:53:51    

Tu peux poster le code (ou mieux une URL) de la page qui contient ces plans ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-04-2003 à 10:01:43    

gm_superstar a écrit :

Tu peux poster le code (ou mieux une URL) de la page qui contient ces plans ?


 
Ok :
http://www.ratopictures.com/intersport/contact.php

Reply

Marsh Posté le 08-04-2003 à 10:28:49    

Bon en fait c'est le  
 

* {
display: none;
}


 
qui foire. Effectivement ça efface tout mais on dirait qu'on ne peut redéfinir ensuite d'autres éléments.
 
Donc ce que tu devrais faire c'est effacer (avec display: none) tous les éléments que tu ne souhaites pas avoir à l'impression à l'expection des éléments qui contiennent les plans.
 


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-04-2003 à 13:05:02    

gm_superstar, est-ce que tu pourrai jetter un coup d'oeil à ce que j'ai fais ?
 
Je comprends pas pkoi il n'imprime pas mes images, est-ce que c'est parce que ce sont des gifs animés ?  :??:  :??:

Reply

Marsh Posté le 08-04-2003 à 13:07:07    

Heu et tu as fait quoi comme changement :??:


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-04-2003 à 13:28:34    

Ca marche là on dirait. Avec Mozilla et IE6, quand je fais l'aperçu, j'ai les plans et les adresses.
 
Sinon, pour info tu peux réunir les éléments qui partagent la même propriété :
 
.menu-top,
.menu-left,
.logo-site {
display: none
}
 
etc...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-04-2003 à 13:38:22    

L'aperçu a l'air bon oui, mais quand je fais un test d'impression, ben ça ne m'imprime pas les images, ça m'imprime le cadre de l'image (pke g mis un border solid black) et à l'interieur ça m'imprime le "alt" de l'image, cad y'a ecris magasin.
 :??:

Reply

Marsh Posté le 08-04-2003 à 16:09:34    


 
et chezmoiçamarchepas.com...  :whistle:


Message édité par Profil supprimé le 08-04-2003 à 16:53:53
Reply

Marsh Posté le 08-04-2003 à 17:46:46    

Tu as essayé avec un autre ordinateur ? Ou une autre imprimante ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-04-2003 à 17:56:30    

gm_superstar a écrit :

Tu as essayé avec un autre ordinateur ? Ou une autre imprimante ?


 
Je viens de lancer l'impression par IE 6 et effectivement ça marche, pourquoi mozilla me fait-il n'importe quoi alors ?
 :heink:

Reply

Marsh Posté le 08-04-2003 à 18:09:35    

Tu as quel Mozilla ? Avec Moz 1.3 ça marche chez moi.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-04-2003 à 18:17:29    

gm_superstar a écrit :

Tu as quel Mozilla ? Avec Moz 1.3 ça marche chez moi.


 
1.2.1
 
C'est possible que ce soit la version effectivement...:sweat:  
Donc le problème est réglé !
Merci à tous  
 :hello:  
 
(va falloir ke je mette momo a jour  :D  )

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed