Survol catégories

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

Résolu Survol catégories

Message par binuch le Dim 11 Mai 2014 - 7:49

Bonjour,

je sais que l'on peut modifier la couleur d'une catégorie lorsque l'on la survole. Ok, par contre, es-ce que l'on peut insérer une image lorsque l'on survole une catégorie. L'idée serait d'avoir une image qui représente cette catégorie, à chaque fois qu'on la survole..

merci à vous

binuch
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 08/05/2014

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

Résolu Re: Survol catégories

Message par Milouze14 le Dim 11 Mai 2014 - 8:24

Salut binuch,

il faudrait déjà renseigner dans ton profil la version de ton forum :
phpbb2, phpbb3, punbb, invision

Ensuite , oui c'est réalisable  Wink 

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4569
Inscrit(e) le : 18/04/2005

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

Résolu Re: Survol catégories

Message par binuch le Dim 11 Mai 2014 - 8:32

bonjour et pardon pour cet oubli, version phpBB3  Very Happy 

binuch
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 08/05/2014

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

Résolu Re: Survol catégories

Message par Milouze14 le Dim 11 Mai 2014 - 9:14

Re,
dans le profil aurait été plus judicieux en respect pour les personnes
venant te donner un coup de main.


Pour que l'astuce fonctionne il faut impérativement avoir cette structure :

Affichage/Page d'acceuil/    
Structure et hiérarchie
/Séparer les catégories sur l'index :

Cocher sur complet

Bref , je vais t'expliquer le fonctionnement .
Il faut rechercher le lien de la catégorie et ensuite on le place  en partie dans le script

Passes le curseur de la souris sur le premier lien de ta catégorie et en bas de ton navigateur tu auras
le chemin comme le montre cette image:



Le lien sur mon forum de test est celui-ci:
Code:
/c1-votre-1ere-categorie

Dans le script , on ne mettra que :
Code:
/c1

On va créer un script pour ta première catégorie:
Modules/HTML&JAVASCRIPT/
Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un texte explicite .

Cocher sur l'index
Ajoutes ceci:

Code:

//LA PREMIERE CATEGORIE
$( document ).ready(function() {
$('#main-content').find('a[href*="/c1"]').closest('.forabg').wrap('<div id="M14_Cat1"></div>');
});

On place la partie du lien ici

Code:

('a[href*="/c1"]')

Code:

.wrap('<div id="M14_Cat1"></div>');

Ce code changera à chaque catégorie


Penses à cliquer sur le bouton

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Colle ceci:

Code:

#M14_Cat1 .forabg li.row:hover
{
background-image:url(LE LIEN DE TON IMAGE);
background-repeat:no-repeat;/*l image se sera pas repetee*/
background-position: center center;/* on positionne l image au centre absolu */
}
Penses à cliquer sur le bouton


Voilà pour la première catégorie  Wink .

Pour les autres ?
Ben on recommence

Exemple pour la catégorie 2

Le script sera ainsi:

Code:

//LA DEUXIEME CATEGORIE
$( document ).ready(function() {
$('#main-content').find('a[href*="/c2"]').closest('.forabg').wrap('<div id="M14_Cat2"></div>');
});

Les parties modifiées;
Code:

('a[href*="/c2"]')

Code:

.wrap('<div id="M14_Cat2"></div>');


La C.S.S :

Code:

#M14_Cat2 .forabg li.row:hover
{
background-image:url(LE LIEN DE TON IMAGE);
background-repeat:no-repeat;/*l image se sera pas repetee*/
background-position: center center;/* on positionne l image au centre absolu */
}


Amuses toi bien  Wink 
Edit:

je vois que sur ton forum tu as des forums contenant des sous forums ,
comme celui-ci:
Les fabricants et les marques de 1/6 et 1/4
il faudra donc changer le /cXXX  par /f23
a++


Dernière édition par Milouze14 le Dim 11 Mai 2014 - 10:39, édité 1 fois

Milouze14
+ Hyperactif +

Masculin
Messages : 4569
Inscrit(e) le : 18/04/2005

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

Résolu Re: Survol catégories

Message par binuch le Dim 11 Mai 2014 - 10:11

Assomé ouch !
merci pour ton explication, mais je me plante quelque part  Mad 
es-ce le lien de mon image ? je l'insére où il y a les parentheses, mais rien ne s'affiche .. les débuts sont difficiles  silent j'ai bien mis mon code "f90" (par exemple), à la place de ton "c1"... mais non..

binuch
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 08/05/2014

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

Résolu Re: Survol catégories

Message par Milouze14 le Dim 11 Mai 2014 - 10:25

Re,

dans le code source de ton forum je ne vois pas le script  Exclamation  .

Tu peux donner le contenu du script ici stp dans les balise codes  Wink .

Tu as bien neuf "Catégories" ou en as tu des cachées aux invités ?

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4569
Inscrit(e) le : 18/04/2005

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

Résolu Re: Survol catégories

Message par binuch le Dim 11 Mai 2014 - 10:35

alors voici mon code


//LA PREMIERE CATEGORIE
$( document ).ready(function() {
$('#main-content').find('a[href*="/f90"]').closest('.forabg').wrap('<div id="M14_Cat1"></div>');
});


j'ai inséré "f90" à la place de ton "c1", cela correspond à la catégorie :"
Toutes les statues, bustes, résines et figurines articulées"

binuch
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 08/05/2014

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

Résolu Re: Survol catégories

Message par Milouze14 le Dim 11 Mai 2014 - 10:44

Re,

oups j'ai oublié de mentionner sur l'astuce qu'il fallait
mettre un titre explicite comme "Catégories individuellement personnalisees"
et de cocher sur l index  Wink  .

Donc édites le javascript et coches sur l'index :




Penses à cliquer sur le bouton



Edit voici ton script complet suivant le visuel d un invité

Code:


//LA PREMIERE
$( document ).ready(function() {
$('#main-content').find('a[href*="/c1"]').closest('.forabg').wrap('<div id="M14_Cat1"></div>');
});

//LA DEUXIEME
$( document ).ready(function() {
$('#main-content').find('a[href*="/f23"]').closest('.forabg').wrap('<div id="M14_Cat2"></div>');
});

//LA TROISIEME
$( document ).ready(function() {
$('#main-content').find('a[href*="/f90"]').closest('.forabg').wrap('<div id="M14_Cat3"></div>');
});

//LA QUATRIEME
$( document ).ready(function() {
$('#main-content').find('a[href*="/f30"]').closest('.forabg').wrap('<div id="M14_Cat4"></div>');
});

//LA CINQUIEME
$( document ).ready(function() {
$('#main-content').find('a[href*="/f31"]').closest('.forabg').wrap('<div id="M14_Cat5"></div>');
});

//LA SIXIEME
$( document ).ready(function() {
$('#main-content').find('a[href*="/f46"]').closest('.forabg').wrap('<div id="M14_Cat6"></div>');
});

//LA SEPTIEME
$( document ).ready(function() {
$('#main-content').find('a[href*="/f63"]').closest('.forabg').wrap('<div id="M14_Cat7"></div>');
});

//LA HUITIEME
$( document ).ready(function() {
$('#main-content').find('a[href*="/f38"]').closest('.forabg').wrap('<div id="M14_Cat8"></div>');
});


//LA NEUVIEME
$( document ).ready(function() {
$('#main-content').find('a[href*="/f39"]').closest('.forabg').wrap('<div id="M14_Cat9"></div>');
});



Puis la feuille de style:
Code:

/*PREMIERE CATEGORIE*/
#M14_Cat1 .forabg li.row:hover
{
background-image:url(LE LIEN DE TON IMAGE);
background-repeat:no-repeat;/*l image se sera pas repetee*/
background-position: center center;/* on positionne l image au centre absolu */
}

/*DEUXIEME CATEGORIE*/
#M14_Cat2 .forabg li.row:hover
{
background-image:url(LE LIEN DE TON IMAGE);
background-repeat:no-repeat;/*l image se sera pas repetee*/
background-position: center center;/* on positionne l image au centre absolu */
}
/*TROISIEME CATEGORIE*/
#M14_Cat3 .forabg li.row:hover
{
background-image:url(LE LIEN DE TON IMAGE);
background-repeat:no-repeat;/*l image se sera pas repetee*/
background-position: center center;/* on positionne l image au centre absolu */
}
/*QUATRIEME CATEGORIE*/
#M14_Cat4 .forabg li.row:hover
{
background-image:url(LE LIEN DE TON IMAGE);
background-repeat:no-repeat;/*l image se sera pas repetee*/
background-position: center center;/* on positionne l image au centre absolu */
}
/*CINQUIEME CATEGORIE*/
#M14_Cat5 .forabg li.row:hover
{
background-image:url(LE LIEN DE TON IMAGE);
background-repeat:no-repeat;/*l image se sera pas repetee*/
background-position: center center;/* on positionne l image au centre absolu */
}
/*SIXIEME CATEGORIE*/
#M14_Cat6 .forabg li.row:hover
{
background-image:url(LE LIEN DE TON IMAGE);
background-repeat:no-repeat;/*l image se sera pas repetee*/
background-position: center center;/* on positionne l image au centre absolu */
}
/*SEPTIEME CATEGORIE*/
#M14_Cat7 .forabg li.row:hover
{
background-image:url(LE LIEN DE TON IMAGE);
background-repeat:no-repeat;/*l image se sera pas repetee*/
background-position: center center;/* on positionne l image au centre absolu */
}
/*HUITIEME CATEGORIE*/
#M14_Cat8 .forabg li.row:hover
{
background-image:url(LE LIEN DE TON IMAGE);
background-repeat:no-repeat;/*l image se sera pas repetee*/
background-position: center center;/* on positionne l image au centre absolu */
}
/*NEUVIEME CATEGORIE*/
#M14_Cat9 .forabg li.row:hover
{
background-image:url(LE LIEN DE TON IMAGE);
background-repeat:no-repeat;/*l image se sera pas repetee*/
background-position: center center;/* on positionne l image au centre absolu */
}


a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4569
Inscrit(e) le : 18/04/2005

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

Résolu Re: Survol catégories

Message par binuch le Dim 11 Mai 2014 - 12:06

un grand merci, dernière petite chose, ça ne fonctionne pas, où es-ce que je fait faux ? exemple d'une écriture :

/*PREMIERE CATEGORIE*/
#M14_Cat1 .forabg li.row:hover
{
background-image:https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRhe2rCGSFHqqsbBYJJiMHX5koTYioTA8qDnTI9HSsn_4FEcgTV;
background-repeat:no-repeat;/*l image se sera pas repetee*/
background-position: center center;/* on positionne l image au centre absolu */
}

je pense que c'est dans l'insertion de l'adresse de l'image que je me plantes  Gloups 

binuch
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 08/05/2014

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

Résolu Re: Survol catégories

Message par Milouze14 le Dim 11 Mai 2014 - 12:29

Re,
le lien est erroné ou mal reconnu:
En passant par l'hébergeur du forum , çà doit être bon
Code:

/*PREMIERE CATEGORIE*/
#M14_Cat1 .forabg li.row:hover
{
background-image:url(http://i56.servimg.com/u/f56/11/26/21/37/images11.jpg);
background-repeat:no-repeat;/*l image se sera pas repetee*/
background-position: center center;/* on positionne l image au centre absolu */
}

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4569
Inscrit(e) le : 18/04/2005

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

Résolu Re: Survol catégories

Message par binuch le Dim 11 Mai 2014 - 12:50

un grand merci pour ta patience et toutes tes explications, c'est très chic  Affirmatif 

binuch
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 08/05/2014

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

Résolu Re: Survol catégories

Message par Chacha le Dim 18 Mai 2014 - 10:22

Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 49812
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

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


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