const chaineJSON = '[{"nom": "Class40", "logo": "Class40.webp"},' +
    '{"nom": "IMOCA", "logo": "Imoca.webp"},' +
    '{"nom": "Ocean Fifty", "logo": "OceanFifty.webp"},' +
    '{"nom": "Ultim", "logo": "ClassUltim.webp"}]';

const data = JSON.parse(chaineJSON);

window.onload = function () {
    console.log(data);

    const nomAfficheDiv = document.getElementById('nomDeClasse');
    const logosDiv = document.getElementById('logos');

    for (let i = 0; i < data.length; i++) {
        const bateau = data[i];
        const img = document.createElement('img');
        img.className = 'logo';
        img.src = 'images/logo_' + bateau.logo.toLocaleLowerCase();
        img.alt = bateau.nom;

        img.addEventListener('pointerover', function () {
            nomAfficheDiv.innerHTML = bateau.nom;
        })
        logosDiv.appendChild(img);
    }
};