AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Remplacer un onglet cliquable par une image

    Partagez
    avatar
    Lone wanderer
    MasculinAge : 26Messages : 154

    le Sam 8 Sep 2018 - 22:43

    Ma demande



    Bonjour à vous !

    Alors voilà, je suis actuellement sur un projet de forum avec un graphiste, et faute de mieux, je suis le codeuriiiiish ? plus ou moins ! ><
    Et donc j'ai une difficultée pour arriver à un résultat demandé : j'ai suivi ce tutoriel afin de me rapprocher de sa demande (des catégories qui ne s'affichent qu'une seule à la fois, cliquables par onglets) et ça j'ai réussi, rien de bien compliqué :)
    Par contre où ça se corse c'est que à la place de genre "onglet1", "onglet2" ou "onglet3" je voudrais mettre des images, à chaque fois différentes ! Et donc c'est là que je bute. J'ai cherché dans le HTML, dans le CSS et dans le Javascript, rien n'a l'air de faire référence à chacun des liens séparés, c'est uniquement groupé... Donc ça signifie qu'il faut que j'écrive du code et je ne sais pas par où commence rpour atteindre mon résultat Sad Est-ce que vous pourriez m'aider ou au moins m'expliquer comment faire pour remplacer ces onglets textuels par des images s'il vous plaît ? Merci d'avance ! ^^


    Schéma(s) et Eléments


    Schémas : Taupe secret ! Razz
    Tailles des éléments : moins de 800px mais indifférent, je ferai les règlages moi-même ! Razz
    Effets voulus : NOPE ! Juste qu'on me fasse une ligne de code dans le HTML pour mettre une image à la place de "administration", "hors-jeu" et "le roleplay", merci ^^
    Version de votre forum : PHPBB2


    Ressources


    Le Index_box :
    Spoiler:
    Code:
    <link href="https://fonts.googleapis.com/css?family=Acme|Six+Caps" rel="stylesheet">

    <div id="conteneur_ongletsvo"><table><tr><td class="ongletvo"><div>Administration</div></td><td class="ongletvo">Le Roleplay</div></td><td class="ongletvo">Hors-jeu</div></td></tr></table></div><div id="conteneur_categoriesvo"><!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categorievo">

    <div class="forumline2">
    <div class="categorie_titre">{catrow.tablehead.L_FORUM}</div>

    <!-- END tablehead -->

    <!-- BEGIN forumrow -->
       
    <div class="forum_bloc">
      <div class="forum_left">
        <div class="sous_forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
        <div class="forum_description">{catrow.forumrow.FORUM_DESC}</div>
      </div>
      <div class="forum_stats"><span class="stats1">{catrow.forumrow.TOPICS}</span>sujets
        <br />
        <span class="stats1">{catrow.forumrow.POSTS}</span>messages</div>
      <div class="forum_right">
        <span class="forum_name"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
        <span class="last_mess">{catrow.forumrow.LAST_POST}</span>
      </div>
      <div class="forum_icone"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
    </div>

    <!-- END forumrow -->
    <!-- BEGIN catfoot -->

       <!-- END catfoot -->
       <!-- BEGIN tablefoot -->
    </div></div><!-- END tablefoot --><!-- END catrow --></div>

    et le javascript (pas indenté, désolééééééééééé Sad ):
    Spoiler:
    Code:
    $('document').ready(function(){if($('.categorievo').size()>1){$('#conteneur_ongletsvo').css('display','block');$('#conteneur_ongletsvo .ongletvo').click(function(){change_categorie($('.ongletvo','#conteneur_ongletsvo').index(this))});$('.ongletvo:eq(0)').click()}});function change_categorie(index){if($('.categorievo:eq('+index+')').size()!=0){$('.categorievo').css('display','none');$('.categorievo:eq('+index+')').fadeIn(500);$('.ongletvo.actif').removeClass('actif');$('.ongletvo:eq('+index+')').addClass('actif')}else alert('Vous ne pouvez pas accéder à cette catégorie')}


    Autres précisions ?


    J'ai juste besoin d'une modification au HTML pour pouvoir insérer mes images ^^ Tout ce qui est modification du code, je gère ! Razz Par contre la création je sais pas faire U_U, d'où ma demande, alors ne vous embêttez surtout pas à faire du CSS ou autre ^^ J'ai juste besoin d'être mis dans la bonne voie Razz Merci encore !



    Dernière édition par Lone wanderer le Sam 8 Sep 2018 - 22:56, édité 1 fois
    avatar
    Lone wanderer
    MasculinAge : 26Messages : 154

    le Sam 8 Sep 2018 - 22:55



    A force de recherche, j'ai trouvé environ 2 minutes après avoir fait ce poste... --" ça faisait juste 45 minutes que j'avais la solution sous le nez quoi ^^

      La date/heure actuelle est Sam 22 Sep 2018 - 20:54