Appliquer un style CSS sur un Popup
Le
Dominique Ottello
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 vaut mieux ignorer où l'on est, et savoir qu'on l'ignore, que de se
croire avec confiance où l'on n'est pas. Jean Dominique Cassini.
Technologie aéronautique - http://ottello.net - Les anciens de Vilgénis
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 vaut mieux ignorer où l'on est, et savoir qu'on l'ignore, que de se
croire avec confiance où l'on n'est pas. Jean Dominique Cassini.
Technologie aéronautique - http://ottello.net - Les anciens de Vilgénis
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;
">
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>
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
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 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 :
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;">
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.
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)
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
Ça fonctionne « au poil » . J'ai même fait des essais en local avec
Javascript désactivé.
C'était déjà fait dans la fonction.
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 :
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
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;">
ça me parait tellement simple pourtant
(en tous cas bien plus facile que le php qui multiplie les fonctions
redondantes)
Pour la question des fenêtres :
création de code pour popups (date un peu ...)
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 :
--
Stéphane Moriaux avec/with iMac-intel
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