<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image dynamique</title>
    <style>
        .image-container {
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .image-container img {
            transition: opacity 0.5s ease-in-out;
        }

        .show-image {
            opacity: 1;
        }

        .hide-image {
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="" alt="Image dynamique">
    </div>
    <button onclick="toggleImageVisibility()">Afficher/Dissimuler</button>

    <script>
        function getRandomImageUrl() {
            const urls = [
                'https://pngimg.com/uploads/flame/flame_PNG13221.png'
            ];
            return urls[Math.floor(Math.random() * urls.length)];
        }

        function toggleImageVisibility() {
            const img = document.querySelector('.image-container img');
            img.src = getRandomImageUrl();
            img.classList.toggle('show-image');
            img.classList.toggle('hide-image');
        }
    </script>
</body>
</html>