Débutant : bouton image rollover avec petite fenetre texte

Bonjour,

Je cherche à mettre sur une page des charades suivies d'un bouton image
permettant d'afficher la solution au survol du bouton

fl1.gif état normal
fl2.gif au survol et affichage texte de la réponse
( un affichage simple type petit encadré texte suffit simplement)
fl3.gif quand on clique l'affichage disparait naturellement




j'ai utilisé un sript javascript, mais je pense qu'il existe sans doute une solution toute simple en html avec mon bouton dans ma feuille de style.
je ne veux pas non plus du rollover classique avec le texte dans le bouton2 car ça fait un bouton long pas trés esthétique

avez vous un conseil à me donner?

merci d'avance
matissed
Modifié par matissed (10 Dec 2009 - 10:07)

Salut,

en css on peut effectivement gérer le rollover sur n'importe quel élément (sauf IE6 qui ne le fait que pour les liens) et on pourrait avoir quelque chose de ce style :

#charade {
	width: 300px;
	border: 1px solid;
	padding: 10px;
}

#charade .solution {
	color: blue;
	display: none;
}
	
#charade:hover .solution {
	display: block;
}

<div id="charade">
	<p>Du contenu.</p>
	<p>Du contenu.</p>
	<p class="solution">Du contenu.</p>
</div>

Sauf que :
* le CSS ne concerne que la présentation alors que là on parle de contenu.
* à partir du moment où tu veux gérer le clic il s'agit bien de JavaScript.

Je ne sais pas quelle solution tu as choisie mais pour quelque chose de non-intrusif tu pourrais t'inspirer de Créer un menu déroulant “accordéon” avec jQuery.

Bonjour et merci pour ton aide,

s'il n'y a que le javascript, allons y, mais je ne maitrise pas...

http://delaplacem.fr/motsb.htm

ça donne cela, mais j'ai un problème. si je ne mets qu'un exemple, mon rollover fonctionne bien.
mais a partir du 2ème plus rien ne fonctionne.

est-il possible d'attribuer une taille de police au title?

en tout cas le rendu de la solution c'est ce que je cherche...

merci encore

merci encore

Si tu mets une image de bouton avec une flèche, ton visiteur s'attendra à trouver un lien cliquable et il risque de ne pas voir la réponse, d'autant plus qu'elle met un certain temps à s'afficher.
Une solution toute simple en javascript : tu mets ta réponse dans un div que tu masques en css :

<div id="reponse" style="display:none;">
               ta réponse
</div>

un lien sur ton bouton qui lance la fonction javascript d'affichage :

<a href="javascript:showDiv('reponse');">image ici</a>

et enfin la déclaration de fonction javascript (à placer dans le head de ta page) :

<script type="text/javascript">
function showDiv(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>

Cependant cette méthode a un désavantage, si javascript n'est pas activé dans le navigateur, le visiteur ne verra jamais la réponse.

++ et gloire au père Brassens

Bonjour et Merci Sihafu.

la solution avec le div me plait bien.

http://delaplacem.fr/motsb.htm

j'ai préparé 3 lignes mais ça ne marche que sur la première... comme dans ma solution de départ.

Et je n'ai pas d'effet rollover sur mon bouton avec mes 3 gifs. mais bon on peut s'en passer

quant à java, s'il n'y a pas d'autre solution pratique, tant pis!

merci encore pour votre aide

re...

je progresse, réponse1, réponse2, réponse3....

http://delaplacem.fr/motsb.htm

manque juste le rollover sur le bouton... et si java n'est pas activé, je garde mon commentaire sur l'image du bouton...

ce n'est pas l'idéal, mais ça fonctionne

peut-être quelqu'un a t'il mieux à me proposer?

matissed

Salut,

sihafu a écrit :
Cependant cette méthode a un désavantage, si javascript n'est pas activé dans le navigateur, le visiteur ne verra jamais la réponse.

Et donc cette méthode n'est pas la bonne.

Il faut que l'élément contenant la réponse soit visible dès le début et ne le masquer en JavaScript que pendant le chargement de la page : comme ça si le JavaScript est désactivé on perd ce petit effet mais au moins on a accès à l'information.

La technique est résumée dans ce post (ou alors il suffit de se baser sur le tuto que j'ai cité plus haut ).

Bonjour Heyoan et merci à tous pour votre aide.


Je viens de jeter un oeil(aie ) sur le post en question, mais j'avoue qu'avec mes connaissances en html-css-javascript ( niveau bepc 1967), j'aurais préféré du latin...

Néanmoins,( oreille en plus ), je regarde cela en détail dés que j'ai un peu de temps et je reviens vers vous en cas de besoin...

matissed