WebSite X5Help Center

 
Jean-Christophe H.
Jean-Christophe H.
User

Version 10, bouton dégradé  fr

Autor: Jean-Christophe H.
Visitado 2304, Followers 2, Compartido 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?

Publicado en
7 RESPUESTAS - 1 ÚTIL - 1 CORRECTO
Samuel V.
Samuel V.
User

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 :

<!-- Buttons.Gradient Button: START --> <style> #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:80px; 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; } </style> <a href="http://www.websitex5.com" id="myGButton1">Insert Text</a> <!-- Buttons.Gradient Button: END -->

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...

Leer más
Publicado en de Samuel V.
Jean-Christophe H.
Jean-Christophe H.
User
Autor

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

Leer más
Publicado en de Jean-Christophe H.
JiPeR 48
JiPeR 48
Moderator
Usuario del mes FR

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.

Leer más
Publicado en de JiPeR 48
Jean-Christophe H.
Jean-Christophe H.
User
Autor

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

Leer más
Publicado en de Jean-Christophe H.
Mimoune .
Mimoune .
User
Jean-Christophe H.
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: '<b>files/Accueil1.jpg'</b>, 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

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

Leer más
Publicado en de Mimoune .
Jean-Christophe H.
Jean-Christophe H.
User
Autor

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.

Leer más
Publicado en de Jean-Christophe H.
Mimoune .
Mimoune .
User

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

Leer más
Publicado en de Mimoune .