+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Réglé][CSS]Info Bulles (/showthread.php?tid=1020)
[Réglé][CSS]Info Bulles - Plume - 05-04-2007
Bonjour !
Voilà, dans mon éditeur avec prévisualisation instantannée, je voudrais que lorsque l'utilisateur passe le curseur sur un bouton, une info bulle apparaisse donnant les indications nécessaires à l'utilisation correcte de ces boutons.
J'ai trouvé plusieurs scripts CSS, qui utilisent pratiquement tous les balises <a></a>. J'ai cherché à les adapter notamment en encadrant mes boutons avec des <label></label>. J'ai aussi tenté une application directe des exemples & cela ne marche pas plus.
Comme cela est possible en CSS, je tiens à préciser que je ne veux pas utiliser de JavaScript.
Je ne sais pas si vous avez des scripts fonctionnels. Je vais vous mettre celui que j'ai. Peut-être que c'est moi qui ait mal fait un truc, m'enfin un copier coller ...
Le XHTML ::
Code :
<form method='post' name='formTexte' action=''>
<label class='info'>
<input type='button' id='bnGras' name='bnGras' value='Gras' onClick='javascript:code("[gras]", "[/gras]");return(false)' />
</label>
<label class='info'>
<input type='button' id='bnItalique' name='bnItalique' value='Italique' onClick='javascript:code("[italique]", "[/italique]");return(false)' />
</label>
<label class='info'>
<input type='button' id='bnSouligne' name='bnSouligne' value='Souligné' onClick='javascript:code("[souligne]", "[/souligne]");return(false)' />
</label>
<label class='info'>
<input type='button' id='bnImage' name='bnImage' value='Ajouter une image' onClick='javascript:code("[image]", "[/image]");return(false)' />
</label>
<label class='info'>
<input type='button' id='bnLien' name='bnLien' value='Créer un lien' onClick='javascript:code("[lien vers=]", "[/lien]");return(false)' />
</label>
<label class='info'>
Alignement : <select name='optAlignement' id='optAlignement'>
<option value='' selected ></option>
<option value='aDroite' onClick='javascript:code("[droite]", "[/droite]");return(false)'>à droite</option>
<option value='aGauche' onClick='javascript:code("[gauche]", "[/gauche]");return(false)'>à gauche</option>
<option value='auCentre' onClick='javascript:code("[centre]", "[/centre]");return(false)'>au centre</option>
</select>
</label>
<textarea cols=150 rows=20 id='txtTexte' name='txtTexte' onClick='javascript:previsualisation()' ></textarea>
<div style="border: 1px dashed #000000; padding: 0.2em; height: 500px; overflow: auto; width: 98%;" align="left" id="txtPrevisualisation"></div>
<br />
<input type='submit' name='bnEnvoi' value='Envoyer' />
</form>Et le CSS ::
Code :
<script language='text/css'>
label.info
{
position : relative;
z-index : 24;
background-color : #ccc;
color : #000;
text-decoration : none
}
label.info:hover
{
z-index : 25;
background-color : #ff0
}
label.info span
{
display : none
}
label.info:hover span
{
display : block;
position : absolute;
top : 2em;
left : 2em;
width : 15em;
border : 1px solid #0cf;
background-color : #cff;
color : #000;
text-align : center
}
</script>Si quelqu'un peut m'aider ...
Merci. Tchu !
RE: [CSS]Info Bulles - denisc - 05-04-2007
aucune idée!
RE: [CSS]Info Bulles - Plume - 05-04-2007
Le problème est réglé. Apparemment, il kiffe pas des masses <script language/type='text/css'></script> J'ai remplacé par <style></style>.
Merci quand même
RE: [Réglé][CSS]Info Bulles - denisc - 05-04-2007
Mais ça t'oblige a laisser les styles dans la page au chargement...
RE: [Réglé][CSS]Info Bulles - Plume - 05-04-2007
C'était prévu comme ça au début. Personnellement ça ne me pose pas plus de problèmes que ça. Des inconvénients que je ne connaitrais pas ?
RE: [Réglé][CSS]Info Bulles - denisc - 05-04-2007
Mettre la CSS dans un fichier séparé allège les transits entre le serveur et les clients, car ils ne sont pas a recharger à chaque fois!
RE: [Réglé][CSS]Info Bulles - Plume - 05-04-2007
Ca s'passe comment alors ?
RE: [Réglé][CSS]Info Bulles - denisc - 05-04-2007
En fait, c'est une inclusion dans ton HTML (un peu comme quand tu lies un fichier javascript). Le fichier est chargé au promier affichage de la page, mais lorsque tu reviens sur le site plus tard, ou tout au long de ta navigation, si le fichier nécessite toujours la même inclusion CSS, alors ce fichier n'est pas rechargé, mais c'est celui que tu as en cache dans le navigateur qui est repris. Gain de temps, de bande passante, et même de développement car tu peux ainsi utiliser le même fichier CSS pour toutes tes pages de ton site!
RE: [Réglé][CSS]Info Bulles - Plume - 05-04-2007
Y a juste l'histoire de rechargement que je ne connaissait pas. J'vais voir pour changer ça alors. Ca suffit pour me convaincre. Merci ^^
RE: [CSS]Info Bulles - joshua - 05-04-2007
moi non plus!