Spoiler sous forme d'image (contien du texte) ou alternative WOW

[humainbanal]

Bonjour,

Apprêt une mâtiné perdu à cherché je viens vous rejoindre ici.

Je cherche donc à faire la présentation pour pack de spoiler sous forme d'œuf de telle manière qu'en cliquant sur chacun des œufs, nous voyons un texte d'affiché en dessous.
J'ai essayé de voir si je pouvais bidouiller avec le BBcode qui propose de changer l'intitulé du spoiler de la manière suivante :

Code:

[Spoiler=intitulé du spoiler]Texte et image caché[/spoiler]

intitulé du spoiler:

Je ne peut évidemment pas utilisé la balise [img][/img] car cella fermerait le spoiler apprêt "[img".

En alternative, je voulais voir si il était possible d'utiliser la balise [WOW][/WOW] pour qu'en passant sur l'image de l'œuf, le texte souhaitez soit affiché, je n'arrive cependant pas à afficher l'image et le texte désiré.

Le résultât donnerait :

Image d'œuf
Passage de la souris : texte affiché.

Si vous avez une idée je suis preneur.

Cordialement,
Humainbanal

[Invité]

Bonjour,

J'ai une solution à vous proposer, mais pour cela il faut que le Html soit activé sur votre forum:

Code:

<span title="texte caché"><img src="adresse de votre image" /></span>

Cordialement.

[humainbanal]

Bonjour,

j'avais envisagé de me tourné vers le HTML, mais pour des raison pratique celui-ci est désactivé (des problèmes d'apparence de certain post fait par certaine personne sur le forum apparaisse, surement par insuffisance de maitrise ce qui était très contraignant pour la lecture de certain post).

Merci d'avoir répondu aussi vite mais j'aimerais voir si il y a une alternative (sinon je ferais réactiver le Html).

Cordialement,

[Scoubifitz]

il y a une alternative par le CSS ... mais ce sera appliqué à tous les spoilers ...

bon, je bidouille quelque chose de rapide ...

tout d'abord , le texte à mettre dans les messages ...

Code:

[spoiler=Surprise dans l'oeuf ][b][/b]
[b][/b]
[b][/b]
[center]texte caché[/center][/spoiler]

ensuite le code à mettre dans le CSS perso :

Code:

.spoiler {
width:420px;border-spacing:0px;
background: url('http://img807.imageshack.us/img807/2881/oeufhaut.jpg') ;
background-repeat: no-repeat; 
}
.spoiler tr {
height:100px;
}
.spoiler tr+tr {
height:200px;
background: url('http://img856.imageshack.us/img856/9861/oeufbas.jpg');
background-repeat: no-repeat; 
}
.spoiler_closed,.spoiler_closed.hidden,.spoiler_content,.spoiler_content.hidden{
border:transparent;border-style:none;border-width:0px;}

[humainbanal]

Bonjour,

Oui, mais comme tu l'indique ça s'appliquerait à tout le spoiler, j'ai essayé de voir par si par la, il semble qu'il n'y ait aucune astuce, je vais donc me tourner vers la solution de Isolde étant donné que je n'ai pas trop le choix si je veut utiliser les spoilers, apprêt il faudra que j'essaye de voir si je peut choisir l'image que je souhaité pour la balise WOW.

Merci,
Humainbanal

[Scoubifitz]

Le résultât donnerait :

Image d'œuf
Passage de la souris : texte affiché.

Si vous avez une idée je suis preneur.

Cordialement,
Humainbanal

un simple affichage au survol suffirait ?

allez ... on repart sur une base de tableau ...

image en fond de tableau
cellule du haut , texte visible ,
cellule du bas , texte caché apparaissant au survol ...

Code:

[table class="oeuf"][tr]
[td][center]surprise[/center][/td]
[/tr][tr]
[td][center]texte apparent au survol  :shock: [/center][/td]
[/tr][/table]

CSS pour l'appliquer :

Code:

.oeuf {
width:420px;border-spacing:0px;margin-left:auto;margin-right:auto;
background: url('http://img690.imageshack.us/img690/5193/oeuf01.jpg') ;
}
.oeuf tr {height:140px;
}
.oeuf tr+tr { height:160px;vertical-align:top;
}
.oeuf tr+tr td {display:none;
}
.oeuf:hover tr+tr td{display:block;
}

en espérant que ça vous ira ...

Scoubifitz

[humainbanal]

Bonjour, un simple affichage au survole me va très bien, oui, je la test ce soir, cella me laisse trois choix. Je met donc le sujet comme résolut et remerci encore pour les réponse si rapide.