bouton Hover

4 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu bouton Hover

Message par badibou Dim 26 Jan 2014 - 20:47

Bonjour, mon premier problème est résolu mais il y en a 1 autre...

Premièrement j'ai un espace entre les boutons (Cette partie est résolu il faut réglé la même séquence dans le PA/Affichage/en-tête&Navigation et dans le CSS) mais toutes les pages HTML(et qui remplace un bouton d'origine) que j'ai ajouté et qui devraient s'ouvrir dans un nouvel onglet s'ouvre sur la même page et vont chercher la page par défaut.. EX: Calendrier me donne la page calendrier fournit avec le forum alors que moi j'avais mis un lien de redirection vers un site de stats et grille horaire... Je crois qu'il faut changer le ID #i_icon_mini_calendar et en attribuer un à ma page HTML avec un JS et le CSS mais je ne suis pas certain du comment on fait...

Voici le code CSS:

Code:
/*IMAGE INDEX*/
        #i_icon_mini_index{
           background-image:url('http://i58.servimg.com/u/f58/18/12/26/07/acceui13.jpg'); /*image si la souris ne survole pas*/
           width:76px; /*Largeur de l'image*/
           height:40px; /*Hauteur de l'image*/
        }
        #i_icon_mini_index:hover{
           background-image:url('http://i58.servimg.com/u/f58/18/12/26/07/acceui16.jpg'); /*image si la souris survole*/
           width:76px; /*Largeur de l'image*/
           height:40px; /*Hauteur de l'image*/
        }
        /*IMAGE PORTAIL*/
        #i_icon_mini_portal{
           background-image:url('http://i58.servimg.com/u/f58/18/12/26/07/portai10.jpg'); /*image si la souris ne survole pas*/
           width:76px; /*Largeur de l'image*/
           height:40px; /*Hauteur de l'image*/
        }
        #i_icon_mini_portal:hover{
           background-image:url('http://i58.servimg.com/u/f58/18/12/26/07/portai11.jpg'); /*image si la souris survole*/
           width:76px; /*Largeur de l'image*/
           height:40px; /*Hauteur de l'image*/
        }
        /*IMAGE CALENDRIER*/
        #i_icon_mini_calendar{
           background-image:url('URL'); /*image si la souris ne survole pas*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_calendar:hover{
           background-image:url('URL'); /*image si la souris survole*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE FAQ*/
        #i_icon_mini_faq{
           background-image:url('URL'); /*image si la souris ne survole pas*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_faq:hover{
           background-image:url('URL'); /*image si la souris survole*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE RECHERCHE*/
        #i_icon_mini_search{
           background-image:url('URL'); /*image si la souris ne survole pas*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_search:hover{
           background-image:url('URL'); /*image si la souris survole*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE LISTE MEMBRES*/
        #i_icon_mini_members{
           background-image:url('URL'); /*image si la souris ne survole pas*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_members:hover{
           background-image:url('URL'); /*image si la souris survole*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE GROUPES*/
        #i_icon_mini_groups{
           background-image:url('URL'); /*image si la souris ne survole pas*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_groups:hover{
           background-image:url('URL'); /*image si la souris survole*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE PROFIL*/
        #i_icon_mini_profile{
           background-image:url('URL'); /*image si la souris ne survole pas*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_profile:hover{
           background-image:url('URL'); /*image si la souris survole*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE MP (pas de nouveaux messages)*/
        #i_icon_mini_message{
           background-image:url('URL'); /*image si la souris ne survole pas*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_message:hover{
           background-image:url('URL'); /*image si la souris survole*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE MP (nouveaux messages)*/
        #i_icon_mini_new_message{
           background-image:url('URL'); /*image si la souris ne survole pas*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_new_message:hover{
           background-image:url('URL'); /*image si la souris survole*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE DECONEXION*/
        #i_icon_mini_logout{
           background-image:url('URL'); /*image si la souris ne survole pas*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_logout:hover{
           background-image:url('URL'); /*image si la souris survole*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE S'ENREGISTRER*/
        #i_icon_mini_register{
           background-image:url('URL'); /*image si la souris ne survole pas*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_register:hover{
           background-image:url('URL'); /*image si la souris survole*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE CONNEXION*/
        #i_icon_mini_login{
           background-image:url('URL'); /*image si la souris ne survole pas*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_login:hover{
           background-image:url('URL'); /*image si la souris survole*/
           width:??px; /*Largeur de l'image*/
           height:??px; /*Hauteur de l'image*/
        }


Il y aurait-il une façon d'enlever l'espace entre les boutons et que ceux qui devraient ouvrir une nouvelle page dans un nouvel onglet le fassent ?

Merci de bien vouloir m'aider !

Cdt,


Dernière édition par badibou le Ven 31 Jan 2014 - 22:39, édité 2 fois
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par badibou Lun 27 Jan 2014 - 21:11

Up!
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par WhyNot Lun 27 Jan 2014 - 21:22

Hello,

Pour faire simple : je n'ai absolument rien compris... Que voulez-vous faire exactement ?
WhyNot

WhyNot
****

Masculin
Messages : 244
Inscrit(e) le : 25/11/2013

http://whynot.forumactif.org
WhyNot a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par badibou Lun 27 Jan 2014 - 22:34

lolll, ok, bonjour Whynot ! bon pour faire simple je voudrais ajouter 2 boutons non inexistant au code CSS plus haut et qu'ils ouvres leur page dans un nouvel onglet...

Ex: j'ai fait un nouveau portail(en passant par PA/Affichage/En-tête & Navigation/Ajouter un menu personnalisé) pour qu'il s'ouvre dans un nouvel onglet.. ou Calendrier qui redirige sur un site ou il y a un calendrier sportif etc... je cherche comment intégré ces pages à mon menu..

J'espère avoir été plus limpide !!

Cdt,
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par medamine14 Mar 28 Jan 2014 - 0:18

Salut,

pour les ouverture dans un nouvel onglet
il te suffit de faire comme ceci :

 bouton Hover Captur14

Smile
medamine14

medamine14
****

Masculin
Messages : 480
Inscrit(e) le : 14/11/2013

http://one-piece.forumactif.be/
medamine14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par Invité Mar 28 Jan 2014 - 0:26

Bjr a tous ,

Je n’arrive pas à installer ce code pour le changement de mes boutons du + et du - système de réputation
J'ai pourtant suis à la lettre cette aide ; https://forum.forumactif.com/t316611-changer-l-image-des-signes-et-de-reputation#2757654  Mais rien n'y fait ...

Qui peut m'aider ? SVP
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par badibou Mar 28 Jan 2014 - 1:53

medamine14 a écrit:Salut,

pour les ouverture dans un nouvel onglet
il te suffit de faire comme ceci :

 bouton Hover Captur14

Smile

Bonjour Medamine, j'ai essayé cette solution mais dans le PA on ne peut rien changer :

 bouton Hover Tout10

C'est pourquoi j'avais créé une page "Portail" qui me donnais accès aux options... mais comme le code CSS plus haut ne tien compte que des ID déjà utilisés par le CSS "de base", il prend en compte l'autre page nommée "Portail" et je ne peux donc associés mes pages créés avec les boutons et avoir les options...

J'espère que je suis assez claire dans mes explications..

Cdt,
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par medamine14 Mar 28 Jan 2014 - 10:27

ça marche pas avec Accueil/portail de base Smile
il marche avec les menu que tu crée Wink
medamine14

medamine14
****

Masculin
Messages : 480
Inscrit(e) le : 14/11/2013

http://one-piece.forumactif.be/
medamine14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par Adam_sfp Mar 28 Jan 2014 - 11:19

Bonjour

Si j'ai bien compris..
Vous pouvez essayez en rajoutant via PA/Affichage/En-tête & Navigation/Ajouter un menu personnalisé

Essayez en mettant dans URL de redirection par exemple
Code:
http://google.com/" target="blank

Cdt.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par badibou Mar 28 Jan 2014 - 17:28

Adam_sfp a écrit:Bonjour

Si j'ai bien compris..
Vous pouvez essayez en rajoutant via PA/Affichage/En-tête & Navigation/Ajouter un menu personnalisé

Essayez en mettant dans URL de redirection par exemple
Code:
http://google.com/" target="blank

Cdt.

Bonjour Adam_sfp, j'ai essayé mais sans résultat...

La page calendar n'est pas modifiable et j'en avais créé une autre dans le temps:
 bouton Hover Calend10

J'ai ajouté le code que vous m'avez donné dans celle que j'avais créé:

 bouton Hover Cal10

De plus j'ai ajouté un code au CSS pour que le bouton calendrier(calendar) n'apparaisse plus:
Code:
a.mainmenu[href="http://spt1.forum-canada.com/calendar"] { display: none; }
comme j'avais fait pour le portail
Code:
a.mainmenu[href="http://spt1.forum-canada.com/portal"] { display: none; }
avec mes boutons qui n'avaient pas de hover.

Merci !

Cdt,


Medamine a écrit: par medamine14 le Mar 28 Jan 2014 - 4:27
ça marche pas avec Accueil/portail de base
il marche avec les menu que tu crée

Bonjour Medamine.

Oui je crois que c'est relié puisque si tu bouge un menu(comme dans le cas de mes nouvelles pages de remplacement) et qu'il n'est pas à la même place que dans le CSS cela crée un espace entre les boutons.

 bouton Hover Menumo10

 bouton Hover Menuim10

Et si je mets la séquence identique dans le CSS et le menu:

Code:
 #i_icon_mini_index{
          background-image:url('http://i58.servimg.com/u/f58/18/12/26/07/acceui13.jpg'); /*image si la souris ne survole pas*/
          width:76px; /*Largeur de l'image*/
          height:40px; /*Hauteur de l'image*/
        }
        #i_icon_mini_index:hover{
          background-image:url('http://i58.servimg.com/u/f58/18/12/26/07/acceui16.jpg'); /*image si la souris survole*/
          width:76px; /*Largeur de l'image*/
          height:40px; /*Hauteur de l'image*/
        }
        /*IMAGE PORTAIL*/
        #i_icon_mini_portal{
          background-image:url('http://i58.servimg.com/u/f58/18/12/26/07/portai12.jpg'); /*image si la souris ne survole pas*/
          width:76px; /*Largeur de l'image*/
          height:40px; /*Hauteur de l'image*/
        }
        #i_icon_mini_portal:hover{
          background-image:url('http://i58.servimg.com/u/f58/18/12/26/07/portai13.jpg'); /*image si la souris survole*/
          width:76px; /*Largeur de l'image*/
          height:40px; /*Hauteur de l'image*/
        }
        /*IMAGE CALENDRIER*/
        #i_icon_mini_calendar{
          background-image:url('http://i58.servimg.com/u/f58/18/12/26/07/calend12.jpg'); /*image si la souris ne survole pas*/
          width:99px; /*Largeur de l'image*/
          height:40px; /*Hauteur de l'image*/
        }
        #i_icon_mini_calendar:hover{
          background-image:url('http://i58.servimg.com/u/f58/18/12/26/07/calend13.jpg'); /*image si la souris survole*/
          width:99px; /*Largeur de l'image*/
          height:40px; /*Hauteur de l'image*/
        }
        /*IMAGE LISTE MEMBRES*/
        #i_icon_mini_members{
          background-image:url('http://i58.servimg.com/u/f58/18/12/26/07/membre12.jpg'); /*image si la souris ne survole pas*/
          width:90px; /*Largeur de l'image*/
          height:40px; /*Hauteur de l'image*/
        }
        #i_icon_mini_members:hover{
          background-image:url('http://i58.servimg.com/u/f58/18/12/26/07/membre13.jpg'); /*image si la souris survole*/
          width:90px; /*Largeur de l'image*/
          height:40px; /*Hauteur de l'image*/

Dans le panneau:

 bouton Hover Pannem10

Et le résultat:

 bouton Hover Menuse10


Merci !

Cdt,
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par Adam_sfp Mar 28 Jan 2014 - 20:47

Bonsoir

Vous voulez ouvrir quel lien dans une nouvelle page?
le calendrier du forum ou un lien externe?

Cdt.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par badibou Mar 28 Jan 2014 - 21:17

Adam_sfp a écrit:Bonsoir

Vous voulez ouvrir quel lien dans une nouvelle page?
le calendrier du forum ou un lien externe?

Cdt.

Bonjour, le portail dans une nouvelle page et un lien externe nommé "Calendrier" de statistiques et de pointage.. http://www.sportstats.com/hockey/usa/nhl/

Cdt,
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par Adam_sfp Mar 28 Jan 2014 - 21:37

Bonsoir

Pour etre sur d'avoir bien compris vous voulez ajouter un bouton dans
PA/Affichage/En-tête & Navigation/Ajouter un menu personnalisé

Par exemple un bouton calendar
avec une image et qu'il ouvre ce lien http://www.sportstats.com/hockey/usa/nhl/ dans un nouvel onglet?
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par badibou Mar 28 Jan 2014 - 21:46

Exact !
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par Adam_sfp Mar 28 Jan 2014 - 21:55

Bonsoir

Essayez en mettant dans
PA/Affichage/En-tête & Navigation/Ajouter un menu personnalisé
Dans image le lien de votre image
et dans
Url de redirection
Code:
http://www.sportstats.com/hockey/usa/nhl/" target="blank

Cdt.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par badibou Mar 28 Jan 2014 - 22:26

Bonjour Adam, cela fonctionne comme ça mais le bouton n'est pas hover.. http://spt1.forum-canada.com/

Cdt.
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par medamine14 Mar 28 Jan 2014 - 23:25

Re,

il faut lui donné l'id que tu utilise dans ton css Wink
comme ceci :

Code:
http://2img.net/i/fa/empty.gif" id="i_icon_mini_calendar

dans l'url de l'image Smile
medamine14

medamine14
****

Masculin
Messages : 480
Inscrit(e) le : 14/11/2013

http://one-piece.forumactif.be/
medamine14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par badibou Mer 29 Jan 2014 - 0:48

medamine14 a écrit:Re,

il faut lui donné l'id que tu utilise dans ton css Wink
comme ceci :

Code:
http://2img.net/i/fa/empty.gif" id="i_icon_mini_calendar

dans l'url de l'image Smile

Bonsoir, j'ai mis votre code mais cela donne le même résultat que le code que Adam m'a fournit.. c'est-à-dire que le hover ne fonctionne pas..

Code:
http://i58.servimg.com/u/f58/18/12/26/07/calend13.jpg" id="i_icon_mini_calendar

J'ai rien dit cela fonctionne  Yes 

Merci !!
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par badibou Mer 29 Jan 2014 - 1:19

Il ne reste qu'un souci.. les 2 boutons que je remplace reste visible en Admin...

 bouton Hover Rest10

Merci encore !

Cdt,
EDIT!: Chose étrange j'ai réussis à faire "disparaitre" le bouton Portail en le remontant en dessous de l'autre dans la liste du PA(mais ne s'ouvre plus dans une nouvelle page) et ça ne fonctionne pas avec le calendrier...  Assomé 
EDIT2:
Question par curiosité.. comment faire comme ceci dans le TUTO de Choupette: Pour un remplacement immédiat sans temps de chargement ( la première fois ), vous pourriez avoir l'image et son remplacement sur la même "image" et utiliser la propriété background-position dans le CSS pour faire apparaître l'une ou l'autre.
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par badibou Jeu 30 Jan 2014 - 1:10

Up!
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par badibou Ven 31 Jan 2014 - 1:35

Up! Bonjour, avant de vouloir mettre le hover j'avais ce code pour ne pas qu'un 2e boutons identique apparaisse...

Code:
a.mainmenu[href="http://spt1.forum-canada.com/calendar"] { display: none; }

Faudrait-il le changer d'attribut ?  Interrog ke sais pas.. a.mainmenu.hover....

Cdt,
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: bouton Hover

Message par medamine14 Ven 31 Jan 2014 - 9:01

Salut,

pour le problème de portail, tu as pas bien mis l'id dans l'image Wink
si tu arrive pas passe moi le code Smile

pour l'autre problème je pense que c'est celui la le bon :

Code:
a.mainmenu[href="/calendar"] {display: none;}

essaye le et dis moi si c'est bon ^^
medamine14

medamine14
****

Masculin
Messages : 480
Inscrit(e) le : 14/11/2013

http://one-piece.forumactif.be/
medamine14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton Hover

Message par badibou Ven 31 Jan 2014 - 9:29

medamine14 a écrit:Salut,

pour le problème de portail, tu as pas bien mis l'id dans l'image Wink
si tu arrive pas passe moi le code Smile

pour l'autre problème je pense que c'est celui la le bon :

Code:
a.mainmenu[href="/calendar"] {display: none;}

essaye le et dis moi si c'est bon ^^

Mon ami, tu dis que t'es pas un pro... mais tu es meilleur que tu crois... !!

Merci encore et encore !

Cdt, Badi !
badibou

badibou
*****

Masculin
Messages : 609
Inscrit(e) le : 14/02/2013

http://www.forumdessports.com
badibou a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum