Appliquer un style CSS sur un Popup

Le 20/05/12 19:40, Dominique Ottello a écrit :

Bonjour,

Pour afficher, dans une nouvelle fenêtre, des images de "grande"
dimension à partir d'un clic sur une vignette, j'utilise (Exemple) :

<a href='#'
onclick="window.open('../images/b26vilgenis.jpg','PopupPhoto','toolbar=no,
location=no,directories=no,status=yes,scrollbars=auto,resizable=no,copyhistory=no,
menuBar=no,widthq0,heightT5,topP,leftP'); return(false)">
<img src="../images/b26vilgenis_200.jpg" alt="B26 Vilgénis"></a>

Le nom du popup est toujours le même : "PopupPhoto"

Je voudrais appliquer un style à cette fenêtre, mais je n'y arrive pas
en essayant id ou class dans un fichier CSS, comme :

#PopupPhoto {différentes valeurs... }
ou
.PopupPhoto {différentes valeurs... }

Comment faut-il procéder ?

Il faut utiliser une fonction (au lieu de tout écrire dans le onclick)

ou bien, par exemple, mais sans aucune garantie


<a href='../images/b26vilgenis.jpg' onclick="
PopupPhoto = window.open(this.href, 'PopupPhoto',
'toolbar=no,location=no,directories=no,status=yes,scrollbars=auto,resizable=no,copyhistory=no,menuBar=no,widthq0,heightT5,topP,leftP');
PopupPhoto.document.images[0].style.border='outset 5px brown';
return false;"><img src="../images/b26vilgenis_200.jpg" alt="B26
Vilgénis"></a>

ou :

<a href='../images/b26vilgenis.jpg' onclick="
PopupPhoto = window.open(this.href, 'PopupPhoto',
'toolbar=no,location=no,directories=no,status=yes,scrollbars=auto,resizable=no,copyhistory=no,menuBar=no,widthq0,heightT5,topP,leftP');
var s = document.createElement('style');
s.innerHTML = 'img { border: outset 5px brown';
PopupPhoto.document.body.appendChild(s);
return false;
"><img src="../images/b26vilgenis_200.jpg" alt="B26 Vilgénis"></a>





Sinon, tenter en

1) créant un fichier 'http://monSite/visu.html'
comportant les styles et une image factice (ou inexistante)
de la taille désirée

2) insérant dans le head du(des) fichier(s) qui contient les vignettes
le javascript :

function visu(quoi) {
var at = 'toolbar=no,location=no,directories=no,status=yes,'+
'scrollbars=auto,resizable=no,copyhistory=no,'+
'menuBar=no,widthq0,heightT5,topP,leftP';
if(typeof V == 'undefined' || !V)
V = window.open('http://monSite/visu.html','V',at)
V.document.images[0].src = quoi.href; // afficher la bonne image
V.focus(); // popup devant (onglet ouvert)
return false; // bloque le lien "normal"
}


3) employant la fonction comme ceci :

<a href="../images/b26vilgenis.jpg" onclick="return visu(this);">
<img src="../images/b26vilgenis_200.jpg" title="B26 Vilgénis" alt="diapo">
</a>


Pas testé !
(normalement, sauf peut-être les styles, ça doit fonctionner)
(avantage : si pas de JS on peut quand même voir la grande vue)
--
Stéphane Moriaux avec/with iMac-intel

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> écrivait :

Pas testé !
(normalement, sauf peut-être les styles, ça doit fonctionner)
(avantage : si pas de JS on peut quand même voir la grande vue)

Bonjour et merci.

Je vais regarder ça de beaucoup plus près !
Pour le moment, j'ai « pallié » le problème en ouvrant une nouvelle
fenêtre en php, du style :

<a href='#' onclick="window.open('<?php echo
DOSSIER.'grande_image.php?photo='.$photo ?>',
'PopupPhoto','toolbar=no,location=no,directories=no,status=yes,scrollbars=auto,
resizable=no,copyhistory=no,menuBar=no,widthu6,heightT5,topP,leftP');return(false)"><img
src="../images/b26vilgenis_200.jpg" alt="B26 Vilgénis"></a>

Car, cette « fonctionnalité » doit être intégrée à une de mes fonctions
PHP d'affichage d'image, ce qui en fin de compte donne :

affiche_img($vignette,"class","Texte
Alt",$largeur,$hauteur,$positionnement,"lien éventuel",1,"Texte sous
photo","class","Titre","class","map éventuelle","Crédit
Photo",true,$grande_photo);

Il va falloir que j'achète un bouquin Javascript...
--
Aujourd'hui, l'idéal du progrès est remplacé par l'idéal de l'innovation :
il ne s'agit pas que ce soit mieux, il s'agit seulement que ce soit nouveau,
même si c'est pire qu'avant et cela de toute évidence. Montherlant
Technologie aéronautique - http://ottello.net - Les anciens de Vilgénis

Le 21/05/12 17:29, Dominique Ottello a écrit :

SAM<stephanemoriaux.NoAdmin@wanadoo.fr.invalid> écrivait :

Pas testé !
(normalement, sauf peut-être les styles, ça doit fonctionner)
(avantage : si pas de JS on peut quand même voir la grande vue)

Bonjour et merci.

Je vais regarder ça de beaucoup plus près !

Le truc pour avoir la grande vue si pas de JS est d'en mettre l'adresse
dans le href du lien.
Du html normal quoi :

<a href="<?php echo DOSSIER.'grande_image.php?photo='.$photo ?>"

et de bloquer le lien html par JavaScript pour ceux qui l'ont activé

onclick="return false"

au passage, on fait ouvrir le popup avec l'image appelée par le lien :

onclick="laVue=window.open(this.href,'laVue','widthu6,heightT5,topP,leftP');
laVue.focus();
return false;">

Pour le moment, j'ai « pallié » le problème en ouvrant une nouvelle
fenêtre en php, du style :

<a href='#' onclick="window.open('<?php echo
DOSSIER.'grande_image.php?photo='.$photo ?>',
'PopupPhoto','toolbar=no,location=no,directories=no,status=yes,scrollbars=auto,
resizable=no,copyhistory=no,menuBar=no,widthu6,heightT5,topP,leftP');return(false)"><img
src="../images/b26vilgenis_200.jpg" alt="B26 Vilgénis"></a>

Car, cette « fonctionnalité » doit être intégrée à une de mes fonctions
PHP d'affichage d'image, ce qui en fin de compte donne :

affiche_img($vignette,"class","Texte Alt",

mieux vaut en faire un "Texte Title" ;-)

Le alt est pour remplacer l'image si absente (dire ce que c'est, un
bouton une diapo, ..., éventuellement avec un nom si besoin) ou pour
expliquer sa présence à ceux qui utilisent des navigateurs textuels (les
mal voyants avec ou sans vocalisateur) sans images.

$largeur,$hauteur,$positionnement,"lien éventuel",1,"Texte sous
photo","class","Titre","class","map éventuelle","Crédit
Photo",true,$grande_photo);

Oui, bon, ben là, c'est moi qui n'y comprend rien !
M'a l'air bien compliquée cette fonction php !
Y a pas de base de donnée pour ces photos ?
pour y faire un foreach sur le contenu de la fiche-photo choisie ?
(et/ou carrément toute la table des photos)

Il va falloir que j'achète un bouquin Javascript...

Pour compliquer la copie de la grande vue, on peut la mettre en
background du popup

onclick="laVue=window.open('','laVue','widthw0,heightV0,topP,leftP');
// si le lien a un attribut title, on peut le transmettre au popup :
laVue.document.title = this.title;
// ou, si c'est l'image qui a un title :
// laVue.document.title = this.getElementsByTagName('img')[0].title;
laVue.document.body.style.background = 'url(' + this.href +
') norepeat center center';
laVue.focus();
return false;">

sauf à ce que la photo ne soit pas de dimension ≤ 756/545 !!!

--
Stéphane Moriaux avec/with iMac-intel

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> écrivait :

Le truc pour avoir la grande vue si pas de JS est d'en mettre l'adresse
dans le href du lien.
Du html normal quoi :

<a href="<?php echo DOSSIER.'grande_image.php?photo='.$photo ?>"

et de bloquer le lien html par JavaScript pour ceux qui l'ont activé

onclick="return false"

au passage, on fait ouvrir le popup avec l'image appelée par le lien :

onclick="laVue=window.open(this.href,'laVue','widthu6,heightT5,topP,leftP');
laVue.focus();
return false;">

Ça fonctionne « au poil » . J'ai même fait des essais en local avec
Javascript désactivé.

mieux vaut en faire un "Texte Title" ;-)

C'était déjà fait dans la fonction.

> $largeur,$hauteur,$positionnement,"lien éventuel",1,"Texte sous
> photo","class","Titre","class","map éventuelle","Crédit
> Photo",true,$grande_photo);

Oui, bon, ben là, c'est moi qui n'y comprend rien !

Cette fonction me sert à afficher *toutes* les images de mon site, dans
n'importe quelle page. C'est pour ça qu'il y a de nombreux paramètres.
Dans la plupart des cas :

affiche_img($vignette,"class","Texte Title",$largeur,$hauteur,$positionnement);

suffit, les autres paramètres étant pris par défaut.

Je commence, doucement, à appréhender Javascript.
Bien qu'ayant commencé à programmer (Avec des interrupteurs) en 1971, et
utilisé plusieurs langages, j'en suis resté à la programmation linéaire
et procédurale et j'ai un peu de mal à assimiler le concept "objet"
auquel s'apparente Javascript.

J'ai appris :

- Le parallélogramme est un quadrilatère dont les côtés sont parallèles
deux à deux.

et non pas :
- On dit qu'un quadruplet (A, B, C, D) est un parallélogramme quand deux
points occupant des places de même parité sont homologues dans la
symétrie qui échange les deux autres.

Merci pour tous tes conseils.
--
Aujourd'hui, l'idéal du progrès est remplacé par l'idéal de l'innovation :
il ne s'agit pas que ce soit mieux, il s'agit seulement que ce soit nouveau,
même si c'est pire qu'avant et cela de toute évidence. Montherlant
Technologie aéronautique - http://ottello.net - Les anciens de Vilgénis

Le 22/05/12 11:11, Dominique Ottello a écrit :

SAM<stephanemoriaux.NoAdmin@wanadoo.fr.invalid> écrivait :

onclick="laVue=window.open(this.href,'laVue','widthu6,heightT5,topP,leftP');
laVue.focus();
return false;">

Ça fonctionne « au poil » . J'ai même fait des essais en local avec
Javascript désactivé.

<a href="<?php echo DOSSIER.'grande_image.php?photo='.$photo ?>"
onclick="
// si variable laVue inconnue ou fenêtre fermée
if(typeof laVue == 'undefined ||
!laVue ||
laVue.closed)
// on déclare la variable et ouvre la fenêtre (vide)
laVue=window.open('','laVue','widthu6,heightT5,topP,leftP');
// on y adresse la cible de ce lien
laVue.location = this.href;
// si titre sur image on re-titre la fenêtre
var i = this.getElementsByTagName('img')[0];
if(i && i.title) laVue.document.title = i.title;
// on la repasse devant
laVue.focus();
// on annule le lien normal html
return false;">

Je commence, doucement, à appréhender Javascript.
j'ai un peu de mal à assimiler le concept "objet"

ça me parait tellement simple pourtant
(en tous cas bien plus facile que le php qui multiplie les fonctions
redondantes)

<http://fr.selfhtml.org/javascript/intro.htm>
<http://fr.selfhtml.org/javascript/langage/regles.htm>
<http://fr.selfhtml.org/javascript/objets/index.htm>
<http://fr.selfhtml.org/navigation/recherche/index.htm>

Pour la question des fenêtres :
<http://www.javascriptkit.com/jsref/window.shtml>
<http://fr.selfhtml.org/javascript/objets/window.htm>
création de code pour popups (date un peu ...)
<http://stephane.moriaux.pagesperso-orange.fr/internet/web_html/java/fenetr/les_popups.htm>


Nota :
de nos jours l'ouverture de fenêtres-popup est très mal vue
il vaut mieux utiliser des subterfuges avec ouverture dans la même fenêtre
voir : LiteBox : <http://www.doknowevil.net/litebox/>

--
Stéphane Moriaux avec/with iMac-intel

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> écrivait :

il vaut mieux utiliser des subterfuges avec ouverture dans la même fenêtre
voir : LiteBox : <http://www.doknowevil.net/litebox/>

Pas mal du tout Litebox !
Assez léger : 26kio js + css
Très facile à mettre en place, surtout vu comment est organisé la
génération de mes pages php.
Je crois bien que je vais adopter, d'autant plus que si Javascript est
désactivé, la « grande image » s'ouvrira quand même.
--
Un ordinateur résout des problèmes que nous n'aurions pas sans lui
Technique aéronautique : http://aviatechno.free.fr