5568 sujets

Sémantique web et HTML

Bonjour,

Dans le cadre de l'un de mes projets, je dois utiliser un canvas pour afficher des animations par dessus mon contenu .

La solution que j'ai adopter consiste à attribuer à ma balise un z-index supérieur au reste du contenu.
Le probleme, c'est que puisque le canvas est par dessus, je ne peux plus interagir avec mon contenu (sélection, clic lien, etc).


<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        
        <div id="wrap-canvas">
             <canvas></canvas> 
       </div>

        <div id="corps-wrapper">
            <!-- Mon contenu -->
        </div>

        <footer>
        </footer>

    </body>
</html>



#wrap-canvas{
    position: fixed;
    top: 0;  bottom: 0;
    left: 0; right: 0;
    z-index: 100;
}

#corps-wrapper{
    position: relative;
    margin-left: 90px;
    z-index: 5;
}


Merci d'avance !
Modifié par Bousty (22 May 2014 - 15:47)
Il existe bien pointer-events: none; en CSS, mais c’est assez peu compatible.

Comparativement à canvas, le problème ne se poserait plus que sur IE 9 et 10.

En revanche la vraie bonne solution serait de ne pas mettre tes animations au-dessus de ton contenu.
Bonsoir,

Les animations doivent malheureusement rester par dessus le contenu, si ce n'est pas possible je vais devoir repenser le design.

Merci pour vos réponses.
Bonjour,

Merci pour vos réponse, j'ai procédé à quelques changements au design, les animations resteront en arrière plan.