Je vais refaire l’électricité de mon appartement, il en a bien besoin, l’installation de 1953 a été en partie refaite dans les années 1970, certains circuits sont encastrés, d’autres sont sous moulures bois, la plupart des câbles sont gainés de coton, y compris la jonction compteur disjoncteur. Je profite du calme de mes vacances pour cogiter mes schémas de branchement en prévision des travaux de rentrée. Comme ici un va et vient :
J’ai réalisé cette simulation avec 4 fichiers html : Allume1.htm, Allume2.htm, Eteint1.htm, Eteint2.htm et 4 images png : Allume1.png, Allume2.png, Eteint1.png, Eteint2.png.
Sur la page Allume1.htm, je mappe deux cercles de diamètre 80 entourant les interrupteurs, de coordonnées 170, 80 et 540, 80 et je crée des liens vers les deux fichiers Eteint1.htm et Eteint2.htm.
Je fais de même pour les 3 autres fichiers html.
Je télécharge les images par WordPress et les fichiers html par Fielezilla, dans un répertoire séparé de WordPress, à la racine du site.
Pour finir, je crée la page de mon article et j’inclus l’animation dans un iframe.
Le code du fichier Allume1.htm, à insérer entre les balises <body> et </body> est le suivant :
<MAP NAME="Allume1"><AREA SHAPE="circle" COORDS="170,80,80" HREF="Eteint1.htm"><AREA SHAPE="circle" COORDS="540,80,80" HREF="Eteint2.htm"></MAP>
<img src="https://denez.com/wp-content/uploads/2016/09/Allume1.png" alt="Allume1" width="629" height="371" USEMAP="#Allume1">