Plus de d\u00e9tails ici<\/a>)<\/em><\/p>\r\n
\r\nDeuxi\u00e8me \u00e9tape :<\/strong>\r\nD\u00e9clarez les diff\u00e9rents \u00e9l\u00e9ments HTML<\/em><\/p>\r\n\r\n\r\n#myAd<\/code> : div qui contiendra notre banni\u00e8re<\/li>\r\n#layout1<\/code> : div qui accueillera tous les \u00e9l\u00e9ments qui appartiennent au calque 1<\/li>\r\n#layout2<\/code> : div qui accueillera tous les \u00e9l\u00e9ments qui appartiennent au calque 2<\/li>\r\n#global<\/code> : div qui contiendra tous les \u00e9l\u00e9ments qui seront communs aux deux calques (par exemple : le logo, une instruction utilisateur, etc.).<\/li>\r\n<\/ul>\r\n\r\nPuis ins\u00e9rez les diff\u00e9rents \u00e9l\u00e9ments que vous voulez dans les diff\u00e9rents containers (#layout1<\/code>, #layout2<\/code>, #global<\/code>)<\/p>\r\n
\r\nTroisi\u00e8me \u00e9tape :<\/strong>\r\nD\u00e9clarez les styles CSS des \u00e9l\u00e9ments de votre banni\u00e8re.<\/em><\/p>\r\n\r\n\r\n#myAd<\/code> sera de la taille de la banni\u00e8re et en position relative<\/li>\r\n#layout1<\/code>, #layout2<\/code>, #global<\/code> : devront \u00eatre en position absolute, ancr\u00e9 en haut \u00e0 gauche (top :0;left :0; ) , et avec une largeur et une hauteur de 100%.<\/li>\r\n- Si
#layout2<\/code> doit \u00eatre r\u00e9v\u00e9l\u00e9 \u00e0 l\u2019interaction utilisateur (il est donc cach\u00e9 au d\u00e9but), vous devez le placer par-dessus #layout1<\/code>.<\/li>\r\n<\/ul>\r\n\r\nTous les autres \u00e9l\u00e9ments sont \u00e0 styliser en fonction de vos d\u00e9sirs.<\/p>\r\n
\r\n
Quatri\u00e8me \u00e9tape :<\/strong>\r\nDynamisez votre banni\u00e8re<\/em><\/p>\r\n\r\n\r\n- Initialisez vos donn\u00e9es dynamiques qui seront ins\u00e9rez dans la banni\u00e8re<\/li>\r\n
- Ins\u00e9rez ces donn\u00e9es dynamiques dans leurs containers respectifs en utilisant nos fonctions de dynamisation.<\/li>\r\n<\/ul>\r\n
\r\nCinqui\u00e8me \u00e9tape :<\/strong>\r\nD\u00e9clarez et configurez le composant slidingBanner<\/em><\/p>\r\n\r\nvar slidingBanner = new SlidingBanner({\r\n direction:'vertical',\r\n adContainer:document.getElementById('myAd'),\r\n layoutToShow:document.getElementById('layout2'),\r\n urlClick1:ADventori.data.url1,\r\n urlClick2:ADventori.data.url2 \r\n});\r\n<\/code><\/pre>\r\n\r\nOptions de configuration :<\/em><\/p>\r\n\r\n\r\ndirection<\/code> : correspond \u00e0 la direction du mouvement de l\u2019animation de transition entre les deux calques lors de l\u2019interaction utilisateur.
Deux valeurs possibles : 'horizontal'<\/code> (par d\u00e9faut) et 'vertical'<\/code><\/li>\r\nadContainer<\/code> : le container de la banni\u00e8re<\/li>\r\nlayoutToShow<\/code> : correspond au calque qui doit \u00eatre cach\u00e9 par d\u00e9faut et qui apparaitra lors de l\u2019interaction utilisateur, le calque cibl\u00e9 dans cet option doit obligatoirement \u00eatre positionn\u00e9 par-dessus l\u2019autre calque<\/li>\r\nurlClick1<\/code> : url de redirection lorsque l\u2019utilisateur clique sur la partie correspondant au calque1<\/li>\r\nurlClick2<\/code> : url de redirection lorsque l\u2019utilisateur clique sur la partie correspondant au calque2<\/li>\r\n<\/ul>\r\n\r\n\/!\\ Toutes ces options sont obligatoires<\/em><\/p>\r\n
\r\nExemples<\/h3>
<\/p>\r\n
970×250<\/h4>\r\n