Survol catégories

[binuch]

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

[Invité]

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   

a++

[binuch]

bonjour et pardon pour cet oubli, version phpBB3   

[Invité]

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   .

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

[binuch]

 ouch !
merci pour ton explication, mais je me plante quelque part   
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   j'ai bien mis mon code "f90" (par exemple), à la place de ton "c1"... mais non..

[Invité]

Re,

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

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

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

a++

[binuch]

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"

[Invité]

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    .

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

[binuch]

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   

[Invité]

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

[binuch]

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

[Chacha]

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