Voilà j'ai toujours un peu délaissé le JS, car ce langage peux être
désactivé par l'utilisateur, donc j'avais tendance à tout faire en php et
css.
aujourd'hui je me rend compte que c'était une erreur car je souhaite faire
une petite galerie photo et le js est le plus approprié des langages, donc
je suis obligé de m'y remettre.
Oui, ça fonctionne ça avec IE ? <http://stephane.moriaux.pagesperso-orange.fr/truc/c35/>
-- sm
yoyo
SAM wrote:
SAM wrote:
Un grand spécialiste des galeries de photos (sans JS) : <http://www.cssplay.co.uk/menu/gallery.html>
c'est plutôt ça que j'avais tenté d'essayé de faire
Sauf que, normalement, il n'y a aucun JavaScript ;-)
Voici une version perso simplifiée (dont je ne sais ce qu'IE en fait) <http://stephane.moriaux.pagesperso-orange.fr/truc/galerie_1.htm>
Mais les grandes images n'y sont pas pré ni post chargées le roll-over déporté par méthode CSS y souffre des mêmes inconvénients qu'en JavaScript ... faut attendre la grande image en restant en survol sur la petite (pas évident comme mécanisme car pas dans les habitudes)
dommage je vais surement me rabbatre la-dessus si j'arrive pas a reproduire l'autre code!
SAM wrote:
SAM wrote:
Un grand spécialiste des galeries de photos (sans JS) :
<http://www.cssplay.co.uk/menu/gallery.html>
c'est plutôt ça que j'avais tenté d'essayé de faire
Sauf que, normalement, il n'y a aucun JavaScript ;-)
Voici une version perso simplifiée (dont je ne sais ce qu'IE en fait)
<http://stephane.moriaux.pagesperso-orange.fr/truc/galerie_1.htm>
Mais les grandes images n'y sont pas pré ni post chargées
le roll-over déporté par méthode CSS y souffre des mêmes inconvénients
qu'en JavaScript ... faut attendre la grande image en restant en survol
sur la petite (pas évident comme mécanisme car pas dans les habitudes)
dommage je vais surement me rabbatre la-dessus si j'arrive pas a reproduire
l'autre code!
Un grand spécialiste des galeries de photos (sans JS) : <http://www.cssplay.co.uk/menu/gallery.html>
c'est plutôt ça que j'avais tenté d'essayé de faire
Sauf que, normalement, il n'y a aucun JavaScript ;-)
Voici une version perso simplifiée (dont je ne sais ce qu'IE en fait) <http://stephane.moriaux.pagesperso-orange.fr/truc/galerie_1.htm>
Mais les grandes images n'y sont pas pré ni post chargées le roll-over déporté par méthode CSS y souffre des mêmes inconvénients qu'en JavaScript ... faut attendre la grande image en restant en survol sur la petite (pas évident comme mécanisme car pas dans les habitudes)
dommage je vais surement me rabbatre la-dessus si j'arrive pas a reproduire l'autre code!
SAM
dommage je vais surement me rabbatre la-dessus si j'arrive pas a reproduire l'autre code!
L'autre code ? Lequel ?
j'avais aussi ça dans mes stocks (mais ne sais ce qu'en fait IE) <http://stephane.moriaux.pagesperso-orange.fr/truc/c35/> avec le même problème (pas de pré-chargement)
Si on veut un pré-chargement (*) il suffit de remplacer chaque image 'vide.gif' par la bonne image à afficher et se passer de tous les styles P1 P2 ... Pn
La grande image ne sera pas centrée ... transformer le a:hover spam { display: table } et ajouter text-align: center; vertical-align: middle; à a span { blabla }
(*) un peu bêta à mon sens : ça fait charger toutes les grandes images, même celles qu'on ne désirera pas regarder.
-- sm
dommage je vais surement me rabbatre la-dessus si j'arrive pas a reproduire
l'autre code!
L'autre code ? Lequel ?
j'avais aussi ça dans mes stocks (mais ne sais ce qu'en fait IE)
<http://stephane.moriaux.pagesperso-orange.fr/truc/c35/>
avec le même problème (pas de pré-chargement)
Si on veut un pré-chargement (*) il suffit de remplacer chaque image
'vide.gif' par la bonne image à afficher
et se passer de tous les styles
P1 P2 ... Pn
La grande image ne sera pas centrée ...
transformer le
a:hover spam { display: table }
et ajouter
text-align: center; vertical-align: middle;
à
a span { blabla }
(*) un peu bêta à mon sens :
ça fait charger toutes les grandes images,
même celles qu'on ne désirera pas regarder.
dommage je vais surement me rabbatre la-dessus si j'arrive pas a reproduire l'autre code!
L'autre code ? Lequel ?
j'avais aussi ça dans mes stocks (mais ne sais ce qu'en fait IE) <http://stephane.moriaux.pagesperso-orange.fr/truc/c35/> avec le même problème (pas de pré-chargement)
Si on veut un pré-chargement (*) il suffit de remplacer chaque image 'vide.gif' par la bonne image à afficher et se passer de tous les styles P1 P2 ... Pn
La grande image ne sera pas centrée ... transformer le a:hover spam { display: table } et ajouter text-align: center; vertical-align: middle; à a span { blabla }
(*) un peu bêta à mon sens : ça fait charger toutes les grandes images, même celles qu'on ne désirera pas regarder.
-- sm
Pierre Goiffon
Bruno Desthuilliers wrote:
Si la recommandation HTML 4.01 est datée de décembre 1999, il reste qu'elle est la seule à être réellement utilisable aujourd'hui sur le Web ! Autrement dis, sur le Web hors HTML 4.01 Strict point de salut (pas de rendu mode standard)
C'est curieux, moi j'ai des rendus en mode respect des standards avec un doctype xhtml 1.0 strict...
Du Xhtml 1.0 Strict, valide ET bien formé ? Cad avec le prologue XML ? (et paf)
Pour mémoire sur le HTML vs XHTML, lire (j'ai particulièrement écris ce document parce que j'avais à répéter de très nombreuses fois ces arguments, au moins ils sont tous posés à froid sans en oublier) : http://pgoiffon.free.fr/info/inet/html_ou_xhtml.php
Pour en revenir au point de départ, un attribut name pour une image est très loin d'une "soupe de tags" : c'est parfaitement reconnu,
Oui. C'est aussi: - inutilisable comme sélecteur CSS - inutilisable avec getElementById
Et alors, ce n'est pas pour ça qu'il ne sert à rien ! Revenez au message initial de ASM (ou SAM ou SM ou...) (message-id: <4749afa7$0$25923$) : en quoi cet usage est "condamnable" ?
Bruno Desthuilliers wrote:
Si la recommandation HTML 4.01 est datée de décembre 1999, il reste
qu'elle est la seule à être réellement utilisable aujourd'hui sur le
Web ! Autrement dis, sur le Web hors HTML 4.01 Strict point de salut
(pas de rendu mode standard)
C'est curieux, moi j'ai des rendus en mode respect des standards avec un
doctype xhtml 1.0 strict...
Du Xhtml 1.0 Strict, valide ET bien formé ? Cad avec le prologue XML ?
(et paf)
Pour mémoire sur le HTML vs XHTML, lire (j'ai particulièrement écris ce
document parce que j'avais à répéter de très nombreuses fois ces
arguments, au moins ils sont tous posés à froid sans en oublier) :
http://pgoiffon.free.fr/info/inet/html_ou_xhtml.php
Pour en revenir au point de départ, un attribut name pour une image
est très loin d'une "soupe de tags" : c'est parfaitement reconnu,
Oui. C'est aussi:
- inutilisable comme sélecteur CSS
- inutilisable avec getElementById
Et alors, ce n'est pas pour ça qu'il ne sert à rien !
Revenez au message initial de ASM (ou SAM ou SM ou...) (message-id:
<4749afa7$0$25923$ba4acef3@news.orange.fr>) : en quoi cet usage est
"condamnable" ?
Si la recommandation HTML 4.01 est datée de décembre 1999, il reste qu'elle est la seule à être réellement utilisable aujourd'hui sur le Web ! Autrement dis, sur le Web hors HTML 4.01 Strict point de salut (pas de rendu mode standard)
C'est curieux, moi j'ai des rendus en mode respect des standards avec un doctype xhtml 1.0 strict...
Du Xhtml 1.0 Strict, valide ET bien formé ? Cad avec le prologue XML ? (et paf)
Pour mémoire sur le HTML vs XHTML, lire (j'ai particulièrement écris ce document parce que j'avais à répéter de très nombreuses fois ces arguments, au moins ils sont tous posés à froid sans en oublier) : http://pgoiffon.free.fr/info/inet/html_ou_xhtml.php
Pour en revenir au point de départ, un attribut name pour une image est très loin d'une "soupe de tags" : c'est parfaitement reconnu,
Oui. C'est aussi: - inutilisable comme sélecteur CSS - inutilisable avec getElementById
Et alors, ce n'est pas pour ça qu'il ne sert à rien ! Revenez au message initial de ASM (ou SAM ou SM ou...) (message-id: <4749afa7$0$25923$) : en quoi cet usage est "condamnable" ?
Pierre Goiffon
SAM wrote:
ça fonctionne ça avec IE ? <http://stephane.moriaux.pagesperso-orange.fr/truc/c35/>
Testé (très) rapidement sur IE6 Windows : le passage du curseur sur les photos ne produit absolument rien.
SAM wrote:
ça fonctionne ça avec IE ?
<http://stephane.moriaux.pagesperso-orange.fr/truc/c35/>
Testé (très) rapidement sur IE6 Windows : le passage du curseur sur les
photos ne produit absolument rien.
ça fonctionne ça avec IE ? <http://stephane.moriaux.pagesperso-orange.fr/truc/c35/>
Testé (très) rapidement sur IE6 Windows : le passage du curseur sur les photos ne produit absolument rien.
Bruno Desthuilliers
Bruno Desthuilliers wrote:
Si la recommandation HTML 4.01 est datée de décembre 1999, il reste qu'elle est la seule à être réellement utilisable aujourd'hui sur le Web ! Autrement dis, sur le Web hors HTML 4.01 Strict point de salut (pas de rendu mode standard)
C'est curieux, moi j'ai des rendus en mode respect des standards avec un doctype xhtml 1.0 strict...
Du Xhtml 1.0 Strict, valide ET bien formé ? Cad avec le prologue XML ? (et paf)
Je l'attendais !-)
Non, bien sûr, cette immonde bouse d'IE ne le supporte (bien sûr) pas et tu le sais aussi bien que moi.
(snip)
Pour en revenir au point de départ, un attribut name pour une image est très loin d'une "soupe de tags" : c'est parfaitement reconnu,
Oui. C'est aussi: - inutilisable comme sélecteur CSS - inutilisable avec getElementById
Et alors, ce n'est pas pour ça qu'il ne sert à rien !
A quoi sert-il donc ?
Revenez au message initial de ASM (ou SAM ou SM ou...) (message-id: <4749afa7$0$25923$) : en quoi cet usage est "condamnable" ?
Ai-je employé ce terme ?
Bruno Desthuilliers wrote:
Si la recommandation HTML 4.01 est datée de décembre 1999, il reste
qu'elle est la seule à être réellement utilisable aujourd'hui sur le
Web ! Autrement dis, sur le Web hors HTML 4.01 Strict point de salut
(pas de rendu mode standard)
C'est curieux, moi j'ai des rendus en mode respect des standards avec
un doctype xhtml 1.0 strict...
Du Xhtml 1.0 Strict, valide ET bien formé ? Cad avec le prologue XML ?
(et paf)
Je l'attendais !-)
Non, bien sûr, cette immonde bouse d'IE ne le supporte (bien sûr) pas et
tu le sais aussi bien que moi.
(snip)
Pour en revenir au point de départ, un attribut name pour une image
est très loin d'une "soupe de tags" : c'est parfaitement reconnu,
Oui. C'est aussi:
- inutilisable comme sélecteur CSS
- inutilisable avec getElementById
Et alors, ce n'est pas pour ça qu'il ne sert à rien !
A quoi sert-il donc ?
Revenez au message initial de ASM (ou SAM ou SM ou...) (message-id:
<4749afa7$0$25923$ba4acef3@news.orange.fr>) : en quoi cet usage est
"condamnable" ?
Si la recommandation HTML 4.01 est datée de décembre 1999, il reste qu'elle est la seule à être réellement utilisable aujourd'hui sur le Web ! Autrement dis, sur le Web hors HTML 4.01 Strict point de salut (pas de rendu mode standard)
C'est curieux, moi j'ai des rendus en mode respect des standards avec un doctype xhtml 1.0 strict...
Du Xhtml 1.0 Strict, valide ET bien formé ? Cad avec le prologue XML ? (et paf)
Je l'attendais !-)
Non, bien sûr, cette immonde bouse d'IE ne le supporte (bien sûr) pas et tu le sais aussi bien que moi.
(snip)
Pour en revenir au point de départ, un attribut name pour une image est très loin d'une "soupe de tags" : c'est parfaitement reconnu,
Oui. C'est aussi: - inutilisable comme sélecteur CSS - inutilisable avec getElementById
Et alors, ce n'est pas pour ça qu'il ne sert à rien !
A quoi sert-il donc ?
Revenez au message initial de ASM (ou SAM ou SM ou...) (message-id: <4749afa7$0$25923$) : en quoi cet usage est "condamnable" ?
Ai-je employé ce terme ?
yoyo
SAM wrote:
dommage je vais surement me rabbatre la-dessus si j'arrive pas a reproduire l'autre code!
L'autre code ? Lequel ?
celui là que je trouve excellent, mais voilà j'arrive pas à comprendre le mécanisme
SAM wrote:
dommage je vais surement me rabbatre la-dessus si j'arrive pas a
reproduire l'autre code!
L'autre code ? Lequel ?
celui là que je trouve excellent, mais voilà j'arrive pas à comprendre le
mécanisme
dommage je vais surement me rabbatre la-dessus si j'arrive pas a reproduire l'autre code!
L'autre code ? Lequel ?
celui là que je trouve excellent, mais voilà j'arrive pas à comprendre le mécanisme
SAM
SAM wrote:
ça fonctionne ça avec IE ? <http://stephane.moriaux.pagesperso-orange.fr/truc/c35/>
Testé (très) rapidement sur IE6 Windows : le passage du curseur sur les photos ne produit absolument rien.
Ha! il faut attendre un peu sur une imagette, le temps que la grande image se charge ... si on fait "rapidement" pour sûr ça ne peut fonctionner (tous brouteurs confondus). Bien entendu l'attente est fonction de la vitesse de sa connexion (et du bon vouloir du serveur).
C'est un roll-over déporté *sans* pré-chargement des grandes vues et en CSS au lieu de JS. Il se fait donc par survol de l'imagette au lieu de clic.
Ce n'est absolument pas conforme aux habitudes puisque non réactif au clic. Bien que avec Firefox (et peut-être IE7?) ce pourrait l'être via les CSS. Bon, voilà c'est ajouté.
Le pré ou post chargement des grandes vues n'est pas prévu pour ne pas surcharger inutilement le chargement de la page elle-même. -- sm
SAM wrote:
ça fonctionne ça avec IE ?
<http://stephane.moriaux.pagesperso-orange.fr/truc/c35/>
Testé (très) rapidement sur IE6 Windows : le passage du curseur sur les
photos ne produit absolument rien.
Ha! il faut attendre un peu sur une imagette, le temps que la grande
image se charge ... si on fait "rapidement" pour sûr ça ne peut
fonctionner (tous brouteurs confondus).
Bien entendu l'attente est fonction de la vitesse de sa connexion (et du
bon vouloir du serveur).
C'est un roll-over déporté *sans* pré-chargement des grandes vues et en
CSS au lieu de JS. Il se fait donc par survol de l'imagette au lieu de clic.
Ce n'est absolument pas conforme aux habitudes puisque non réactif au
clic. Bien que avec Firefox (et peut-être IE7?) ce pourrait l'être via
les CSS. Bon, voilà c'est ajouté.
Le pré ou post chargement des grandes vues n'est pas prévu pour ne pas
surcharger inutilement le chargement de la page elle-même.
--
sm
ça fonctionne ça avec IE ? <http://stephane.moriaux.pagesperso-orange.fr/truc/c35/>
Testé (très) rapidement sur IE6 Windows : le passage du curseur sur les photos ne produit absolument rien.
Ha! il faut attendre un peu sur une imagette, le temps que la grande image se charge ... si on fait "rapidement" pour sûr ça ne peut fonctionner (tous brouteurs confondus). Bien entendu l'attente est fonction de la vitesse de sa connexion (et du bon vouloir du serveur).
C'est un roll-over déporté *sans* pré-chargement des grandes vues et en CSS au lieu de JS. Il se fait donc par survol de l'imagette au lieu de clic.
Ce n'est absolument pas conforme aux habitudes puisque non réactif au clic. Bien que avec Firefox (et peut-être IE7?) ce pourrait l'être via les CSS. Bon, voilà c'est ajouté.
Le pré ou post chargement des grandes vues n'est pas prévu pour ne pas surcharger inutilement le chargement de la page elle-même. -- sm
SAM
SAM wrote:
dommage je vais surement me rabbatre la-dessus si j'arrive pas a reproduire l'autre code! L'autre code ? Lequel ?
celui là que je trouve excellent, mais voilà j'arrive pas à comprendre le mécanisme
ce n'est pas très compliqué :
1) copier et coller - la feuille de style dans le head de sa page - le div 'container' au complet dans le body de la page
2) adapter à ses images :
2-a) div container : - remplacer les img src par ses grandes vues - corriger les alt et title de ces images - corriger la légende (après les <br />)
2-b) la feuille de style : - remplacer dans les background:url(blabla) des class .slidexx le blabla par la vignette (correspondante à la class) - corriger la position de chaque grande vue dans les class .slidex span { ... }
Voili, voilou
Ha! pour le mécanisme ...
la galerie ('container') : - liens qui contiennent un span ce span contenant la grande image et sa légende
la feuille de style : - les spans du lien sont invisibles et tous posés en absolute - chaque span a sa position corrigée dans la class de son lien - les liens sont transformés en blocs et flottants - chaque lien a en fond l'image de la vignette correspondant à la grande vue qui est dans le span - au survol du lien son span est passé en visible et on voit sa grande vue
Finalement le truc n'est pas si compliqué ... ... dès qu'on a réussi à ne pas se mélanger entre grandes et petites vues (l'idéal est de les nommer pareil et de les ranger dans des dossiers séparés)
-- sm
SAM wrote:
dommage je vais surement me rabbatre la-dessus si j'arrive pas a
reproduire l'autre code!
L'autre code ? Lequel ?
celui là que je trouve excellent, mais voilà j'arrive pas à comprendre le
mécanisme
ce n'est pas très compliqué :
1) copier et coller
- la feuille de style dans le head de sa page
- le div 'container' au complet dans le body de la page
2) adapter à ses images :
2-a) div container :
- remplacer les img src par ses grandes vues
- corriger les alt et title de ces images
- corriger la légende (après les <br />)
2-b) la feuille de style :
- remplacer dans les background:url(blabla)
des class .slidexx
le blabla par la vignette (correspondante à la class)
- corriger la position de chaque grande vue
dans les class .slidex span { ... }
Voili, voilou
Ha! pour le mécanisme ...
la galerie ('container') :
- liens qui contiennent un span
ce span contenant la grande image et sa légende
la feuille de style :
- les spans du lien sont invisibles
et tous posés en absolute
- chaque span a sa position corrigée
dans la class de son lien
- les liens sont transformés en blocs et flottants
- chaque lien a en fond l'image de la vignette correspondant
à la grande vue qui est dans le span
- au survol du lien son span est passé en visible
et on voit sa grande vue
Finalement le truc n'est pas si compliqué ...
... dès qu'on a réussi à ne pas se mélanger
entre grandes et petites vues
(l'idéal est de les nommer pareil et de les ranger dans des dossiers
séparés)
dommage je vais surement me rabbatre la-dessus si j'arrive pas a reproduire l'autre code! L'autre code ? Lequel ?
celui là que je trouve excellent, mais voilà j'arrive pas à comprendre le mécanisme
ce n'est pas très compliqué :
1) copier et coller - la feuille de style dans le head de sa page - le div 'container' au complet dans le body de la page
2) adapter à ses images :
2-a) div container : - remplacer les img src par ses grandes vues - corriger les alt et title de ces images - corriger la légende (après les <br />)
2-b) la feuille de style : - remplacer dans les background:url(blabla) des class .slidexx le blabla par la vignette (correspondante à la class) - corriger la position de chaque grande vue dans les class .slidex span { ... }
Voili, voilou
Ha! pour le mécanisme ...
la galerie ('container') : - liens qui contiennent un span ce span contenant la grande image et sa légende
la feuille de style : - les spans du lien sont invisibles et tous posés en absolute - chaque span a sa position corrigée dans la class de son lien - les liens sont transformés en blocs et flottants - chaque lien a en fond l'image de la vignette correspondant à la grande vue qui est dans le span - au survol du lien son span est passé en visible et on voit sa grande vue
Finalement le truc n'est pas si compliqué ... ... dès qu'on a réussi à ne pas se mélanger entre grandes et petites vues (l'idéal est de les nommer pareil et de les ranger dans des dossiers séparés)
