• Gif sonore

    Survolez l'image pour l'animer et lancer la musique (retard de quelques secondes)

    Réalisation sur une idée de Yannn

     


    Le principe d'un son au survol d'une image est ici un code Gadget Google, que vous trouverez ICI ou en cliquant sur le montage.

    J'ai placé une chanson mais on peut faire jouer un son.

    Le principe de l'image qui s'anime au survol est de rendre transparente l'image animée sonore, que l'on place au dessus de l'image fixe; en la survolant, on la rend opaque et elle devient visible.

    Les dimensions sont celles de mon image animée grâce à laquelle j'ai créé l'image fixe: 800x450px... à adapter à vos besoins.

    <div style="width: 800px; height: 450px; border: 6px ridge grey; margin: 5px auto;">
    <p id="fx">&nbsp;</p>
    <p id="mb"><iframe style="width: 800px; height: 450px;" src="http://www.gmodules.com/gadgets/ifr?url=https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/image-sonore-lnk.xml&amp;up_URL=http://ekladata.com/Lf6gLaeDGKFC7DIQ_a1ZBQxeBT8.gif&amp;up_MP3=http://ekladata.com/n7nhqO9AluTHnTkl3Kz4GZauKjg/Alan-Jackson-Linedance-Chattahoochee.mp3&amp;up_TIT=Dr&ocirc;me proven&ccedil;ale&amp;up_LNK=http://www.liens-du-vin.ch/image-sonore-script.htm&amp;up_TNK=Image%20sonore&amp;up_PWH=800&amp;up_PHT=450&amp;up_CCOL=transparent" frameborder="0" scrolling="no" width="800" height="450" allowtransparency="true">Gadget Google - Une image sonore - http://www.liens-du-vin.ch/image-sonore-script.htm</iframe></p>
    </div>

    <style><!--
    #mb{position:absolute; width:800px; height:450px; transform:translate(0px,0px); opacity:0;}
    #fx{position:absolute; width:800px; height:450px; transform:translate(0px,0px); background:url(http://ekladata.com/IsYOAC_xldLprxwM9Y8ryrm054o.jpg);}
    #mb:hover{opacity:1;}
    --></style>