Image spoiler alignée.

2 participants

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

Résolu Image spoiler alignée.

Message par JP :D Lun 1 Juin 2015 - 16:41

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://wwedestiny.forumgratuit.org/

Description du problème

Bonjour a tous.

Je me tourne vers vous aujourd'hui a propos d'un code que j'ai pris sur ce forum concernant les images spoiler. (https://forum.forumactif.com/t302493-spoiler-sous-forme-d-image-contien-du-texte-ou-alternative-wow)

L'effet, c'est l'apparition d'une image quand on survol une première image, la dessus, aucun problème, le résultat est même très satisfaisant.

Mais la, ou cela me pose problème, c'est que j'aimerais aligner 4 images sur la même ligne, alors que quand je met les 4 codes a la suite, ça me les met les unes en dessous des autres. Et si la possibilité est, de faire apparaitre l'image au dessus de la première plutôt qu'en dessous (mais c'est secondaire^^)

Voici le code en question
Code:
[table class="oeuf"][tr][td][center][img]adresse de l'image base du spoiler[/img][/center]
[/td]
[/tr]
[tr][td][center][img]adresse de l'image ouverte[/img] [/center]
[/td]
[/tr]
[/table]

Et le CSS
Code:
 .oeuf {
        width:420px;border-spacing:0px;margin-left:auto;margin-right:auto;
        background: url('http:') ;
        }
        .oeuf tr {height:70px;
        }
        .oeuf tr+tr { height:160px;vertical-align:top;
        }
        .oeuf tr+tr td {display:none;
        }
        .oeuf:hover tr+tr td{display:block;
        }

Je vous remercie d'avance. Merci a forumactif et a ses membres pour l'excellent travail.

Ceci est pour un graphisme futur, donc encore rien d'installer sur le forum.


Dernière édition par JP :D le Mar 2 Juin 2015 - 20:50, édité 1 fois
avatar

JP :D
Nouveau membre

Messages : 6
Inscrit(e) le : 31/07/2013

http://wwedestiny.com
JP :D a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image spoiler alignée.

Message par Scoubifitz Lun 1 Juin 2015 - 22:36

bonsoir,

je me souviens de ça ... çà fait un moment ...

vous voulez donc des table en BBcode , cote à cote ,

avec une image en bas du cadre , qui , au survol , fait apparaitre une image en haut du cadre .

le plus simple est de faire un tableau , de placer une BBalise center contenant l'image que vous voulez faire apparaitre , de passer à la ligne et de mettre l'image qui reste visible .

Dans le CSS , préciser que les tableaux seront des block en ligne , que la balise center reste invisible jusqu'au survol de la case .

du charabia ? ... non ...

à mettre dans un message (j'ai pris des smileys comme image)
ce sont 3 tableaux :

Code:
[center][table class="oeuf"][tr][td][center]:?:

titre[/center]

:heart: [/td]
[/tr]
[/table]
[table class="oeuf"][tr][td][center]:D

titre[/center]

8) [/td]
[/tr]
[/table]
[table class="oeuf"][tr][td][center]:shock:

titre[/center]

:evil: [/td]
[/tr]
[/table]
[/center]

à mettre dans le CSS :

Code:
.oeuf {
background:#fff;
display:inline-block;
border:1px solid;
margin:5px;
}
.oeuf tr td{
height:120px;
width:70px;
}
.oeuf div{
visibility:hidden;
}
.oeuf:hover div{
visibility:visible;
}
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image spoiler alignée.

Message par JP :D Mar 2 Juin 2015 - 1:07

Merci beaucoup. Résultat très très satisfaisant, c'est vraiment dans l'esprit rechercher.

Dernière petit chose, il y a t-il la possibilité de réduire l'espace entre 2 lignes, de façon a ce qu'elle ne mesure pas la taille des images caché quand le spoiler est inactif ?

Merci beaucoup Scoubifitz
avatar

JP :D
Nouveau membre

Messages : 6
Inscrit(e) le : 31/07/2013

http://wwedestiny.com
JP :D a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image spoiler alignée.

Message par Scoubifitz Mar 2 Juin 2015 - 19:09

Avec les navigateurs modernes , on peut faire pas mal de choses ...

Comme je ne connais pas la taille des images , j'opterai pour une apparition graduée de l'image .

nouveau test ( vous pouvez laisser l'ancien CSS pour comparer )

j'ai pris des images de votre forum :

Code:
[center][table class="kinder"][tr][td][center][img]http://nsa20.casimages.com/img/2014/01/18/140118024129111992.jpg[/img][/center]
[img]http://img15.hostingpics.net/pics/305624Nonews.jpg[/img][/td]
[/tr]
[/table]
[table class="kinder"][tr][td][center][img]http://nsa20.casimages.com/img/2014/01/18/140118024129111992.jpg[/img][/center]
[img]http://img15.hostingpics.net/pics/305624Nonews.jpg[/img][/td]
[/tr]
[/table]
[table class="kinder"][tr][td][center][img]http://nsa20.casimages.com/img/2014/01/18/140118023457526774.jpg[/img][/center]
[img]http://img15.hostingpics.net/pics/305624Nonews.jpg[/img][/td]
[/tr]
[/table][/center]

Code:
.kinder{
display:inline-block;
margin:5px;
}.kinder div img{
width :0;
transition: all 1s ease;
}
.kinder:hover div img{
display:block;
width :100%;
transform: scale(0.8);
}
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image spoiler alignée.

Message par JP :D Mar 2 Juin 2015 - 20:49

Merci, c'est parfait, je ne pouvait pas espérer mieux.

Merci pour les codes, et merci pour tout Scoubifitz
avatar

JP :D
Nouveau membre

Messages : 6
Inscrit(e) le : 31/07/2013

http://wwedestiny.com
JP :D a été remercié(e) par l'auteur de ce sujet.

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


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