Hello tout le monde, j'ai fais un système d'article (bdd ok, données ok, php ok) par contre je voudrais faire une boxe qui
affichera les articles séparément, jusque là tout vas bien je sais faire (enfin pour la boxe ouais..), je bloque à ce moment :
je voudrais faire ça :

autre exemple :

Je sais pas si ca se fait avec du html css mais à mon avis y a aussi du js non..?
donc j'aimerai si possible qu'on m'écliare vis à vis de cette possible création, je ne vois pas comment faire.. 

Hello,

l'idée est que quand on clique sur un cercle, l'image au dessous change et le cercle devient blanc ?

oui tout à fait, et moi en php je ferais en sorte qu'a chaque clic, l'article change

mais dans ce cas tu vas recharger la page à chaque fois ?

donc la logique : pour chaque cercle un lien de la forme "detail_produit.php?id=nnn"
ce qui oblige avant l'affichage d'une page d'avoir récupér par une requête les ID concernés pour écrire les liens de chaque cercle

Autre solution :  utiliser Ajax, pour ne pas recharger la page,

ou encore javascript pour changer l'image mais il faudra avoir la liste des images correpsondant à chaque produit

C'est ça en gros ?

Ma question c'est comment est ce que je fais pour faire ce genre de menu, je sais comment faire le déroulement des images, chaque point, c'est un article, et dans ma bdd un article = id,titre,img,file,added_by et date
mon seul soucis est de procéder à cette partie design et non la partie technique x),

ce qui oblige avant l'affichage d'une page d'avoir récupér par une requête les ID concernés pour écrire les liens de chaque cercle

ou encore javascript pour changer l'image mais il faudra avoir la liste des images correpsondant à chaque produit

C'est ça en gros ?

en un seul rechargement, la page  va chargé toute les images en allant les récuperer (GET) dans la bdd donc pas besoin de recharger à chaque fois mais juste alterner entre les petit points rond

Salut

Tu peux faire un mélange de ce tuto: https://www.grafikart.fr/tutoriels/php/pagination-php-51

et de celui la : https://www.w3schools.com/css/css3_pagination.asp

Merci Golden Panda, je vais me concentrer sur ça et je te redirais

OK voici une solution :

HTML:

<div class="navig">
	<a href="produit.php?id=1" class="courant"></a>
	<a href="produit.php?id=2"></a>
	<a href="produit.php?id=3"></a>
	<a href="produit.php?id=4"></a>
	<a href="produit.php?id=5"></a>
</div>

CSS :

.navig {
	text-align:center;
	background-color:darkblue;
	padding:10px;
}
.navig a {
	display:inline-block;
	height:30px;
	width:30px;
	border-radius:50%;
	background-color:gray;
	margin:0 10px;
	transition:0.5s;
}
.navig a:hover {
	background-color:white;
}
.navig .courant {
	background-color:white;
}

merci beaucoup chrisLebure, maintenant je vais adapter le cours de golden panda, ta template, et le tour est joué!!