Zoom sur images vers la droite
Modérateur : chinon37
Zoom sur images vers la droite
Bonjour,
j'essaie de remettre mon site à jour avec Kompozer.
je souhaite revoir la mise en page de la page suivante, ou plus précisément l'effet de zoom sur les images de droite, l'effet à gauche me convient parfaitement.
http://terredenacre.pagesperso-orange.fr/Pieces.html
J'aimerai que l'effet de zoom s'effectue sur la gauche pour les images de droite uniquement de façon, à venir effleurer celle de gauche.
Suis-je assez clair, je l'espère.
Merci de votre aide
Lino
j'essaie de remettre mon site à jour avec Kompozer.
je souhaite revoir la mise en page de la page suivante, ou plus précisément l'effet de zoom sur les images de droite, l'effet à gauche me convient parfaitement.
http://terredenacre.pagesperso-orange.fr/Pieces.html
J'aimerai que l'effet de zoom s'effectue sur la gauche pour les images de droite uniquement de façon, à venir effleurer celle de gauche.
Suis-je assez clair, je l'espère.
Merci de votre aide
Lino
Re: Zoom sur images vers la droite
Bonjour
La solution
http://sapajou.be/test.html
peut-elle convenir?
Le cas échéant, des explications sont-elles nécessaires?
La solution
http://sapajou.be/test.html
peut-elle convenir?
Le cas échéant, des explications sont-elles nécessaires?
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Re: Zoom sur images vers la droite
Whouaa...
Super, mieux que ce que je souhaitais, merci Ymai
Sympa l'ombre
Quelques explication ne seront pas de refus, cela fait bien longtemps que je n'ai pas retouché au CSS.
D'avance merci
Lino
Super, mieux que ce que je souhaitais, merci Ymai
Sympa l'ombre
Quelques explication ne seront pas de refus, cela fait bien longtemps que je n'ai pas retouché au CSS.
D'avance merci
Lino
Re: Zoom sur images vers la droite
Très (trop) rapidement...
Chaque ensemble de deux images disposées horizontalement est placé dans un conteneur (conteneur générique div).
Ce conteneur est affecté de la "class" nommée "milieu".
Dans l'éditeur de styles, j'affecte diverses propriétés à ce conteneur:
- largeur (à calculer)
- marge automatique (pour le centrage)
- hauteur (à calculer en fonction du contenu possible)
Dans ce conteneur, je place l'image de gauche et lui affecte une petite taille (200px de haut). KompoZer ne semble pas trop aimer qu'on impose seulement la hauteur. Je le force en mode "Mixte" et en supprimant la mention de la largeur.
Sur cette image gauche, je place un lien
Sélectionner l'image > Insertion > Lien
pour éviter des soucis, le lien peut être "javascript:void(0)", c'est-à-dire une fonction Javascript qui ne fait rien. Attention, dans l'original, problème quand on clique...
À la balise <a>, j'attribue la "class" nommée "gauche" (clic droit dans la barre d'état, Propriétés avancées, Attributs HTML > classe > gauche
Dans la feuille de styles, j'introduis une règle pour le sélecteur .gauche
> flottant à gauche
Après, même chose mais symétriquement pour l'image droite.
Je ne reviens plus sur le a:hover img qui semble acquis ;o)
Il y a largement moyen de fignoler.
Chaque ensemble de deux images disposées horizontalement est placé dans un conteneur (conteneur générique div).
Ce conteneur est affecté de la "class" nommée "milieu".
Dans l'éditeur de styles, j'affecte diverses propriétés à ce conteneur:
- largeur (à calculer)
- marge automatique (pour le centrage)
- hauteur (à calculer en fonction du contenu possible)
Dans ce conteneur, je place l'image de gauche et lui affecte une petite taille (200px de haut). KompoZer ne semble pas trop aimer qu'on impose seulement la hauteur. Je le force en mode "Mixte" et en supprimant la mention de la largeur.
Sur cette image gauche, je place un lien
Sélectionner l'image > Insertion > Lien
pour éviter des soucis, le lien peut être "javascript:void(0)", c'est-à-dire une fonction Javascript qui ne fait rien. Attention, dans l'original, problème quand on clique...
À la balise <a>, j'attribue la "class" nommée "gauche" (clic droit dans la barre d'état, Propriétés avancées, Attributs HTML > classe > gauche
Dans la feuille de styles, j'introduis une règle pour le sélecteur .gauche
> flottant à gauche
Après, même chose mais symétriquement pour l'image droite.
Je ne reviens plus sur le a:hover img qui semble acquis ;o)
Il y a largement moyen de fignoler.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Re: Zoom sur images vers la droite
merci de ta réponse,
je vais travailler d’arrache-pied suivant tes indications, mais mon initiation aux CSS remonte à ... NVU
En cas de pbl, je remonterai le post pour quelques éclaircissements si tu le veux bien.
Bonne soirée
Lino
je vais travailler d’arrache-pied suivant tes indications, mais mon initiation aux CSS remonte à ... NVU
En cas de pbl, je remonterai le post pour quelques éclaircissements si tu le veux bien.
Bonne soirée
Lino
Re: Zoom sur images vers la droite
Me revoilou,
J'ai tâtonné pas mal, et puis... les vacances sont passées par là, mais j'y suis arrivé (pas vraiment de façon "académique" ).
J'aurai aimé faire des ombres comme toi Ymai, style Box-Shadow, mais je n'ai rien trouvé dans CSS et en recopiant ton code source, rien ne s'affiche.
Étonnant, non, ferrai-je une mauvaise manip ?
Si tu as une piste Ymai, ou quelqu'un d'autre, je serai preneur.
Merci d'avance pour votre précieux concours.
Amicalement
http://terredenacre.pagesperso-orange.f ... lages.html
J'ai tâtonné pas mal, et puis... les vacances sont passées par là, mais j'y suis arrivé (pas vraiment de façon "académique" ).
J'aurai aimé faire des ombres comme toi Ymai, style Box-Shadow, mais je n'ai rien trouvé dans CSS et en recopiant ton code source, rien ne s'affiche.
Étonnant, non, ferrai-je une mauvaise manip ?
Si tu as une piste Ymai, ou quelqu'un d'autre, je serai preneur.
Merci d'avance pour votre précieux concours.
Amicalement
http://terredenacre.pagesperso-orange.f ... lages.html
Re: Zoom sur images vers la droite
Bonjour
Comme la page a été conçue, il faut attribuer
à l'objet
.droite
et non à
.droite img
.droite img signifie l'objet "image" qui se trouve dans un bloc dont la "class" est "droite"
dans la page présentée, l'image est elle-même affectée de la "class" droite. Elle n'est pas un élément d'un bloc "droite".
Et j'ai bien écrit "white", parce qu'une ombre grise sur fond gris...
Mais je ne suis pas sûr que l'effet d'ombre soit très heureux. Peut-être en chipotant un peu les paramètres? A voir avec la doc correspondante.
Comme la page a été conçue, il faut attribuer
Code : Tout sélectionner
box-shadow: 1px 5px 12px white;
.droite
et non à
.droite img
.droite img signifie l'objet "image" qui se trouve dans un bloc dont la "class" est "droite"
dans la page présentée, l'image est elle-même affectée de la "class" droite. Elle n'est pas un élément d'un bloc "droite".
Et j'ai bien écrit "white", parce qu'une ombre grise sur fond gris...
Mais je ne suis pas sûr que l'effet d'ombre soit très heureux. Peut-être en chipotant un peu les paramètres? A voir avec la doc correspondante.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Qui est en ligne ?
Utilisateurs parcourant ce forum : Bing [Bot] et 1 invité