Ajouter une image coulissante sur un texte.
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Ajouter une image coulissante sur un texte.
Bonjour/bonsoir
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 :
Si quelqu'un pourrait m'expliquer comment faire, ça serait très apprécié, merci
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
Dernière édition par Mermaid le Mer 6 Mai 2015 - 22:22, édité 1 fois
Mermaid- **
-
Messages : 62
Inscrit(e) le : 15/07/2012
Re: Ajouter une image coulissante sur un texte.
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 ?
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- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Ajouter une image coulissante sur un texte.
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
alors, l'image se situerait comme sur la photo suivante (sur les sous-forums) :
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
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
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
Mermaid- **
-
Messages : 62
Inscrit(e) le : 15/07/2012
Re: Ajouter une image coulissante sur un texte.
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 :
en css :
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/
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>
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- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Ajouter une image coulissante sur un texte.
Merci pour la réponse 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- **
-
Messages : 62
Inscrit(e) le : 15/07/2012
Re: Ajouter une image coulissante sur un texte.
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- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Ajouter une image coulissante sur un texte.
Bien sûr je met ça sous hide, merci
Mermaid- **
-
Messages : 62
Inscrit(e) le : 15/07/2012
Re: Ajouter une image coulissante sur un texte.
Alors, le passage qui nous intéresse dans le template est celui-là :
.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 :
Puis dans la feuille de style :
- localiser :
- Pour positionner l'image, ajoutez le code :
Puis enfin pour le déplacement au survol :
- 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>
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;
}
- 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- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Ajouter une image coulissante sur un texte.
Merci encore mais, ça ne fonctionne pas... l'image se déforme et vient se positionner en haut du forum, elle devient énorme
Mermaid- **
-
Messages : 62
Inscrit(e) le : 15/07/2012
Re: Ajouter une image coulissante sur un texte.
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 !) ^^" :
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- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Ajouter une image coulissante sur un texte.
Merci
Alors maintenant, l'image est bien en place, mais elle reste fixe, rien ne se produit...
Alors maintenant, l'image est bien en place, mais elle reste fixe, rien ne se produit...
Mermaid- **
-
Messages : 62
Inscrit(e) le : 15/07/2012
Re: Ajouter une image coulissante sur un texte.
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- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Ajouter une image coulissante sur un texte.
Merci 1000 fois, ça marche à la perfection
Mermaid- **
-
Messages : 62
Inscrit(e) le : 15/07/2012
Sujets similaires
» Image coulissante
» Enlever du texte et changer du texte en image
» Image coulissante sur les descriptions: qu'ai-je loupé ? :p
» Image coulissante sur les Derniers Messages
» Code pour image coulissante
» Enlever du texte et changer du texte en image
» Image coulissante sur les descriptions: qu'ai-je loupé ? :p
» Image coulissante sur les Derniers Messages
» Code pour image coulissante
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum