Ouverture image en popup avec CSS

Bonjour je voulais savoir si il etait possible d'ouvrir des images dans une popup (dont la taille change suivant la taille de l'image ) grace à une feuille de style ( car j'ai bcp de page internet) sinon je vais devoir placer du code javascript sur chaque page web que j'ai creer et cela va me demander un temps énorme
J'attend vos réponses Merci
Alas

Salut Alas et bienvenue sur le forum,

Les feuilles de styles sont faites pour la mise en forme générale et non pour les comportements dynamiques (petite exception avec :hover)

Donc si tu veux faire une popup (ce que je ne te conseille pas du tout pour des raisons d'accessibilité et de courtoisie envers tes visiteurs), tu devras utiliser un langage dynamique fait pour ça : JavaScript.
Par contre, rien ne t'empêche d'avoir ton code JS sur une page séparée, ce qui va t'éviter de le recopier sur chaque page.

Bonjour merci pour votre réponse j'en étais presque sur que cela était impossible ( maintenant c'est confirmé ) maintenant ma question est differente, si je met le code javascript sur une page externe comment je fais pour inclure cette page dans une page HTML simple ??? Merci
Alas

alas a écrit :
Si je met le code javascript sur une page externe comment je fais pour inclure cette page dans une page HTML simple

Voilà les infos officielles

Exemple :

<script type="text/javascript" src="script.js"></script>

Une question me paraît bien plus importante : sais-tu que tu es sur un forum qui prône la conception web aux normes et accessible ?

Dans ce cas, pourrais-tu préciser quelle est l'utilité de ce popup (qui va à l'encontre de toute notion d'accessibilité ?)

Je suis d'accord sur le fait que employer des popup n'est pas très accessible mais je cherche une solution pour rendre un projet plus "joli", mon projet comporte beaucoup de page web avec des photos à présenter donc je fais un lien HTML simple pour ouvir mes photos
(<a href=maphoto.jpg target=_blank>..... ) c'est pour cela que j'essaie de trouver des autres solutions pour ouvrir mes images dans une fenêtre qui s'adapte à la taille de mes images
Je suis ouvert a toutes solutions voila !!!

Alas

Le problème avec cette solution est que les personnes qui naviguent sans JavaScript ne pourront pas consulter tes photos...

Voici un lien qui parle de popups accessibles:
http://www.alistapart.com/articles/popuplinks/

Popup ou target blank, le problème est le même

Le visiteur doit avoir le choix de ses actions et ne pas être dérouté par des liens qui s'ouvrent partout sans qu'il le sache. Le webmaster ne doit pas faire des sites pour lui mais pour ses visiteurs, laisser libre le visiteur et ne pas imposer de nouvelle fenêtre, surtout quand il n'a rien demandé !

Autre chose avec les popups :
- javascript n'est pas présent chez 10% des internautes
- de plus en plus de navigateurs proposent des anti-popups intégrés (heureusement)

Voici un petit débat sur la question :
http://www.publishtogether.com/pompeurs/TargetBlank

Et une méthode sur Alsa :
http://css.alsacreations.com/Tutoriels-JavaScript/liens-externes-nouvelle-fenetre
Modifié par Raphael (23 May 2005 - 11:11)

OK bah merci beaucoup pour vos réponses je vais travailler sur la question !!!

Bonjour,

je fais un lien HTML simple pour ouvir mes photos
(<a href=maphoto.jpg target=_blank>..... ) 
c'est pour cela que j'essaie de trouver des autres solutions pour ouvrir 
mes images dans une fenêtre qui s'adapte à la taille de mes images

J'ai fait un script qui ouvre le lien image dans un calque de la page avec redimentionnement de l'image en fin de chargement.
http://moncastel.9online.fr/gimg/gimg.htm

Merci ca marche vraiment bien et c'est exactement ce que je cherchais !!! j'pensais pas que l'on pouvait faire ca !!! encore merci !!

chmel a écrit :
Bonjour,
J'ai fait un script qui ouvre le lien image dans un calque de la page avec redimentionnement de l'image en fin de chargement.
http://moncastel.9online.fr/gimg/gimg.htm

Excellent !
Vraiment très ingénieux ! (dommage que les titres soient illisibles, par contre)

Rebonjour

Raphael a écrit :

a écrit :
dommage que les titres soient illisibles,

Le style du titre est inclus dans le js ligne 7 :

cursor:move;background-color:maroon;line-height:18px;
color:white;font-size:12px;padding:0 20px 0 .5em;font-family:cursive;

a+

Bonjour chmel !.

Je trouve ton programme vraiment astucieux, sur mon site j'ai des galeries d'image,
des vignettes dans des cadres, qui s'ouvre après sur une grande image.
J'aurais voulu savoir, si ton programme pouvait être adapté pour mes galeries d'image, sans trop avoir changé de code.
Je te remercie par avance pour ta réponse.
Amicalement.http://ile.chrispat.free.fr/index.php
Julien.

<dl class="gallery">
      <dt><img src="erbaggio/erb01.jpg"alt="agrandir l'image"onclick="montre('erbaggio/erb1.jpg')" /></dt>
      <dt>Erbaggio 1</dt>
      <dd></dd>
    </dl>

/********?????***************************************/
/* GALERIE PHOTO  */
/***********************************************/
dl.gallery{
float:left;
border: 1px solid #000;
background-color: #93f;
width: 102px;
text-align: center;
padding: 10px;
margin: 1em;
}
.gallery dt { font-weight: bold; }

.gallery dt img
{
border: 1px solid #000;
width: 100px;
height: 100px;
}

.gallery dd
{
margin: 0;
padding: 0;
}

chmel a écrit :
Rebonjour

Raphael a écrit :
dommage que les titres soient illisibles,

Le style du titre est inclus dans le js ligne 7 :

a+
Non je parlais des titres de ta page générale : la police est vraiment difficile à lire

personnellement, jusqu'à peu (comprennez: jusqu'à ce que je m'intéresse enfin à l'accéssibilité), j'utilisais des popups pour afficher mes images...

depuis, sur les galeries de mon site perso, j'affiche les images dans une page faite pour, générée en php, avec un beau bouton "retour", pour que le visiteur revienne d'où il est venu.
c'est accessible, c'est joli (ça colle avec l'interface en place, du moins), et c'est popup-free...

pas forcément besoin de popup à tout prix. rarement, en fait.

Julien2B a écrit :
Bonjour chmel !.
J'aurais voulu savoir, si ton programme pouvait être adapté pour
mes galeries d'image, sans trop avoir changé de code.

<img src="erbaggio/erb01.jpg"alt="agrandir l'image" 
onclick="montre('erbaggio/erb1.jpg')" />

Je me suis peut-être mal exprimé sur ma page :
http://moncastel.9online.fr/gimg/gimg.htm

mais il suffit que tu mettes un lien classique à tes vignettes
comme si tu souhaitais ouvrir ta grande image dans
une nouvelle page HTML :

<a href="erbaggio/erb1.jpg" title="description de l'image" >
<img src="erbaggio/erb01.jpg"alt="agrandir l'image"()" /></a>

sans oublier l'accès au script dans le head

Lisarael a écrit :
personnellement, jusqu'à peu
(comprennez: jusqu'à ce que je m'intéresse enfin à l'accéssibilité),...

pas forcément besoin de popup à tout prix. rarement, en fait.

D'accord avec toi, mais là, il n'y a pas de pop-up, seulement du js automatique qui affiche l'image sans quitter la page. Aucun code js, à part l'accés au script externe ne viens salir le XHTML. L'aspect pop-up est familier du visiteur, qui trouvera sans explication supplémentaire comment déplacer ou cacher l'élément en "position:absolute" supperposé à sa page. Si c'est pas accéssible?