Merci ynx,

Je suis partie sur ton idée je te remercie.

cela me donne ceci :
[code] <!-- Début avatars -->
<!-- Bouton déclencheur pour le collapsible avec l'icône SVG -->
<button type="button" class="form-control mb-3" data-bs-toggle="collapse" data-bs-target="#monCollapse" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-bounding-box" viewBox="0 0 16 16">
<path d="M1.5 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 1-1 0v-3A1.5 1.5 0 0 1 1.5 0h3a.5.5 0 0 1 0 1h-3zM11 .5a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 1 16 1.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 1-.5-.5zM.5 11a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 1 0 1h-3A1.5 1.5 0 0 1 0 14.5v-3a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v3a1.5 1.5 0 0 1-1.5 1.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 1 .5-.5z"/>
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm8-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
</svg>
Choix d'avatars (option)
</button>

<!-- Élément collapsible -->
<div id="monCollapse" class="collapse">
<div class="card card-body">
<label class="avatar-label">
<?php
// Vérifier si des avatars ont été récupérés depuis la table
if (!empty($results)) {
$counter = 0; // Compteur pour les images
foreach($results as $row) {
// Assurez-vous que $row est un objet stdClass
if (is_object($row)) {
// Accéder aux propriétés de l'objet
$avatarUrl = $row->url;
$avatarId = $row->id;

// Vérifier le compteur pour ouvrir/fermer les divs de ligne
if ($counter % 3 == 0) {
echo '<div class="row">';
}
?>
<div class="col-4">
<label class="avatar-label">
<input type="radio" class="avatar-input" name="avatar" value="<?php echo $avatarId; ?>">
<img src="<?php echo $avatarUrl; ?>" alt="Avatar <?php echo $avatarId; ?>">
</label>
</div>
<?php
// Vérifier le compteur pour ouvrir/fermer les divs de ligne
if (($counter + 1) % 3 == 0) {
echo '</div>';
}
$counter++;
}
}

// Vérifier si la dernière ligne est incomplète et fermer la div de ligne correspondante
if ($counter % 3 != 0) {
echo '</div>';
}
} else {
echo "Aucun avatar trouvé.";
}
?>
</div>

<!-- Fin avatars -->[/code]

Encore merci pour votre aide.
Mais de la je but sur un autre problème la deselection de l'avatar...... je cherche je cherche

Je passe en résolu.

Merci aussi au forum.
@+ Filou

<label>
  <input type="radio" name="avatar" value="1">
  <img src="avatar/1.png" alt="Avatar 1">
</label>

<label>
  <input type="radio" name="avatar" value="2">
  <img src="avatar/2.png" alt="Avatar 2">
</label>

<label>
  <input type="radio" name="avatar" value="3">
  <img src="avatar/3.png" alt="Avatar 3">
</label>

Bonjour,

Dans une balise <option>, tu ne peux insérer que tu texte et pas de balise <img>.

Si tu veux que l'utilisateur puisse cliquer sur l'image pour choisir son avatar, des input type="radio" avec un label serait peut-être mieux adapté en html :
[html]<label>
<input type="radio" name="avatar" value="1">
<img src="avatar/1.png" alt="Avatar 1">
</label>

<label>
<input type="radio" name="avatar" value="2">
<img src="avatar/2.png" alt="Avatar 2">
</label>

<label>
<input type="radio" name="avatar" value="3">
<img src="avatar/3.png" alt="Avatar 3">
</label>[/html]

Bonjour à tous,
J'ai encore besoin de votre aides de vos conseils.
Je souhaite faire une liste pour choisir un avatar.
J'utilise l'architecture MVC.
Sur mon serveur j'ai un dossier avatar ou se trouve les images.

voici mon modele :
[code]<?php
require_once(dirname(__FILE__).'/../Public/Utiles/database.php');
class ChoixAvatars
{
private $id;
private $url;
private $pdo;

// Methode magique pour hydraté l'objet
public function __construct($id = NULL, $url = NULL)
{
$this->id = $id;
$this->url = $url;
$this->pdo = Database::getInstance();
}

function __set($property, $value)
{
$this->$property = $value;
}

// Requête SQL pour récupérer les données de la table
public function voirAvatars()
{
$sql = 'SELECT * FROM avatars';
$req = $this->pdo->prepare($sql);
if ($req->execute()) {
$results = $req->fetchAll();
return $results;
} else {
echo 'Une erreur est survenue lors de l\'exécution de la requête.';
return false;
}
}

}[/code]

Voici mon controleur :
[code]<?php
require_once(dirname(__FILE__).'/../Public/Utiles/regex.php');

// Inclure le modele
require_once(dirname(__FILE__).'/../Modeles/ChoixAvatars.php');

//Démarrer une nouvelle session
session_start();

$code = trim(filter_input(INPUT_GET, 'code', FILTER_SANITIZE_NUMBER_INT));

// Appel de la méthode voirTable pour récupérer les données de la table
$choixAvatar = new ChoixAvatars();
$results = $choixAvatar->voirAvatars();




/// VOIR CONTROLE DES CHAMPS

//On verifie que le formulaire est envoyé
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$avatars = trim(filter_input(INPUT_POST, 'avatars', FILTER_SANITIZE_NUMBER_INT));
var_dump($avatars);
exit;
}

include(dirname(__FILE__).'/../Vues/connexionInscription.php');
[/code]

Voici ma vue au niveau de l'avatar :
[code] <!-- Avatars -->
<div class="col-8 input-group mb-3">
<div class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-bounding-box" viewBox="0 0 16 16">
<path d="M1.5 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 1-1 0v-3A1.5 1.5 0 0 1 1.5 0h3a.5.5 0 0 1 0 1h-3zM11 .5a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 1 16 1.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 1-.5-.5zM.5 11a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 1 0 1h-3A1.5 1.5 0 0 1 0 14.5v-3a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v3a1.5 1.5 0 0 1-1.5 1.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 1 .5-.5z"/>
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm8-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
</svg>
</div>
<select class="form-control" id="avatars" name="avatars">
<option value="custom">Sélectionner un avatar (option)</option>
<?php
// Vérifier si les résultats sont un tableau d'objets
if (is_array($results)) {
// Boucle pour parcourir les résultats de la requête
foreach ($results as $result) {
// Utiliser l'URL de l'image comme valeur et comme texte de l'option
echo '<option value="' . $result->url . '" data-image="' . $result->url . '"><img src="' . $result->url . '" alt="Avatar" class="avatar-image"> ' . $result->url . '</option>';
}
}
?>
</select>
</div>
<!-- Fin avatars -->



<div class="avatar-select">
<span class="avatar-label">Sélectionner un avatar :</span>
<div class="avatar-dropdown">
<img class="avatar-image" src="/../Public/Avatars/1.png" alt="Avatar 1">
<img class="avatar-image" src="/../Public/Avatars/2.png" alt="Avatar 2">
<img class="avatar-image" src="/../Public/Avatars/3.png" alt="Avatar 3">
<img class="avatar-image" src="/../Public/Avatars/4.png" alt="Avatar 4">
<img class="avatar-image" src="/../Public/Avatars/5.png" alt="Avatar 5">
<img class="avatar-image" src="/../Public/Avatars/6.png" alt="Avatar 6">
<img class="avatar-image" src="/../Public/Avatars/7.png" alt="Avatar 7">
</div>
</div>[/code]

dans la première partie cela affiche le url mais pas l'image mais la deuxième partie affiche ce que je veux mais impossible a mettre dans ma boucle .

Merci par avances pour vos conseils et votre aide.
Bon week end.
@+ Filou