18042 sujets

Questions générales et questions de débutants

Proposer une explication de texte au survol des mots techniques

Bonjour à tous,
Je réalise un tableau technique de présentation de données de texte
et j'aimerais proposer une définition de certains mots de ce tableau.

L'idée étant de proposer cette explication au survol d'un lien "fictif" de type:
<table>
			<tr>
			<td>Mon <a title="ma définition de texte" href="#">texte</a></td>
			</tr>
	</table>

J'ai environ 30 explications de texte à donner sur le tableau mais la balise "title" est trop restrictive quant à la longueur de l'explication.

J'ai vu plusieurs propositions de javascript sur la balise "alt" mais cela ne me semble pas très adapté à mon cas

Pourriez-vous me conseiller sur une méthode propre, accessible et compatible Smiley cligne pour me permettre d'indiquer des définitions au survol de mots ?

merci d'avance pour vos conseils

Cordialement
<html><head><script type="text/javascript">
function efface() {
var nb= nombre-de-definitions;
for (i=1;i<nb;i++)
document.GetElementById("def"+i).style.display="none";
}
function affiche(i) {
document.GetElementById("def"+i).style.display="inline";
}
</script></head><body onload="javascript:efface();">
<table>

			<tr>

			<td>Mon <a href="#" onmouseover="javascript:affiche(1);">texte</a><span id="def1">Texte de la définition</span></td>

			</tr>

	</table>...
écrit de tête donc peut etre à adapter mais le principal y est... Smiley langue

il faut quand même que le visiteur ait activé javascript (la plupart, même si je n'ai pas de chiffres)

sinon, pour faire top, tu peux le faire en css (le + compatible)
Tu touches déjà à css ?
Modifié par LeParrain735 (29 Oct 2006 - 17:12)
en fait, j'ai vérifié mon code quand même (conscience professionelle)

alors voilà un exemple simple:
<html><head><script type="text/javascript">

function efface(i) {
document.getElementById("def"+i).style.display="none";
}
function efface_tous(){
var total = 3;
for (i=1;i<=total;i++) {efface(i);}
}
function affiche(i) {
document.getElementById("def"+i).style.display="inline";
}

</script></head><body onload="javascript:efface_tous();">

<table>
	<tr>
		<td>Mon <a href="#" onmouseover="javascript:affiche(1);" onmouseout="javascript:efface(1);">texte1</a>
		<span id="def1">Texte de la définition1</span>
		</td>
		<td>Mon <a href="#" onmouseover="javascript:affiche(2);" onmouseout="javascript:efface(2);">texte2</a>
		<span id="def2">Texte de la définition2</span>
		</td>
		<td>Mon <a href="#" onmouseover="javascript:affiche(3);" onmouseout="javascript:efface(3);">texte3</a>
		<span id="def3">Texte de la définition3</span>
		</td>
	</tr>
</table>
</body></html>


après, si t'utilise php et une base mysql pour stocker tes textes et def, tu peux faire éditer cette page dynamiquement, c'est plus pratique
Bonsoir,
LeParrain735>merci pour le code, je vais regarder attentivement
Eldebaran> merci pour le lien, cela peut être une alternative - je vais choisir le plus simple à mettre en place Smiley cligne
Bonne soirée
Sujet clos
Aller à