11484 sujets

JavaScript, DOM et API Web HTML5

Affichage - ancrage - image

Bonjour,
Voilà le scénario. J'ai une page avec des images positionnées les unes en-dessous des autres, une sorte de 'colonne d'images'; je devrais avoir un menu à droite et en haut normalement avec des vignettes (petites). Quand je clique sur une vignette, je souhaite que l'image concernée s'affiche en 'haut', elle scrolle vers le bas ou vers le haut en fonction de sa place dans la colonne. Je pourrais réaliser cela avec des ancrages, mais je n'ai pas essayé.
Merci.
Jean-François

UN OUBLI : les images qui composent la 'colonne' ont un lien entre elles, comme un circuit routier coupé en plusieurs parties, la première image débute le circuit, la seconde le continu...

upload/1620396819-23311-schema-carte-illus.jpg
Modifié par luxojr (07 May 2021 - 16:14)
Bonjour luxojr,
Je ne vois pas de question dans ton post, quel est ton point de blocage ?
Tu as testé déjà des choses ? Tu as un bout de code à montrer pour voir comment tu envisages les choses ?

Sinon, Raphaël a répondu à ton post "Affichage progressif de ma page...", tu as avancé sur ce sujet ?
Bonjour,
C'est vrai j'ai posé le problème vous faire part de ma question Smiley cligne ))
Comme le schéma le présente, j'ai un ensemble d'images qui doivent scroller soit vers le haut, soit vers le bas, avec une limite supérieur qui le haut de l'image #1 et une limite basse qui le bas de la dernière image. Il y aura un menu sur la droite qui doit être composé des vignettes des images sur la gauche. Ma question est comment faire pour pouvoir afficher l'image (à gauche) quand je clique sur le vignette correspondante (à droite) ???
J'ai essayé avec des ancrages (<a id="image..."></a>), mais le navigateur n'affiche qu'une partie de l'image en fonction de sa zone d'affichage... Ce que je souhaite réellement c'est par exemple quand je clique sur la vignette 3, l'image 3 vient se mettre en tête de colonne. Smiley cligne
J'espère avoir été clair. Smiley cligne
Jean-François
Modifié par luxojr (10 May 2021 - 07:56)
Pourrais-tu mettre un bout de code pour pouvoir tester la situation dans laquelle tu te trouves ?
Normalement, comme tu l'as testé, avec un système d'ancre tu peux arriver à tes fins.
Hello,
Merci pour tes réponses. Le test avec des ancrages n'est pas probant car l'ancre ne s'affiche pas en tête colonne quand je clique sur le lien de l'image souhaitée. Par exemple quand je suis avec un écran assez grand, l'ancrage souhaité s'affiche dans la zone d'affichage du navigateur et non au sommet de ma colonne d'image.
Je suis en train de travailler sur script pour tenter de résoudre le problème. Mais je vais tester quand même le lien que tu proposes. Merci Smiley cligne
Jean-François
Hello,
J'ai adapté le code que tu m'as conseillé, mais comme les images ne sont pas à 100%, l'ancrage s'affiche qu'en partie.
Voilà le code : 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<style type="text/css">
    
html {
  scroll-behavior: smooth;
}
    
.main {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ff0000;
    height:1950px;
}
.bloc-image {
    width: 400px;
    height: 650px;
    display: block;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
</style>
</head>

<body>   
    
    <div style="width:100%; text-align:center;height:20px;">
        <a href="#img-1">1</a> - <a href="#img-2">2</a> - <a href="#img-3">3</a> - <a href="#img-4">4</a> - <a href="#img-5">5</a>
    </div>
    
    
<div class="main">
    <div>
        <div class="bloc-image" id="img-1">
        <img src="image-pour-essai-1.jpg" width="400" height="650" alt=""/>
        </div>
    </div>
    
        <div>
        <div class="bloc-image" id="img-2">
        <img src="image-pour-essai-2.jpg" width="400" height="650" alt=""/>
        </div>
    </div>
    
        <div>
        <div class="bloc-image" id="img-3">
        <img src="image-pour-essai-3.jpg" width="400" height="650" alt=""/>
        </div>
    </div>
    
        <div>
        <div class="bloc-image" id="img-4">
        <img src="image-pour-essai-4.jpg" width="400" height="650" alt=""/>
        </div>
    </div>
    
        <div>
        <div class="bloc-image" id="img-5">
        <img src="image-pour-essai-5.jpg" width="400" height="650" alt=""/>
        </div>
    </div>

</div><!--main-->   

</body>
</html>


Je joins une image pour éclaircir (je l'espère) le problème.
upload/1620717391-23311-explication-ancrage.jpg
Modifié par luxojr (11 May 2021 - 09:16)
Modérateur
Bonjour,

Si l'image est le dernier élément du conteneur , c'est normal qu'elle reste au bas de celui-ci. Il te faudrait prévoir un élément vide ou un padding au conteneur ou la dernière image pour augmenter la hauteur du conteneur et donner la possibilité a la dernière image de s'afficher plus haut.

Peut-être un height + object-fit pour la dernière image. (je regarde si cette piste fonctionne)

edit code css (a voir si le selecteur reflete ta réalité) qui devrait résoudre ton soucis:
.main > div:last-of-type .bloc-image img {
  min-height:100vh;
  object-fit:none;
  object-position:0 0;
}

démo depuis ton code (sans hauteur a main pour garder les liens visible pour le test) https://codepen.io/gc-nomade/pen/zYZvjQX
Modifié par gcyrillus (11 May 2021 - 15:14)
J'avais essayé avec une image supplémentaire transparente de même dimension, et cela fonctionnait. Quid sur d'autres écrans....
Ta solution fonctionne, un grand merci. Il faut dire que je m'était lancé dans l'écriture d'un javascript en jouant sur la propriété 'pos' de l'élément, un peu ardu Smiley cligne
Encore merci.
Jean-François
Bonjour,
J'étais trop content...
J'ai remarqué un problème, je souhaite que les images scrollent verticalement et c'est le cas; par contre j'aimerais qu'elles s'arrêtent à une certaine distance du haut de la page (comme une margin-top). Je joint un schéma...
upload/1620982684-23311-schema-marge.jpg
Modérateur
Bonjour,

une solution serait de mettre le conteneur dans une grille avec l’élément qui le précède et de déplacer le défilement sur celui-ci . https://codepen.io/gc-nomade/pen/JjWXMee ( ou en cachant la barre d défilement https://codepen.io/gc-nomade/pen/yLMOvLp ... Attention: mauvaise idée ) .

L'idée de base est de ne pas laissé HTML créer une barre de scroll pour éviter que celle-ci ne se recale naturellement sur l’élément ciblé (:target).

Cdt
Modifié par gcyrillus (14 May 2021 - 13:05)
Merci pour votre réponse,

J'ai testé avec précaution car je débute dans le 'display:grid'.
Ma mise en page devrait s'appuyer sur 3 colonnes. Si j'ai bien compris pour la définition en 'display:grid'; cela doit ressembler à çà :
display : grid;
grid-template-columns: auto 400px auto; 3 colonnes : gauche et droite en auto et la colonne centrale de 400 px (c'est une valeur arbitraire car je n'ai pas encore la valeur réelle)
Dois-je définir le css qui suit pour mon scrolling, j'ai besoin d'un peu d'aide. Smiley cligne
grid-template-rows: auto 1fr
height: 100vh;
justify-content:center;

Une chose important, dans mon exemple le 'menu 1 2 3 4 5' est au dessus de la colonne d'images, mais il y a beaucoup de chance que ce menu se trouve sur la droite de la colonne (colonne de vignettes des images de la colonne centrale), je pense que cette information est importante pour la suite. Au dessus de la colonne d'images, il y aura certainement un bandeau de menu... Désolé, j'apprends les éléments de mise an page au fur et à mesure...
Modifié par luxojr (14 May 2021 - 15:47)
Modérateur
Bonjour,

Le principe ici est de monter la grille dans l'espace du viewport. Max-height ou height: 100vh et de mettre celle ci ou le conteneur en overflow :auto. Que ce soit en grid ou flex, ligne ou colonne cela n'a pas d'incidence, l'idée est de ne pas laisser HTML générer une barre de défilement. (Sur mobile, je n'ai pas d'exemple sous la main à partager pour le moment)

Cdt
Merci pour votre réponse, mais j'ai un peu de mal à comprendre votre solution... Désolé. Smiley cligne
Jean-François.
Modifié par luxojr (15 May 2021 - 08:54)
Modérateur
Bonjour,

voici un autre exemple : https://codepen.io/gc-nomade/pen/NWprWbL ou bien https://codepen.io/gc-nomade/pen/PopzoJe , en lignes et colonnes et gardant le tout dans la hauteur de la fenêtre.

En bénéficiant de modèle de boite en grid, les calcul de taille de chaque élément se font d'eux même.

Voici de quoi nourrir tes interrogations à propos de grid , avec ses possibilités, tutos et infos . https://www.alsacreations.com/astuce/lire/1739-CSS-Grid-Layout-les-ressources-indispensables-pour-apprendre.html

cdt
Modifié par gcyrillus (15 May 2021 - 12:09)
Sujet clos
Aller à