Ajouter une image coulissante sur un texte.

2 participants

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

Résolu Ajouter une image coulissante sur un texte.

Message par Mermaid Mer 06 Mai 2015, 12:09

Bonjour/bonsoir Smile
Alors, la question est plutôt simple, j'aimerais savoir comment mettre une image infobulle glissante par dessus mes sous-forums. Voici l'apparence de mes catégories :

Spoiler:

Si quelqu'un pourrait m'expliquer comment faire, ça serait très apprécié, merci Very Happy


Dernière édition par Mermaid le Mer 06 Mai 2015, 16:22, édité 1 fois
Mermaid

Mermaid
**

Féminin
Messages : 62
Inscrit(e) le : 15/07/2012

Mermaid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une image coulissante sur un texte.

Message par MlleAlys Mer 06 Mai 2015, 12:13

Bonjour,
comment ça une "image infobulle glissante" ? Vous voulez dire afficher une image en infobulle au passage de la souris sur le lien du sous-forum ?
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une image coulissante sur un texte.

Message par Mermaid Mer 06 Mai 2015, 12:19

Bonjour,
j'avoue que je n'ai pas été très claire, c'était juste évident pour moi, puisque j'avais le plan en tête Smile
alors, l'image se situerait comme sur la photo suivante (sur les sous-forums) :

Spoiler:

et j'aimerais qu'au passage de la souris, l'image glisse vers le haut, pour laisser place aux liens des sous-forums. voilà, j'espère que c'est plus clair I love you
Mermaid

Mermaid
**

Féminin
Messages : 62
Inscrit(e) le : 15/07/2012

Mermaid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une image coulissante sur un texte.

Message par MlleAlys Mer 06 Mai 2015, 12:45

Aaaaah ok, pas vraiment de rapport avec une infobulle alors ^^

Voilà les idées principales :
- on va créer un bloc global qui contient le texte et l'image
- on positionne l'image par dessus le texte qu'on veut cacher grâce à un positionnement absolu
- au survol de la souris sur le bloc, on modifie les paramètres de la position absolue de l'image pour qu'elle sorte du bloc (c'est la pseudo-class ":hover" qui permet l'effet "au survol" en css)
- un petit effet de transition donne l'effet glissant ^^
Après ce sont surtout des réglages de tailles et de position pour que ça se superpose bien ^^

Cela nous donne donc :

en code html :
Code:
<div class="bloc-contenant">
    <div class="texte-dessous">LA LISTE DES SS-FORUMS ICI</div>
    <img class="img-glisse" src="URL DE L'IMAGE"/>
</div>
(vous pouvez l'adapter en fonction de ce que vous avez déjà dans le template, en structure ou en classes, etc.)

en css :
Code:
.bloc-contenant {
    width:200px;  /*largeur du bloc*/
    position: relative;  /*pour pouvoir positionner l image plus bas en absolu*/
    overflow: hidden;  /*pour ne pas voir l image quand elle sort*/
}
.texte-dessous {
    padding: 5px; /*marge intérieur du bloc*/
    height: 140px; /*hauteur du bloc*/
    overflow: auto;  /*pour la barre de défilement si plus long*/
}
.img-glisse {
    width:100%;  /*largeur de l image s'adapte au bloc*/
    height:100%;  /*hauteur de l image s'adapte au bloc*/
    position: absolute;  /*positionnement par rapport au boc*/
    top:0;  /*positionnement vertical*/
    left:0;  /*positionnement horizontal*/
    transition: top 1s ease;  /*pour l effet de transition*/
}

.bloc-contenant:hover .img-glisse {
    top:-100%;  /*au survol de bloc-contenant, l image est au dessus du bloc*/
}

J'ai mis des commentaires pour expliquer brièvement, mais n'hésitez pas à poser des questions ^^ Les valeurs des dimensions et autres sont bien sûr à adapter, j'ai mis au pif ! Et la mise en forme peu être complétée.

Ce qui donne :
http://jsfiddle.net/syrmqq1p/
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une image coulissante sur un texte.

Message par Mermaid Mer 06 Mai 2015, 13:44

Merci pour la réponse Smile Alors, je comprends parfaitement le principe, mais mes tentatives échoues. J'ai insérée l'image, mais j'image que je ne la positionne pas au bon endroit, parce que l'image est fixe et je perds les liens...
Mermaid

Mermaid
**

Féminin
Messages : 62
Inscrit(e) le : 15/07/2012

Mermaid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une image coulissante sur un texte.

Message par MlleAlys Mer 06 Mai 2015, 14:03

Pourriez vous dans ce cas nous fournir vos codes et un lien vers le forum s'il vous plait (sous hide si besoin) ? Par ce que comme ça sans rien avoir ça risque d'être un peu compliqué de vous aider... ^^"
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une image coulissante sur un texte.

Message par Mermaid Mer 06 Mai 2015, 14:08

Bien sûr Smile je met ça sous hide, merci I love you

Mermaid

Mermaid
**

Féminin
Messages : 62
Inscrit(e) le : 15/07/2012

Mermaid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une image coulissante sur un texte.

Message par MlleAlys Mer 06 Mai 2015, 15:51

Alors, le passage qui nous intéresse dans le template est celui-là :
Code:

      <td class="row3" align="center" valign="middle" height="50">
        <span class="cat_droite_conteneur"><div class="cat_droite_contenu" id="sousForums"><span class="gensmall2"><span class="ListeSousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></span></div></span>
                    <script type="text/javascript">
  <!--
                      jQuery('#sousForums').html(jQuery('#sousForums').html().replace(/, /g,'<br />')).removeAttr('id');
  jQuery(document).ready(function(){
    jQuery('a.gensmall').each(function (){
    var texte = jQuery(this).attr('title') ;
    if(texte){
    texte = texte.replace(/\<\/a\>/gi, '').replace(/\<br \/\>/gi, '').replace(/\<br >/gi, '');
    jQuery(this).attr('title', texte);
    }
    });
  });
  //-->
  </script>
      </td>

.cat_droite_conteneur va jouer le rôle de .bloc-contenant de mon code exemple
.cat_droite_contenu va jouer le rôle de .texte-dessous

on va donc ajouter l'image juste après ce deuxième bloc :
Code:

      <td class="row3" align="center" valign="middle" height="50">
         <span class="cat_droite_conteneur">
            <div class="cat_droite_contenu" id="sousForums">
               <span class="gensmall2">
                  <span class="ListeSousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
               </span>
            </div>
         </span>
         <img class="img-glisse" src="URL DE L'IMAGE ICI"/>
         <script type="text/javascript">
  <!--
                      jQuery('#sousForums').html(jQuery('#sousForums').html().replace(/, /g,'<br />')).removeAttr('id');
  jQuery(document).ready(function(){
    jQuery('a.gensmall').each(function (){
    var texte = jQuery(this).attr('title') ;
    if(texte){
    texte = texte.replace(/\<\/a\>/gi, '').replace(/\<br \/\>/gi, '').replace(/\<br >/gi, '');
    jQuery(this).attr('title', texte);
    }
    });
  });
  //-->
         </script>
      </td>
remplacer URL DE L'IMAGE par l'url de l'image voulue

Puis dans la feuille de style :
- localiser :
Code:
.cat_droite_conteneur {
  vertical-align: top;
  height: 78px;
  width: 125px;
  display: block;
  background-color: #BFBFCA;
  padding: 10px;
  margin-top: 33px;
  border-bottom: 1px #D7D7DB solid;
  border-top: 1px #D7D7DB solid;
  border-right: 1px #D7D7DB solid;
  border-left: 1px #D7D7DB solid;
}
Ajouter position:relative; et overflow:hidden; ce qui donne :
Code:
.cat_droite_conteneur {
  vertical-align: top;
  height: 78px;
  width: 125px;
  display: block;
  background-color: #BFBFCA;
  padding: 10px;
  margin-top: 33px;
  border-bottom: 1px #D7D7DB solid;
  border-top: 1px #D7D7DB solid;
  border-right: 1px #D7D7DB solid;
  border-left: 1px #D7D7DB solid;
  position: relative;
  overflow: hidden;
}

- Pour positionner l'image, ajoutez le code :
Code:
.img-glisse {
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    transition: top 1s ease;
}

Puis enfin pour le déplacement au survol :
Code:
cat_droite_conteneur:hover .img-glisse {
    top:-100%;
}
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une image coulissante sur un texte.

Message par Mermaid Mer 06 Mai 2015, 16:07

Merci encore Smile mais, ça ne fonctionne pas... l'image se déforme et vient se positionner en haut du forum, elle devient énorme Embarassed
Mermaid

Mermaid
**

Féminin
Messages : 62
Inscrit(e) le : 15/07/2012

Mermaid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une image coulissante sur un texte.

Message par MlleAlys Mer 06 Mai 2015, 16:15

AH !
pardon, une erreur bête de ma part, dans le template, faut mettre l'image juste avant, de façon à ce qu'elle soit bien dans le conteneur (sinon le positionnement et la taille ne se fait pas par rapport au conteneur mais par rapport à l'écran... désolée !) ^^" :
Code:
 
      <td class="row3" align="center" valign="middle" height="50">
        <span class="cat_droite_conteneur">
            <div class="cat_droite_contenu" id="sousForums">
              <span class="gensmall2">
                  <span class="ListeSousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
              </span>
            </div>
            <img class="img-glisse" src="URL DE L'IMAGE ICI"/>
        </span>
        <script type="text/javascript">
  <!--
                      jQuery('#sousForums').html(jQuery('#sousForums').html().replace(/, /g,'<br />')).removeAttr('id');
  jQuery(document).ready(function(){
    jQuery('a.gensmall').each(function (){
    var texte = jQuery(this).attr('title') ;
    if(texte){
    texte = texte.replace(/\<\/a\>/gi, '').replace(/\<br \/\>/gi, '').replace(/\<br >/gi, '');
    jQuery(this).attr('title', texte);
    }
    });
  });
  //-->
        </script>
      </td>
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une image coulissante sur un texte.

Message par Mermaid Mer 06 Mai 2015, 16:18

Merci I love you
Alors maintenant, l'image est bien en place, mais elle reste fixe, rien ne se produit...
Mermaid

Mermaid
**

Féminin
Messages : 62
Inscrit(e) le : 15/07/2012

Mermaid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une image coulissante sur un texte.

Message par MlleAlys Mer 06 Mai 2015, 16:20

Deuxième erreur de ma part (décidément), j'ai oublié le point juste avant la class cat_droite_conteneur:hover dans le dernier code (une classe est toujours précédée d'un point dans le css) :
Code:
.cat_droite_conteneur:hover .img-glisse {
    top:-100%;
}
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une image coulissante sur un texte.

Message par Mermaid Mer 06 Mai 2015, 16:22

Merci 1000 fois, ça marche à la perfection I love you
Mermaid

Mermaid
**

Féminin
Messages : 62
Inscrit(e) le : 15/07/2012

Mermaid a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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