Bouton invisible 2

J'ai déjà proposé de créer un bouton invisible, par une adresse d'image transparente de 1 px par 1px, pour être la plus légère possible, et à agrandir selon ses besoins.

Cette image transparente est à créer par un logiciel de traitement d'image, au format Gif ou PNG.

Cette façon de faire permet d'animer un ou des éléments, au survol de ce bouton invisible qui sera stable, car non animé alors que les autres éléments bougeront, ce qui empêche de les survoler directement (à moins de les suivre dans leur déplacement) 

Dans le montage de cet article ICI, j'ai utilisé un bouton invisible général, qui est posé au dessus du montage, qui est de la même dimension que ce dernier et qui commande l'animation de différents éléments, les paragraphes, en l'occurrence; il n'y a pas besoin de créer une image transparente mais simplement de remplir ce paragraphe/bouton de vide ( ) et de lui donner dimension et position souhaitées.

Il est très simple de l'incorporer dans le code du montage en n'oubliant pas qu'il doit être écrit avant ce qu'il anime (ordre: survolé/animé) et que l'on n'a besoin que d'une ligne html pour le créer.

Je reprends le code de l'article exemple pour l'expliquer:

<div style="height: 650px;">
<div id="fd">
<p id="bt" style="position:absolute; z-index:10; width:800px; height:600px;">&nbsp;</p>
<p id="mfd">&nbsp;</p>
<p id="p0">Survolez ce montage .</p>
<p id="p1">texte paragraphe 1</p>
<p id="p2">texte paragraphe 2</p>
<p id="p3">texte paragraphe 3</p>
<p id="p4">texte paragraphe 4</p>
<p id="p5">texte paragraphe 5</p>
</div>
</div>
<style type="text/css"><!--
#fd{position:absolute; width:800px; height:600px; border:1px solid black; background:url(http://ekladata.com/AHhv6xStUIreQonx5ATb-mDlvh0/00018.jpg); overflow:hidden; margin:10px auto 620px auto; transform:translate(200px,5px); }
#p0{position:absolute; transform:translate(150px,10px); width:500px; height:30px; text-align:center; font-size:18pt;}
#mfd{position:absolute; transform:translate(102px,80px); width:600px; height:400px; background:url(http://ekladata.com/T8GSvo0VPJaw1UuySMZ_hsfapoI/29.jpg); }
#p1{position:absolute; transition:all 1s linear; text-align:center; font-size:14pt; transform:translate(-800px,0px); width:600px; height:80px; border-top:2px solid black; border-left:2px solid black; border-right:2px solid black; background:url(http://ekladata.com/SY8wPCI-eQsPw0J9Ab9e9o6IUPk/img895.jpg);}
#p2{position:absolute; transition:all 1s linear 1s; text-align:center; font-size:14pt; transform:translate(800px,0px); width:600px; height:80px; border-left:2px solid black; border-right:2px solid black; background:url(http://ekladata.com/SY8wPCI-eQsPw0J9Ab9e9o6IUPk/img895.jpg);}
#p3{position:absolute; transition:all 1s linear 2s; text-align:center; font-size:14pt; transform:translate(-800px,0px); width:600px; height:80px; border-left:2px solid black; border-right:2px solid black; background:url(http://ekladata.com/SY8wPCI-eQsPw0J9Ab9e9o6IUPk/img895.jpg);}
#p4{position:absolute; transition:all 1s linear 3s; text-align:center; font-size:14pt; transform:translate(800px,0px); width:600px; height:80px; border-left:2px solid black; border-right:2px solid black; background:url(http://ekladata.com/SY8wPCI-eQsPw0J9Ab9e9o6IUPk/img895.jpg);}
#p5{position:absolute; transition:all 1s linear 4s; text-align:center; font-size:14pt; transform:translate(-800px,0px); width:600px; height:120px; border-bottom:2px solid black; border-left:2px solid black; border-right:2px solid black; background:url(http://ekladata.com/SY8wPCI-eQsPw0J9Ab9e9o6IUPk/img895.jpg);}
#bt:hover ~ #p1{transform:translate(100px,50px);}
#bt:hover ~ #p2{transform:translate(100px,130px);}
#bt:hover ~ #p3{transform:translate(100px,210px);}
#bt:hover ~ #p4{transform:translate(100px,290px);}
#bt:hover ~ #p5{transform:translate(100px,370px);}
--></style>

Le bouton invisible est ici surligné en jaune, avec les attributs en html (j'ai regroupé les attributs en html mais ils peuvent être écrits en html + CSS) ; il est de la dimension du montage, écrit dans la première ligne du code, à l'intérieur du montage et placé en premier plan en profondeur par position:absolute; z-index:10; (valeur à adapter à votre montage; plus le chiffre est élevé et plus l'élément en en premier plan).
Les textes des paragraphes sont surlignés en bleu; vous pouvez en ajouter ou en retirer, les agrandir ou les modifier selon vos besoins.
L'animation des paragraphes peut être modifiée selon vos choix.