Un lien qui pointe vers deux pages web, un autre qui une une image et un son.

Créer un lien qui pointe vers deux cibles.

En HTML, il n’est pas possible de créer un lien hypertexte directement vers deux cibles distinctes avec une balise classique.
Cependant, vous pouvez utiliser JavaScript pour simuler ce comportement en réagissant à un événement tel que le clic sur le lien.

Un exemple simple avec JavaScript

La première cible (Au café d’en face) s’ouvrira dans la page actuelle, tandis que la deuxième cible (Wikipedia) s’ouvrira dans un autre onglet.

Cliquez sur le lien ci-dessous pour ouvrir deux cibles :

Ouvrir 2 pages web simultanément

Le script

// Récupérer le lien par son ID
 var lien = document.getElementById('lienVersDeuxCibles');

// Ajouter un écouteur d'événement pour le clic
lien.addEventListener('click', function(event) {
// Ouvrir la première cible dans une nouvelle fenêtre/onglet
window.open('https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal', '_blank');

// Ouvrir la deuxième cible dans la fenêtre actuelle
window.location.href = 'http://aucafedenface.fr';

// Empêcher le comportement par défaut du lien
event.preventDefault();
});

Créer un lien qui ouvre une image (en popup) et un son.

En cliquant sur ce lien, vous ouvrez une image en fenêtre modale (popup) et vous lisez un son (sans que le lecteur soit visible).
Le son s’arrête en cliquant sur le bouton “fermer”.

Joe Satriani - Mountain song (flac)

le HTML

<a href="javascript:void(0);" onclick="openPopup()">Ouvrir la Popup</a>

<!-- Popup -->
<div class="popup" id="mediaPopup">
    <img src="url de l'image" alt="Image en popup">
    <audio controls id="popupAudio">
        <source src="url du fichier audio" type="audio/mp3">
<!-- il est possible choisir "flac" au lieu de "mp3"-->
    Votre navigateur ne prend pas en charge l'élément audio.
    </audio>
    <button onclick="closePopup()">Fermer</button>
</div>

le Javascript

function openPopup() {
       var popup = document.getElementById('mediaPopup');
       var audio = document.getElementById('popupAudio');
            
        // Démarrer la lecture automatiquement
        audio.play();

        // Afficher la popup et le fond obscurci
        popup.style.display = 'block';
        document.getElementById('overlay').style.display = 'block';
    }

    function closePopup() {
        var popup = document.getElementById('mediaPopup');
        var audio = document.getElementById('popupAudio');
            
        // Arrêter la lecture du son
        audio.pause();
        audio.currentTime = 0;

        // Masquer la popup et le fond obscurci
        popup.style.display = 'none';
        document.getElementById('overlay').style.display = 'none';
    }

le CSS

/* Styles pour la popup */
	audio {
        display: none;
    }
    .popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid #ccc;
        background-color: #fff;
        padding: 20px;
        z-index: 1;
    }

/* Style pour le fond obscurci derrière la popup */
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 0;
    }