PA de Lihuén - Personnalisation "Navigation"

Bonjour bonjour !

J'utilise la PA de Lihuén pour mon forum ( https://www.never-utopia.com/t51598-pa-tons-sombres-rouge-avec-staff-et-navigation-en-hover ) et j'aimerais personnaliser la partie "Navigation".
Ce n'est qu'un petit détail, mais serait-il possible qu'il y ait constamment une image de montrer, la première, et qu'en passant donc sur les croix elle change ? En gros, plutôt qu'il n'y ait jamais rien qui s'affiche, sauf si on passe notre curseur au bon endroit, qu'il y ait une "navigation" toujours présente.

Est-ce possible ?

La PA :

Code:

<div id="fond_PA">
                                                                   
   <h1 id="titre_PA">
                                   Bienvenue sur Utopia                            
   </h1>
                                                                   
   <h3 id="soustitre_PA">
                                   Le Maître vous accueille avec plaisir...                            
   </h3>
                                                                   
   <div class="cadre_PA staff">
                                    <span class="titre_cadre titre_staff">STAFF</span>                                    
      <div class="bouton_croix">
                                       <img class="image_staff un" src="http://img11.hostingpics.net/pics/503454bloggif5583eaeb037fe.gif" />          <a href="http://losttimememory.forumactif.org/u2"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                                    
      </div>
                                                                        
      <div class="bouton_croix">
                                       <img class="image_staff deux" src="http://img11.hostingpics.net/pics/859954bloggif5583eb2daa5e1.gif" />          <a href="http://losttimememory.forumactif.org/u4"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                                    
      </div>
                                                                        
      <div class="bouton_croix">
                                       <img class="image_staff trois" src="http://img11.hostingpics.net/pics/891939bloggif5583ea4332137.gif" />          <a href="http://losttimememory.forumactif.org/u3"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                                    
      </div>
                                                                      
   </div>
                                                                   
   <div id="contexte_titre">
                                    <span class="titre_cadre titre_contexte">CONTEXTE</span>                                    
      <div class="cadre_PA contexte">
           <br />                                                                  
         <p>
                                          Imaginez-vous, le monde parfait. Le lieu idéal, l’endroit que vous ne voyez que dans vos rêves. Oui, un monde normalement humainement impossible à atteindre. Cependant, vos rêves deviennent réalité. Un jour, à votre ordinaire, vous rentrez chez vous, sans même vous douter qu'aujourd'hui sera votre dernier jour normal. Poussant la porte de votre maison, vous serez submergé par une lumière aveuglante et puissante. Vous vous évanouirez, la dernière chose que vous aurez vue sera un large sourire se dessinant sur un visage diabolique.                              
         </p>
                                                                           
      </div>
                                                                      
   </div>
                                                                   
   <div class="cadre_PA postes_vacants">
                                    <span class="titre_cadre titre_pv">POSTES VACANTS</span>                                    
      <div id="pv">
                                       <a href="http://losttimememory.forumactif.org/t136-hannah-winchester-elle-fanning-une-petite-soeur-attendue-pouvoir-au-choix"><img class="img_pv" src="http://img11.hostingpics.net/pics/345543hannah.jpg" /></a>          <a href="http://losttimememory.forumactif.org/t61-peter-hawkins-petit-frere-de-noah-d-hawkins"><img class="img_pv" src="http://img11.hostingpics.net/pics/526543peter.png" /></a>          <a href="http://losttimememory.forumactif.org/t373-victoria-montgomery-perception-des-humeurs"><img class="img_pv" src="http://img11.hostingpics.net/pics/905508victoria.jpg" /></a>          <a href="http://losttimememory.forumactif.org/t368-edward-white-oz-vessalius-le-tisseur-de-reves"><img class="img_pv" src="http://img11.hostingpics.net/pics/388796edward.jpg" /></a>                                    
      </div>
                                                                      
   </div>
                                                                   
   <div id="partenaires_PA">
                                    <span class="titre_cadre titre_partenaires">TOP          PARTENAIRES</span>                                    
      <div class="img_partenaires">
                          <a href="http://origin-s.creer-forum.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://i39.servimg.com/u/f39/17/95/44/51/ico110.jpg" /></a> <a href="http://nobody.forumactif.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i39.servimg.com/u/f39/19/01/09/29/nobody10.jpg" /></a> <a href="http://quederla.forumactif.fr/" class="postlink" target="_blank" rel="nofollow"><img src="http://image.noelshack.com/fichiers/2014/10/1394150084-logo50.png" /></a> <a href="http://neverneverland.forumactif.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i.imgur.com/OyjCRdD.png" /></a> <a href="http://cantata-mortis.forumactif.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://img11.hostingpics.net/pics/858275Part.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://pensionnatwonderland.forumactif.org/"><img src="http://image.noelshack.com/fichiers/2015/16/1429294726-5050pwv4.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://fantasmagorie.forumactif.org/"><img src="http://img11.hostingpics.net/pics/853045bouton50.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://airfly.forumactif.org/"><img src="http://img11.hostingpics.net/pics/869682Logo50.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://fables.onlinemmorpg.net/"><img src="http://i.imgur.com/X4kVEmK.png" /></a>                                    
      </div>
                                           <span id="nous_lier"> <a href="http://losttimememory.forumactif.org/t401-demandes-de-partenariat">NOUS LIER</a> // <a href="http://losttimememory.forumactif.org/t12-nos-partenaires">PLUS </a></span>           <br />              
   </div>
                                                                   
   <div class="cadre_PA navigation_PA">
                                    <span class="titre_cadre titre_navig">ANNONCES</span>                                    
      <div class="bouton_croix_navig">
                                       <img class="image_navig un" src="http://img11.hostingpics.net/pics/977969EVENT3.png" />          <a href="LIEN VERS TOPIC"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                                    
      </div>
                                                                        
      <div class="bouton_croix_navig">
                                       <img class="image_navig deux" src="http://img11.hostingpics.net/pics/941518MEMBRE.png" />          <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                                    
      </div>
                                                                        
      <div class="bouton_croix_navig">
                                       <img class="image_navig trois" src="http://img11.hostingpics.net/pics/885599JOURNAL.png" />          <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                                    
      </div>
                                                                                                                              
   </div>
                                      <span style="color: #434142; display:block; text-align: center; margin-top: 15px;">(c) Lihuén sur <a href="http://www.never-utopia.com/">Never-Utopia</a></span>    
</div>
    <link href="//fonts.googleapis.com/css?family=Cinzel:400,700,900" rel="stylesheet" type="text/css" /><br /><br />

Le CSS :

Code:


/* ------------ MISE EN FORME PA ------------ */


#fond_PA {
  height: 515px;
  width: 900px;
  background-color: #100e0f;
  box-shadow: 0px 0px 10px #4c3436;
}
#titre_PA {
  color: #5a0e0f;
  font-family: Cinzel;
  font-size: 48px;
  text-shadow: 0px 0px 10px #4c3436;
  margin-bottom: -25px;
  text-align: center;
}
#soustitre_PA {
  color: #434142;
  font-family: Cinzel;
  opacity: 0.5;
  text-align: center;
}
.cadre_PA {
  background: rgba(35, 30, 33, 0.5);
  box-shadow: 2px 2px 2px black;
  font-family: Arial;
  font-size: 11px;
  position: relative;
  display: inline-block;
  z-index: 0;
}
.titre_cadre {
  color: #5a0e0f;
  font-family: Cinzel;
  font-weight: bold;
  font-size: 30px;
  z-index: 2;
  text-align: left;
  display: inline-block;
  position: absolute;
}
/* MISE EN FORME DU CADRE STAFF */
.staff {
  width: 268px;
  height: 143px;
  float: left;
  margin-left: 10px;
}
.titre_staff {
  width: 15px;
  word-wrap: break-word;  
  top: -10px;
  left: -5px;
  line-height: 32px;
}
.bouton_croix {
  display: inline-block;
  margin: 150px auto 20px auto;
  overflow: visible;
  width: 31px;
  height: 28px;
}
.bouton_croix .image_staff {
  position: absolute;
  width: 200px;
  height: 120px;
  z-index: 1;
  visibility: hidden;
}
.bouton_croix .un {
  margin: -140px 0px 0px -50px;
}
.bouton_croix .deux {
  margin: -140px 0px 0px -80px;
}
.bouton_croix .trois {
  margin: -140px 0px 0px -120px;
}
.bouton_croix:hover .image_staff {
  visibility: visible;
}
/* MISE EN FORME DU CONTEXTE */
.contexte {
  width: 416px;
  height: 160px;
  padding: 5px;
  text-align: justify;
  overflow: auto;
  left: -10px;
  top: 17px;
  font-family: Cinzel;
  color: #b6b4b4;
}
.contexte p {
  font-family: Trebuchet MS;
  color: #b6b4b4;
  font-size: 11px;
}
.titre_contexte {
  width: 416px;
  margin-left: -20px;
}
#contexte_titre {
  overflow: visible;
  display: inline-block;
  width: 430px;
  height: 160px;
}
/* MISE EN FORME POSTES VACANTS */
.postes_vacants {
  width: 92px;
  height: 381px;
  float: right;
  margin-right: 30px;
}
.titre_pv {
  width: 15px;
  word-wrap: break-word;
  top: -20px;
  right: -5px;
  line-height: 32px;
}
#pv {
  margin-top: 30px;
}
.img_pv {
  margin: 2px 0px 2px 0px;
}
/*MISE EN FORME PARTENAIRES */
#partenaires_PA {
  position: relative;
  display: inline-block;
  margin: 80px 0px 0px 20px;
  width: 300px;
  height: 150px;
  float: left;
}
.titre_partenaires {
  width: 320px;
  left: 5px;
  top: -30px;
}
.img_partenaires {
  margin-top: 10px;
}
.img_partenaires img {
  margin: 1px 1px 0px 0px;
}
#nous_lier {
  color: #5a0e0f;
  text-align: center;
  font-size: 13px;
  display: block;
  padding: 10px;
}
#nous_lier a {
  text-decoration: none;
  color: #5a0e0f;
  font-family: Cinzel;
  font-weight: bold;
}
/* MISE EN FORME NAVIGATION */
.navigation_PA {
  width: 326px;
  height: 191px;
  margin-top: 42px;
}
.titre_navig {
  right: -20px;
  top: -15px;
}
.bouton_croix_navig {
  margin: 3px 0px 3px -370px;
  display: block;
  width: 31px;
  height: 28px;
}
.image_navig {
  width: 326px;
  height: 191px;
  display: inline-block;
  position: absolute;
  visibility: hidden;
}
.bouton_croix_navig .un {
  margin: -2px 0px 0px 38px;
}
.bouton_croix_navig .deux {
  margin: -33px 0px 0px 38px;
}
.bouton_croix_navig .trois {
  margin: -64px 0px 0px 38px;
}
.bouton_croix_navig .quatre {
  margin: -95px 0px 0px 38px;
}
.bouton_croix_navig .cinq {
  margin: -126px 0px 0px 38px;
}
.bouton_croix_navig .six {
  margin: -157px 0px 0px 38px;
}
.bouton_croix_navig:hover .image_navig {
  visibility: visible;
}
    /************************************************** Fin Page d'accueil **************************************************/



Je vous remercie pour votre attention et votre aide !

Un petit up ! ;D

Salut,

Tu peux faire ça en ajoutant cette image juste après le titre. Pour navigation, ce sera par exemple juste après :

Code:

<span class="titre_cadre titre_navig">NAVIGATION</span>        

Tu fais ça avec une simple balise img

Ensuite, tu vas encadrer ce qui suit par une div qui va nous permettre de créer une "boîte" englobant tout nos boutons et leur contenu, boîte qu'on va positionner au-dessus de notre image. Je propose de l'appeler contenu_navig là donc tu l'ouvres juste après ton image :

Code:

<div class="contenu_navig">

Et tu la fermes juste après le dernier paragraphe bouton_croix_navig

Dans le CSS, on va donc donc demander à notre div de remonter. On fait ça par un margin-top négatif de la hauteur de notre image (je présume que tu veux que cette image soit de la même hauteur que celle qui apparaît au survol donc c'est 191px) :

Code:

.contenu_navig {
  margin-top: -191px;
}
 

Il se peut que ce soit trop ou trop peu, tu peux ajuster le nombre :)
De même, si les images ne se placent pas bien au-dessus, tu peux jouer avec ces margin :

Code:

.bouton_croix_navig .un {
  margin: -2px 0px 0px 38px;
}
.bouton_croix_navig .deux {
  margin: -33px 0px 0px 38px;
}
.bouton_croix_navig .trois {
  margin: -64px 0px 0px 38px;
}
.bouton_croix_navig .quatre {
  margin: -95px 0px 0px 38px;
}
.bouton_croix_navig .cinq {
  margin: -126px 0px 0px 38px;
}
.bouton_croix_navig .six {
  margin: -157px 0px 0px 38px;
}

C'est parfait je te remercie !

J'ai changé le margin-top: -191px; par margin-top: -192px; pour qu'il n'y ait aucun décalage lorsque l'on passe sur les boutons.

Mon problème étant résolu, vous pouvez archiver ce sujet s'il vous plaît ? :)

De rien !
Je m'occupe de l'archivage :)