Bonsoir à tous,
afin d'améliorer mes compétences, je me suis lancé un petit défis : refondre cette page, entièrement en XHTML 1.0 Strict et CSS.
Avant toute chose, je désire modifier le système de bulle d'aide dont vous pouvez voir un aperçu en passant votre souris sur les noms de items.
Je me suis d'abord tourné vers des solutions Full CSS, telle que la solution fournie par Raphaël. Mais celles-ci posent un problème : le contenu des bulles d'aide est simplement un plus, il devient donc très génant pour navigateur ne supportant pas les CSS ou un lecteur d'écran.
Je me suis ensuite penché vers JavaScript qui, lui, me parrait plus indiqué pour ce genre de chose. C'est d'ailleurs la solution employée sur le site. Mais leur système ne me plait pas du tout, je ne le trouve pas pratique (côté développement), et rend le code illisible ; j'aimerai donc modifier ceci. Après recherches, je suis tombé sur un script proposé par Jep. Mais celui-ci ne me convient pas non plus, il utilise les attributs title et alt..
A partir de là j'ai essayé de faire mon script JavaScript moi même, mais vu mon niveau de ce côté, je me suis vite retrouvé au pied du mur.
J'ai donc cherché des cours/tutoriels/exemples/etc, mais j'avoue être un peu perdu : "c'est aux normes, ça l'est pas ? ... et ça ? ca passe sur quel(s) navigateurs .. mhh..". Dûr dûr.
Je me suis donc dit que, peut-être, quelqu'un d'ici pourrait m'aider en me donnant des pistes à suivres, de bons liens (en français) ou, si le coeur lui en dit, en me fournissant un code bien commenté. Non, je ne demande pas qu'on me fasse tout le boulot.! Enfin.. un peu quand même.. Je blague bien entendu. J'apprends bien mieux avec un code (même gros) bien commenté, plutôt qu'en suivant des tutoriels à paliers (variables > tableaux > typages > etc...) bien lourds et rebarbatifs quand on connais déjà plus ou moins bien des langages tels que PHP, ASP ou encore VB. 
Voici ma requête :
Je désire donc réaliser un script JavaScript de bulles d'aides visuelles (le contenu est un plus, puisqu'on le retrouve aussi sur la page dédiée à l'objet) respectant au maximum les standards.
La bulle doit, comme ici, suivre le pointeur de la souris (avec position par rapport au pointeur réglable) et rester affichée tant que celui-ci est sur le lien.
J'aimerai aussi qu'elle puisse s'affichée à doite ou à gauche du pointeur selon la position de celui-ci par rapport aux bords de la fenêtre (à droite par defaut).
Voilà ou j'en suis niveau code pour le moment :
Arrivé là, je séche..
J'éspère trouver de l'aide parmis vous, et que vous aurrez eu le courrage de lire jusqu'au bout.
D'avance merci,
Antoine
Modifié par Bouda (31 May 2005 - 12:47)
afin d'améliorer mes compétences, je me suis lancé un petit défis : refondre cette page, entièrement en XHTML 1.0 Strict et CSS.
Avant toute chose, je désire modifier le système de bulle d'aide dont vous pouvez voir un aperçu en passant votre souris sur les noms de items.
Je me suis d'abord tourné vers des solutions Full CSS, telle que la solution fournie par Raphaël. Mais celles-ci posent un problème : le contenu des bulles d'aide est simplement un plus, il devient donc très génant pour navigateur ne supportant pas les CSS ou un lecteur d'écran.
Je me suis ensuite penché vers JavaScript qui, lui, me parrait plus indiqué pour ce genre de chose. C'est d'ailleurs la solution employée sur le site. Mais leur système ne me plait pas du tout, je ne le trouve pas pratique (côté développement), et rend le code illisible ; j'aimerai donc modifier ceci. Après recherches, je suis tombé sur un script proposé par Jep. Mais celui-ci ne me convient pas non plus, il utilise les attributs title et alt..
A partir de là j'ai essayé de faire mon script JavaScript moi même, mais vu mon niveau de ce côté, je me suis vite retrouvé au pied du mur.
J'ai donc cherché des cours/tutoriels/exemples/etc, mais j'avoue être un peu perdu : "c'est aux normes, ça l'est pas ? ... et ça ? ca passe sur quel(s) navigateurs .. mhh..". Dûr dûr.Je me suis donc dit que, peut-être, quelqu'un d'ici pourrait m'aider en me donnant des pistes à suivres, de bons liens (en français) ou, si le coeur lui en dit, en me fournissant un code bien commenté. Non, je ne demande pas qu'on me fasse tout le boulot.! Enfin.. un peu quand même.. Je blague bien entendu.
J'apprends bien mieux avec un code (même gros) bien commenté, plutôt qu'en suivant des tutoriels à paliers (variables > tableaux > typages > etc...) bien lourds et rebarbatifs quand on connais déjà plus ou moins bien des langages tels que PHP, ASP ou encore VB. Voici ma requête :
Je désire donc réaliser un script JavaScript de bulles d'aides visuelles (le contenu est un plus, puisqu'on le retrouve aussi sur la page dédiée à l'objet) respectant au maximum les standards.
La bulle doit, comme ici, suivre le pointeur de la souris (avec position par rapport au pointeur réglable) et rester affichée tant que celui-ci est sur le lien.
J'aimerai aussi qu'elle puisse s'affichée à doite ou à gauche du pointeur selon la position de celui-ci par rapport aux bords de la fenêtre (à droite par defaut).
Voilà ou j'en suis niveau code pour le moment :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test de tooltip</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
<style type="text/css">
body { background-color: #000; font-family: Verdana, sans-serif; font-size: small; }
.bold { font-weight: bold; }
.white { color: #fff; }
.gray { color: #9d9d9d; }
.green { color: #1eff00; }
.blue { color: #0070dd; }
.purple { color: #a335ee }
ul { margin: 0; padding: 0; }
li { list-style-type: none; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:before { content: '['; }
a:after { content: ']'; }
div.tooltip { padding: 3px; width: 250px; border: 1px solid #fff; background-color: #1a1a1a; color: white; }
</style>
<script language="text/javascript">
//Déclarations des contenus des Tooltips utilisés sur la page en cours [@PHP]
var item01 = "<span class=\"bold gray\">Bâton de guerre massacreur</span><br />Deux mains<br />Bâton<br />Dégâts : 59 - 89<br />Vitesse 3.10<br />(23.9 dégâts par seconde)<br />Niveau 46 requis";
var item02 = "<span class=\"bold white\">Bâton de guerre</span><br />Deux mains<br />Bâton<br />Dégâts : 85 - 129<br />Vitesse 3,30<br />(32,4 dégâts par seconde)<br />Niveau 40 requis";
var item03 = "<span class=\"bold green\">Bâton long des mages d'Endurance</span><br />Lié quand équipé<br />Deux mains<br />Bâton<br />Dégâts : 122 - 184<br />Vitesse 3,40<br />(45,0 dégâts par seconde)<br />+26 Endurance<br />Niveau 53 requis";
var item04 = "<span class=\"bold blue\">Bâton du refuge</span><br />Lié quand ramassé<br />Deux mains<br />Bâton<br />Dégâts : 87 - 132<br />Vitesse 2,10<br />(52,1 dégâts par seconde)<br />+12 Endurance<br />+30 Intelligence<br />Dégâts de l'arme +7<br />Niveau 56 requis";
var item05 = "<span class=\"bold purple\">Bâton de grand seigneur de guerre</span><br />Lié quand ramassé<br />Deux mains<br />Bâton<br />Dégâts : 125 - 203<br />Vitesse 3,00<br />(54,7 dégâts par seconde)<br />+36 Endurance<br />+20 Intelligence<br />+15 Esprit<br />Niveau 60 requis<br />Requiert Grand seigneur de guerre<br /><span class="green">Equipé : Augmente les dégâts et les soins prodigués par vos sorts et vos effets de 44 au maximum.</span>";
//Gestion des Tooltips [@tooltip.js]
// Voir Tooltip
function showTt(item) {
// Structure du Tooltip :
// <div class="tooltip">item</div>
}
// Cacher tooltip
function hideTt(item) {
}
</script>
<!-- <script type="text/javascript" src="tooltip.js"></script> -->
</head>
<body>
<ul>
<li><a href="#" class="gray" onmouseover="javascript:showTt(item01);" onmouseout="javascript:hideTt();">Bâton de guerre massacreur</a></li>
<li><a href="#" class="white" onmouseover="javascript:showTt(item02);" onmouseout="javascript:hideTt();">Bâton de guerre</a></li>
<li><a href="#" class="green" onmouseover="javascript:showTt(item03);" onmouseout="javascript:hideTt();">Bâton long des mages d'Endurance</a></li>
<li><a href="#" class="blue" onmouseover="javascript:showTt(item04);" onmouseout="javascript:hideTt();">Bâton du refuge</a></li>
<li><a href="#" class="purple" onmouseover="javascript:showTt(item05);" onmouseout="javascript:hideTt();">Bâton de grand seigneur de guerre</a></li>
</ul>
</body>
</html>Arrivé là, je séche..
J'éspère trouver de l'aide parmis vous, et que vous aurrez eu le courrage de lire jusqu'au bout.
D'avance merci,
Antoine
Modifié par Bouda (31 May 2005 - 12:47)
)