Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

par jackhay Mar 2 Avr 2013 - 15:54

Bonjour à vous.

J'ai vu un truc sympa sur un forum d'alliance (mon forum est dédié à un jeu sur navigateur): des bouton-icônes renvoyant à des sites web en rapport avec notre jeu se trouvent sur l'accueil du forum et au passage de la souris, les icônes se déploient. Lorsqu'on clique dessus, on a accès au site web voulu.

Je vous mets un imprim écran:
Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum Demand10

Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum Demand10

Vous pouvez voir à gauche 4 icônes. Leurs positions restent fixes lorsque l'on navigue sur la page.

J'ai essayé de comprendre un peu le code source, mais n'ayant pas vraiment les compétences de développeur (je n'ai été initié qu'au C++ et je suis loin de le maitriser d'ailleurs Mr. Green

), je me retourne vers vous pour voir si ça serait possible de me faire un code pour que je puisse avoir un rendu similaire sur mon forum (pouvoir choisir les images et les sites web associés à chaque bouton). Si possible, avoir les icônes présentes sur toutes les pages de mon forum.

Pour info, j'ai la page d'accueil d'origine sur mon forum et je n'ai pas encore créé de page HTML sur mon forum.

Merci par avance.

Cordialement,

Jackhay

par jackhay Ven 5 Avr 2013 - 13:42

Up plz

par Scipion Ven 5 Avr 2013 - 14:11

Bonjour

Le cas échéant, il vous est possible d'opter pour une solution alternative consistant à installer un panneau coulissant que vous pourrez personnaliser autant que vous le souhaitez :

Créer un panneau latéral coulissant

Cordialement

par Matriochka Ven 5 Avr 2013 - 14:35

Bonjour,

Il y a moyen de réaliser ceci avec un peu de HTML et de CSS (sans passer par le panneau coulissant, donc).

Pour ça, va dans Panneau d’administration > Affichage > Templates > Général. Ouvre le template overall_header et trouve le début de la balise body :

Code:: <body …

Juste après celle-ci, place les différentes images que tu veux, avec les liens de ton choix en attribuant une class aux icônes (pour ensuite les modifier via CSS) :

Code:: <a href="#"><img src="#" class="imghead1" /></a>

Là, j’ai mis une première image que j’ai appelé imghead1.

Une fois que tu as intégré ton image, tu vas dans Panneau d’administration > Affichage > Couleurs > Feuille de styles CSS. Là, on va donc modifier l’image qu’on a mise dans le template ainsi :

Par défaut

Code:: .imghead1 {}

Au survol

Code:: .imghead1:hover {}

Voilà donc ce qu’on pourrait avoir +/- :

Code:: .imghead1 { position:absolute; /* élément flottant */ top:50px; /* position par rapport au bord haut*/ left:5px; /* position par rapport au bord gauche */}

Et au survol :

Code:: .imghead1 { left:15px; /* position par rapport au bord gauche - on déplace l’image de 10 pixels */}

Et si on veut ajouter un effet de transition :
https://forum.forumactif.com/t345726-ajouter-un-effet-de-transition-sur-les-liens

Code:: .imghead1 { left:15px; /* position par rapport au bord gauche - on déplace l’image de 10 pixels */ -moz-transition:all 0.5s; /* Mozilla Firefox */ -webkit-transition:all 0.5s; /* Safari et Google Chrome */ -o-transition:all 0.5s; /* Opera */ transition:all 0.5s;}

N’hésite pas si tu as une question Smile

par jackhay Ven 5 Avr 2013 - 14:48

Merci pour votre aide.

Scipion > je vais essayer d'installer ça sur mon forum. Sachant que je voudrais mettre 2 ou 3 icônes (4 grand maximum je pense), je vais voir le rendu final, ce que ça va donner. Je vous tiens au courant.

Matriochka > mon forum est sous phpBB3, donc pas accès aux templates. Est-ce qu'il y aurait un autre moyen de réaliser ce que tu me proposes ?

par Matriochka Ven 5 Avr 2013 - 14:51

Graaah, flûte ! Désolée, je n’avais pas vu ton profil ::betise::

Sinon, oui, il y a bien moyen d’appliquer ça sans passer par les templates, ça implique un script de ce type :

Code:: $(function(){ $("body").append(' … ') });

À la place des points de suspension, on place donc le HTML (en chaîne, donc sans utiliser d’espace ou de retour à la ligne).

Le script serait à placer sur toutes les pages.

par jackhay Ven 5 Avr 2013 - 15:08

Ok, super

Je teste ça (ta proposition et celle de Scipion) et je vous tiens au courant (je vais voir le rendu final et selon, je verrai ce que je conserve ^^).

EDIT: pour les classes, à chaque image, une nouvelle classe ? En reprenant ton exemple, si je mets une 2ème image, je devrais l'appeler imghead2 ?

par Matriochka Ven 5 Avr 2013 - 15:13

EDIT: pour les classes, à chaque image, une nouvelle classe ? En reprenant ton exemple, si je mets une 2ème image, je devrais l'appeler imghead2 ?

C’est ça

par jackhay Ven 5 Avr 2013 - 15:17

Ok (je n'ai fait que du C++ dans ma scolarité et je suis le loin de le maîtriser, alors merci pour ton aide ^^)

Je teste ça et je vous donne des nouvelles rapidement.

par jackhay Ven 5 Avr 2013 - 16:26

J'ai mis en place ce que tu m'as proposé de faire. C'est pas encore ça (par rapport à ce que je voudrais faire). Pour être plus clair, je vais te donner le lien du forum que j'aimerais "copier": http://alliancefdnv.ogameunivers.com/

Tu peux voir à gauche, les boutons qui se déploient au passage de la souris. J'aimerais avoir le même type d'icônes. Est-ce que c'est possible avec ce que tu m'as proposé, Matriochka ? En particulier, le design des boutons, le fait qu'ils restent fixes lorsque l'on défile la page internet et aussi la possibilité d'ouvrir une nouvelle page internet au clic sur l'icône.

par Matriochka Ven 5 Avr 2013 - 16:29

Tu peux voir à gauche, les boutons qui se déploient au passage de la souris. J'aimerais avoir le même type d'icônes. Est-ce que c'est possible avec ce que tu m'as proposé, Matriochka ? En particulier, le design des boutons, le fait qu'ils restent fixes lorsque l'on défile la page internet et aussi la possibilité d'ouvrir une nouvelle page internet au clic sur l'icône.

Oui, tout ça me paraît possible avec le Javascript que je t’ai donné plus haut. Si tu veux, on peut faire étape par étape pour chacune de tes icônes.

par jackhay Ven 5 Avr 2013 - 16:44

Ça serait super !

Je te donne les liens avec les images que je voudrais leur associer (les images ne sont pas toutes à la même tailles, certaines étant parfois un peu grandes pour servir d'icônes et elles n'ont pas également le même gabarit; je ne sais pas si c'est possible de les utiliser et de les mettre toutes à la même taille (un redimensionnement quoi)):

Lien de la 1ère icône: https://i.servimg.com/u/f72/18/14/40/57/logo_w10.jpg
Site web associé: http://www.war-riders.de/?lang=fr&uni=67

Lien de la 2ème icône: https://i.servimg.com/u/f72/18/14/40/57/logo-g10.png
Site web associé: http://www.gamewinner.fr/ogame-simulateur-combat.html

Lien de la 3ème icône: https://i.servimg.com/u/f72/18/14/40/57/logo_s10.png
Site web associé: http://websim.speedsim.net/index.php?lang=fr

Lien de la 4ème icône: https://i.servimg.com/u/f72/18/14/40/57/lgo_og10.png
Site web associé: http://board.ogame.fr/board95-la-vie-des-univers/board1853-univers-67-capella/board1553-uni-67/

Merci encore pour le temps accordé à ma requête Wink

par Matriochka Ven 5 Avr 2013 - 17:09

Merci pour les liens Smile

Alors, on va commencer avec une image, dans un premier temps. Je vais te montrer la marche à suivre, et tu pourras ensuite insérer les autres images. Ça te permettra d’apprendre et de comprendre ce qu’on fait Wink

Donc on reprend le script que j’ai donné plus haut et on intègre la première image avec le lien :

Code:: $(function(){ $("body").append('<a href="http://www.war-riders.de/?lang=fr&uni=67" target="_blank"><img class="imghead1" src="http://i72.servimg.com/u/f72/18/14/40/57/logo_w10.jpg" /></a>') });

Pour info, on met target="_blank" dans la déclaration du lien pour que celui-ci ouvre un nouvel onglet.

Entre chaque image, il faudra mettre un saut de ligne, en HTML : <br />

par jackhay Ven 5 Avr 2013 - 17:32

Oui, pas de problème. Ça me permettra d'apprendre effectivement.

Pour cette étape là, c'est bon, je viens de la faire. Maintenant, je suppose qu'il va falloir un peu coder dans le CSS.

par Matriochka Ven 5 Avr 2013 - 17:39

En effet, maintenant il va falloir appliquer du CSS sur cette première image Smile

Donc on va reprendre ce que j’ai donné plus haut (je vais juste corriger car j’ai fait des fautes :O:

) :

Code:: .imghead1 { position:absolute; /* élément flottant */ top:50px; /* position par rapport au bord haut*/ left:-120px; /* position par rapport au bord gauche */}

Ici, j’ai mis -120px, pour que l’image soit cachée à gauche.

Ensuite, pour faire bouger l’image au survol, on utilisera :

Code:: .imghead1:hover { left:0px; /* position par rapport au bord gauche - on déplace l’image de 10 pixels */ -moz-transition:all 0.5s; /* Mozilla Firefox */ -webkit-transition:all 0.5s; /* Safari et Google Chrome */ -o-transition:all 0.5s; /* Opera */ transition:all 0.5s;}

Au besoin, on peut aussi mettre un contour sur l’image, un effet d’opacité, etc. Bref, c’est assez libre, là le code donné est une base qu’on peut modifier aisément.

Il faudrait par contre voir à avoir des images de tailles égales. Tu devrais redimensionner ça en utilisant un logiciel de retouche Smile

par jackhay Ven 5 Avr 2013 - 17:45

Ouais, j'y pensais à ça (j'utilise Inkscape pour tous mes logos, ça devrait le faire).

Je mets tout ça en place sur la première image et je te tiens au courant. Et une fois que ça sera bien en place, j'essayerai de voir pour tous les effets que je peux rajouter sur le "bouton".

par jackhay Ven 5 Avr 2013 - 17:50

Désolé pour les doubles posts (surtout que je viens de poster celui du dessus il y a peu de temps).

Deux mots: BRAVO et MERCI Matriochka !!! Vous faites vraiment du super boulot, surtout pour ceux comme moi qui n'ont pas forcément tous les outils en main pour arriver à leur fin.

Impeccable, par contre, est-ce qu'il serait possible de rendre le widget fixe lors du défilement de la page internet ?

par Matriochka Ven 5 Avr 2013 - 17:54

N’hésite pas à éditer tes messages quand c’est comme ça, je repasse toujours voir plusieurs fois s’il y a des édits entre temps Razz

Ravie de voir que ça fonctionne comme tu veux.

Donc pour fixer les images, dans le CSS tu peux remplacer position:absolute; par position:fixed;

par jackhay Ven 5 Avr 2013 - 17:58

Oui, j'avais peur de me faire oublier, c'est pour ça que j'ai préféré le double post Razz

Promis, je ne le referai plus Smile

Merci, j'ai trouvé avec un peu de recherche. Position:fixed règle en effet mon problème.

Merci encore une fois Matriochka, et aussi Scipion. Je vais éditer mon premier message car mon pb est maintenant résolu.

A bientôt et bon week end à toi Wink

Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum

Re: Icônes renvoyant sur d'autres sites à insérer sur chaque page du forum