Mettre un commentaire lors du pasasge de la souris sur une image

Mettre un commentaire lors du pasasge de la souris sur une image [Réglé]

Support des Modules

olivierb Membre non connecté

Equipe Assistance Modérateur

Le 29/12/2016 à 13h32

#156110

Bonjour,

Vos conseils m'ouvrent les yeux un peu plus grand

Je vais les mettre en place mais un souci se pose sur mon site :
Je mets plusieurs images les unes après les autres. Avec la balise [img], elles apparaissent toutes. Avec la balise [html] seule la première est présente.
Voici mon code Caché:

Code BBCODE :

[block style="background: #fdeca8;"][float=left][url=http://www.smictom.com/][img]http://www.smictom.com/wp-content/themes/smictom/images/logo.png[/img][/url][/float] 
 
 
 
 
 
[font=comic sans ms][size=20][color=#0d6e08][b]Richelieu[/color] 
 
ZA Champigny-Richelieu 
37120 Richelieu 
 
[color=#0000FF]Tel : 02 47 58 27 74[/b][/color][/size] 
 
 
 
[url=http://www.smictom.com/wp-content/uploads/2016/03/A5decheterie-P2-BD.pdf]Liste au format PDF des horaires des déchèteries du Smictom du Chinonais[/url] 
[table]
    [row]
        [head colspan="3"]Horaires d'ouverture de la déchèterie depuis le 1[sup]er[/sup] mars 2016[/head]
    [/row]
    [row]
        [col][b]Mardi[/b][/col]
        [col][/col]
        [col]13h30 à 18h00[/col]
    [/row]
    [row]
        [col][b]Mercredi[/b][/col]
        [col]9h00 à 12h00[/col]
        [col]13h30 à 18h00[/col]
    [/row]
    [row]
        [col][b]Vendredi[/b][/col]
        [col][/col]
        [col]13h30 à 18h00[/col]
    [/row]
    [row]
        [col][b]Samedi[/b][/col]
        [col]9h00 à 12h00[/col]
        [col]13h30 à 18h00[/col]
    [/row]
[/table] 
 
[indent][color=#008000][b][size=20]Déchets acceptés[/color][/size][/b][/font] 
 
[html]<img src="http://www.smictom.com/wp-content/themes/smictom/images/picto01.png" title="Gravats inertes"[/html] [html]<img src="http://www.smictom.com/wp-content/themes/smictom/images/picto02.png" title="Déchets verts"[/html] [html] <img src="http://www.smictom.com/wp-content/themes/smictom/images/picto03.png" title="Ferraille"[/html] [html] <img src="http://www.smictom.com/wp-content/themes/smictom/images/picto04.png" title="Cartons"[/html] [html] <img src="http://www.smictom.com/wp-content/themes/smictom/images/picto06.png" title="Tout-venant"[/html] [html] <img src="http://www.smictom.com/wp-content/themes/smictom/images/picto07.png" title="DEEE*-Ampoules"[/html] [html] <img src="http://www.smictom.com/wp-content/themes/smictom/images/picto08.png" title="Piles"[/html] [html] <img src="http://www.smictom.com/wp-content/themes/smictom/images/picto09.png" title="Déchets toxiques"[/html] [html] <img src="http://www.smictom.com/wp-content/themes/smictom/images/picto10.png" title="Huiles de vidange, Filtres, Batteries"[/html] [html] <img src="http://www.smictom.com/wp-content/themes/smictom/images/picto11.png" title="Cartouches d'encre, Radiographies"[/html] [html] <img src="http://www.smictom.com/wp-content/themes/smictom/images/picto12.png" title="Emballages en verre"[/html] [html] <img src="http://www.smictom.com/wp-content/themes/smictom/images/picto13.png" title="Papier"[/html] [html] <img src="http://www.smictom.com/wp-content/themes/smictom/images/picto14.png" title="Frippes"[/html] 
 
[/block] 
[/indent]

Il s'agit du code non encore modifié grâce à vos remarques.

Olivier.

Olivier

Visiteur

Boosteur Inactif

Le 29/12/2016 à 15h20

#156113

Il manque à mon avis un : /> avant chaque [/html]

j'ai essayé avec :

Code HTML :

[html]<img src="http://www.smictom.com/wp-content/themes/smictom/images/picto01.png" title="Gravats inertes"/>[/html][html]<img src="http://www.smictom.com/wp-content/themes/smictom/images/picto02.png" title="Déchets verts"/>[/html] [html] <img src="http://www.smictom.com/wp-content/themes/smictom/images/picto03.png" title="Ferraille"/>[/html]

Chez moi c'est bon.
Maintenant il existe peut-être une autre méthode.
qui consisterait à ne mettre qu'un

Code HTML :

[html][/html]

en début et fin mais avec le <img src="blablabla /><img src=" une_autre /> ...

Code HTML :

[html]<img src="http://www.smictom.com/wp-content/themes/smictom/images/picto01.png" title="Gravats inertes"/><img src="http://www.smictom.com/wp-content/themes/smictom/images/picto02.png" title="Déchets verts"/><img src="http://www.smictom.com/wp-content/themes/smictom/images/picto03.png" title="Ferraille"/><img src="http://www.smictom.com/wp-content/themes/smictom/images/picto04.png" title="Cartons"/><img src="http://www.smictom.com/wp-content/themes/smictom/images/picto06.png" title="Tout-venant"/><img src="http://www.smictom.com/wp-content/themes/smictom/images/picto07.png" title="DEEE*-Ampoules"/><img src="http://www.smictom.com/wp-content/themes/smictom/images/picto08.png" title="Piles"/><img src="http://www.smictom.com/wp-content/themes/smictom/images/picto09.png" title="Déchets toxiques"/><img src="http://www.smictom.com/wp-content/themes/smictom/images/picto10.png" title="Huiles de vidange, Filtres, Batteries"/><img src="http://www.smictom.com/wp-content/themes/smictom/images/picto11.png" title="Cartouches d'encre, Radiographies"/><img src="http://www.smictom.com/wp-content/themes/smictom/images/picto12.png" title="Emballages en verre"/><img src="http://www.smictom.com/wp-content/themes/smictom/images/picto13.png" title="Papier"/><img src="http://www.smictom.com/wp-content/themes/smictom/images/picto14.png" title="Frippes"[/html]et ainsi de suite

Attention aux espaces ou pas entre les deux /><img src.

Édité par Visiteur Le 29/12/2016 à 15h31

babsolune Membre non connecté

Equipe Développement Administrateur

Le 29/12/2016 à 22h51

#156122

fait sur le thème base, du coup les lignes ne correspondent pas forcement selon le thème

dans le global.css après la declaration des classes formatter- vers ligne 315 juste avant le commentaire: /* --- les listes numerotees --- */
ajouter

Code CSS :

 
.caption-container .formatter-block {
    display: inline-block;
    border: none;
    vertical-align: top;
    position: relative;
    padding: 0;
}
.caption-container .formatter-block em {
    opacity: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 1.6rem;
    padding: 5px;
}
.caption-container .formatter-block:hover em {
    opacity: 1;
    background: rgba(0, 0, 0, 0.4);
    color: #FFFFFF;
}

puis déclarer les images comme suit :

Code BBCODE :

[html]<div class="caption-container">[/html] 
[block] 
[img]/images/lorem/pbt-01.jpg[/img] 
[i]description de l'image 01[/i] 
[/block] [block] 
[img style="max-width:150px;"]/images/lorem/pbt-02.jpg[/img] 
 [i]description de l'image 02[/i] 
 [/block] [block] 
 [img style="max-width:150px;"]/images/lorem/paysage.jpg[/img] 
[i]description de l'image 03[/i] 
 [/block] [block] 
 [img style="max-width:150px;"]/images/lorem/portrait.jpg[/img] 
 [i]description de l'image 04[/i] 
[/block] 
[html]</div>[/html]

en faisant bien attention à ce que les blocs suivants soient bien sur la meme ligne que les blocs précédents:

... /block] [block .... = bon

... /block]
[block... = pas bon

rendu avec survol sur la 1eme image : http://prntscr.com/dph076
rendu avec survol sur la 3eme image : http://prntscr.com/dpgznn

à ajuster avec les bonnes images et les tailles voulues

Édité par babsolune Le 29/12/2016 à 22h52

Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie

olivierb Membre non connecté

janus57 Membre non connecté

olivierb Membre non connecté

Visiteur

janus57 Membre non connecté

olivierb Membre non connecté

Swan Membre non connecté

Visiteur

janus57 Membre non connecté

olivierb Membre non connecté

Visiteur

olivierb Membre non connecté

babsolune Membre non connecté

olivierb Membre non connecté