Version 10, bouton dégradé 
Auteur : Jean-Christophe H.
Visité 2301,
Followers 2,
Partagé 0
Avec la version 9, j’ai créé une page avec des boutons dégradés (widgets) qui ouvraient des galeries d’images (voir post précédent « Comment augmenter le nombre de boutons? ». Malheureusement, les liens ne se font plus avec la version 10 et l’option « Bouton dégradé » n’est même plus présente dans les choix « Objet Html et Widgets ». Je suis obligé de replacer la version 9 sur internet. Comment remédier à ce problème?
Posté le
Bonjour Jean-Christophe,
Tu dois pouvoir générer le code depuis la V9, le copier et le coller dans un HTML & Widget V10. Après tout, c'est du HTML et CSS pur. Tu peux même changer les couleurs, le nom de l'objet éventuellement et l'URL à la main si tu en as envie.
Pour t'éviter de relancer la V9, je te laisse le code HTML ici pour un bouton. Fais l'essai :
Et si tu veux tous tes boutons avec le même style c'est encore plus simple puisque, une fois le style inséré, tu mets autant de liens (donc de boutons) que tu veux :
<a href="http://www.websitex5.com" id="myGButton1">Premier bouton</a>
<a href="http://answers.websitex5.com" id="myGButton1">Second bouton</a>
etc...
Auteur
Bonjour Samuel,
Les boutons apparaissent, mais c'est la galerie d'images qui ne fonctionne pas, en cliquant sur le bouton j'obtiens le message "Cannot load the page myGButton1".
Par exemple, à la suite de la description des boutons comme indiqué plus haut j'inscris le code suivant copié de la version 9 :
<a href="myGButton1" onclick="return x5engine.imShowBox.Show({effect: 'fade', background: '#404040', border: 1, textColor: '#000000', boxColor: '#FFFFFF', startIndex: 0, shadow: true, loadingImg: 'res/imLoad.gif', closeImg: 'res/imClose.png', media:[{type: 'img', url: 'files/Accueil1.jpg', width: 950, height: 680, text: ''}, 0, this);" id="myGButton1">Accueil</a>
Est-ce que le code est changé avec la version 10 ?
Merci
J-Christophe
Salut Jean-Christophe, en attendant le passage de Samuel, je viens de tester en copiant le code de la V9 vers la V10 : ça fonctionne à condition de bien mettre le lien complet de ta page dans la création du bouton (URL , juste avant "Bouton Text"). Voir copie écran jointe.
Test ici :http:// : Lien désactivé, nettoyage du serveur !
@+ et bonne continuation, J.P.
Auteur
Bonjour Jiper,
Ce n'est pas le lien vers une autre page qui est en question, mais plutôt l'ouverture directe de la galerie à partir du bouton. Voir exemple sur notre site (en version 9) :
http://www.alrenvirotech.com/catalogue.html
Cliquez sur n’importe lequel des boutons de la section Galerie (Accueil, Affichage, Affichage dynamique, etc.)
Merci, J-Christophe
Bonjour,
Ce qu'essaye de vous expliquer Jiper c'est de compléter avec les adresses absolues de vos images :
exemple pour la première image du bouton "Accueil" :
http://www.alrenvirotech.com/files/Accueil1.jpg
Mimoune
Auteur
Bonjour mimoune,
Il me semble que l'adresse de l'image est déjà placée dans le code que je souligne en gras ici :
<a href="myGButton1" onclick="return x5engine.imShowBox.Show({effect: 'fade', background: '#404040', border: 1, textColor: '#000000', boxColor: '#FFFFFF', startIndex: 0, shadow: true, loadingImg: 'res/imLoad.gif', closeImg: 'res/imClose.png', media:[{type: 'img', url: '<b>files/Accueil1.jpg</b>', width: 950, height: 680, text: ''},{type: 'img', url: '<b>files/Accueil2.jpg</b>', width: 950, height: 680, text: ''},{type: 'img', url: '<b>files/Accueil3.jpg</b>', width: 950, height: 680, text: ''},{type: 'img', url: '<b>files/Accueil4.jpg</b>', width: 950, height: 680, text: ''},{type: 'img', url: '<b>files/Accueil5.jpg</b>', width: 950, height: 680, text: ''},{type: 'img', url: '<b>files/Accueil6.jpg</b>', width: 950, height: 680, text: ''},{type: 'img', url: '<b>files/Accueil7.jpg</b>', width: 950, height: 680, text: ''},{type: 'img', url: '<b>files/Accueil8.jpg</b>', width: 950, height: 680, text: ''},{type: 'img', url: '<b>files/Accueil9.jpg</b>', width: 950, height: 680, text: ''},{type: 'img', url: '<b>files/Accueil10.jpg</b>', width: 950, height: 680, text: ''},{type: 'img', url: '<b>files/Accueil11.jpg</b>', width: 950, height: 680, text: ''},{type: 'img', url: '<b>files/Accueil12.jpg</b>', width: 950, height: 680, text: ''},{type: 'img', url: '<b>files/Accueil13.jpg</b>', width: 950, height: 680, text: ''}]}, 0, this);" id="myGButton1">Accueil</a>
En fait, et je ne sais pas comment l'expliquer autrement, je veux ouvrir une ShowBox avec le bouton dans la version 10 comme je l'ai fait avec la version 9 et non pas ouvrir une nouvelle page.
Bonsoir
je disais qu'il fallait que vous essayez de mettre les adresses absolues de vos images...
exemple : devant tous vos fichiers images ajouter :
http://www.alrenvirotech.com/
------------------------------------------------------------------------------------------
Tester ce code voir s'il convient, merci :
<a class="imCssLink" id="myGButton1" onclick="return x5engine.imShowBox({ closeImg: 'res/imClose.png', loadingImg: 'res/imLoad.gif', effect: 'fade', background: '#408000', textColor: '#000000', boxColor: '#FFDF80', startIndex: 0, loadingImg: 'res/imLoad.gif', closeImg: 'res/imClose.png', media:[{type: 'image', url: 'http://www.alrenvirotech.com/files/Accueil1.jpg' width: 950, height: 680, text: ''},{type: 'img', <br>url: 'http://www.alrenvirotech.com/files/Accueil2.jpg' width: 950, height: 680, text: ''},{type: 'img', <br>url: 'http://www.alrenvirotech.com/files/Accueil3.jpg' width: 950, height: 680, text: ''},{type: 'img', <br>url: 'http://www.alrenvirotech.com/files/Accueil4.jpg' width: 950, height: 680, text: ''},{type: 'img', <br>url: 'http://www.alrenvirotech.com/files/Accueil5.jpg' width: 950, height: 680, text: ''},{type: 'img', <br>url: 'http://www.alrenvirotech.com/files/Accueil6.jpg' width: 950, height: 680, text: ''},{type: 'img', <br>url: 'http://www.alrenvirotech.com/files/Accueil7.jpg' width: 950, height: 680, text: ''},{type: 'img', <br>url: 'http://www.alrenvirotech.com/files/Accueil8.jpg' width: 950, height: 680, text: ''},{type: 'img', <br>url: 'http://www.alrenvirotech.com/files/Accueil9.jpg' width: 950, height: 680, text: ''},{type: 'img', <br>url: 'http://www.alrenvirotech.com/files/Accueil10.jpg' width: 950, height: 680, text: ''},{type: 'img', <br>url: 'http://www.alrenvirotech.com/files/Accueil11.jpg' width: 950, height: 680, text: ''},{type: 'img', <br>url: 'http://www.alrenvirotech.com/files/Accueil12.jpg' width: 950, height: 680, text: ''},{type: 'img', <br>url: 'http://www.alrenvirotech.com/files/Accueil13.jpg' width: 950, height: 680, text: ''}]}, 0, this);">Accueil</a>
Pour le CSS du bouton voir l'insérer sous l'onglet "Avancé" (code CSS) de l'objet HTML :
Ceci est un exemple, à vous de voir celui que vous emploierez :
#myGButton1{
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font-family:Tahoma;
font-size:10pt;
font-weight:normal;
padding: .5em 2em .55em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
width:95px;
height:22px;
color: #000000;
border: solid 1px #000000;
background-color: #F06015;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F06015), to(#FEE352)); background-image: -webkit-linear-gradient(top, #F06015, #FEE352);
background-image: -moz-linear-gradient(top, #F06015, #FEE352);
background-image: -ms-linear-gradient(top, #F06015, #FEE352);
background-image: -o-linear-gradient(top, #F06015, #FEE352); background-image: linear-gradient(to bottom, #F06015, #FEE352);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F06015', endColorstr='#FEE352');
}
#myGButton1:hover {
text-decoration: none;
color: #FFFFFF;
background-color: #FEE352;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FEE352), to(#F06015));
background-image: -webkit-linear-gradient(top, #FEE352, #F06015);
background-image: -moz-linear-gradient(top, #FEE352, #F06015);
background-image: -ms-linear-gradient(top, #FEE352, #F06015);
background-image: -o-linear-gradient(top, #FEE352, #F06015);
background-image: linear-gradient(to bottom, #FEE352, #F06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEE352', endColorstr='#F06015');
}
#myGButton1:active {
position: relative;
top: 1px;
}
Et testé ici :
http://www.s315573983.onlinehome.fr/Tests-v10_pc/page-2.html