Bonjour à tous

voilà, j'ai un soucis pour faire apparaitre un ligne de table (<tr>/<tr>) au passage de la souris

J'ai chercher avec mon pote Google et on en a trouvé plein

mais aucun fonctionne avec se que je veux faire

je vous explique pq avec exemple

<table>
<tr>
<td>
mon titre
</td>
</tr>
Texte caché
</table>

répondez pour la suite svp
ou alors avec un autre explorateur ....

ha ca a l'air de fonctionne

voici le text caché :

<tr>
<td>
<a class=...></a>
<span class=...></span>
</td>

</tr>

voila, mon soucis, c'est que dans le text caché, je suis obligé d'utiliser les balises <a></a> et <span></span>
c'est a cause de ca que sa ne fonctionne pas
Vous avez une idée de comment je pourrais faire?
Merci d'avance pour vos réponses

Je n'ai strictement rien compris !

Les bases du HTML c'est quand même que le contenu soit encadré de balises, or dans ton code le texte caché est complètement flottant et ne correspond à rien.

Tu ne peux pas faire ça :

<table>
<tr>
<td>
mon titre
</td>
</tr>
Texte caché
</table>

Commence par nous montrer le code du tableau en entier, parce que ça m'étonnerait qu'il n'y ait que deux éléments dans ton tableau (auquel cas ce n'est pas un tableau qu'il faut utiliser : trop compliqué)

N'hésite pas à nous faire un dessin si ça peut t'aider !

Merci

voici le resultat en image :
quand la souris n'est pas sur le tableau :


et voici le tableau avec la souris dessus :



se qui me pose probleme, c'est que dans le <tr> qui s'affiche au millieu j'utilise des balises <a></a> et <span></span> Obligé

vous avez une idées de comment le faire ??

Bon pour faire ça il ne faut pas utiliser de tableau, il vaut mieux 1 seul div dont le contenu change.
D'autre part, ce n'est pas bien comme idée, il vaut mieux afficher le contenu dès le départ...
Et pour finir on ne demande pas à l'utilisateur d'utiliser firefox , même si ça énèrve, c'est au développeur de s'adapter et non à l'utilisateur de se plier...

Revenons à ton problème : donc 1 div :
Tu lui ajoute une fonction onmouseover qui change le contenu et une fonction onmouseout qui revient à l'ancien contenu :

<div onmouseover="afficherInfos(this);" onmouseout="hideInfos(this);">passez votre ...</div>

function afficherInfos(elmt)
{
    elmt.innerHTML = "ton contenu ici";
}
function hideInfos(elmt)
{
    elmt.innerHTML = "passez votre ...";
}

Un peu comme louf404, à part que son code n'est pas accessible sans Javascript et assez chiant à mettre en place. Je conseillerais plutôt deux divs avec leur contenu respectif et tu n'aurais qu'à en cacher un sur deux.

<h2>information</h2>
<div id="intro_info">passez votre souris pour afficher le contenu</div>
<div id="contenu_info">blah blah blah</div>

et à la fin de ton code HTML, dans la balise body

<script type="text/javascript">
<!--
intro_info = document.getElementById("intro_info");
intro_info.style.display=block;

contenu_info = document.getElementById("contenu_info"); 
contenu_info.style.display=none;

intro_info.onmouseover = function() {
this.style.display=none;
contenu_info.style.display=block;
}

intro_info.onmouseout = function() {
this.style.display=none;
intro_info.style.display=block;
}
//-->
</script>

Tu devras, dans ton CSS, mettre un display:none; à ton div "intro_info" et laisser "contenu_info" visible, c'est le script qui se charge de mettre en place le reste.

Personnellement si c'est pour faire cette technique (qui marche très bien également) autant ne pas utiliser de javascript car il peut être désactivé et que c'est largement faisable et plus simple en css :
Pour le même html, c'est-à-dire celui-ci :

<h2>information</h2>
<div id="intro_info">passez votre souris pour afficher le contenu</div>
<div id="contenu_info">blah blah blah</div>

On peut faire avec css comme ceci :

#contenu_info {
    display:none;
}
#intro_info:hover {
    display:none;
}
#intro_info:hover #contenu_info {
    display:block;
}

C'est simple et ça marche dans tous les cas...

Merci à tous les 2

Geoffrey-Zéro => il n'y a que bla bla qui s'affiche et sans mettre la souris dessus

louf404 => oui rien que en css, je préfererais mais ca va pas ce que tu m'as donné quand je met la souris dessu, il monte, il descend et a l'infini !

voici ma page :

Grrrrr ca marche pas

voici le lien pour la page!

ICI

utiliser Firefox sinon ca va pas

juste en css pour essayer si possible, si pas on mettra javascript

tu n'aurais pas désactivé javascript par hasard ? Le principe de mon script est de n'afficher que blabla si JS est désactivé et d'avoir le comportement souhaité si JS est activé.

On ne peut pas réaliser ça uniquemet en CSS. La pseudo-class :hover ne fonctionne que sur des balises a avec Internet Explorer 6 (et je crois qu'avec la 7 c'est pas parfait non-plus).

De plus , ce code CSS ne peut pas fonctionner puisque tu demandes au bloc censé afficher le contenu de disparaître au survol : or, comme disparaît, l'affichage du conteu est annulé et ça clignote...

L'avantage de JS par rapport à :hover c'est que JS distingue onmouseover et onmouseout alors que :hover cumule les deux.

he non javascript est activé enfin je pense

j'ai d'autre scrip avec des onclick qui vont

je modifie la page avec tes idées et on regarde stp
voila, c'est fais
pour le css, dans le <head> je dois bien mettre :

<style type="text/css">
<!--
#intro_info {
    display:none;
}
-->
</style>

Ouh là... elle est sacrément bricolée ta page...

Efface TOUT et écris

<!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" >
<head>

<style type="text/css">
#informations
{
margin: auto;
width: 700px;
}

h2
{
margin: 0px;
height:34px;
}

#contenu_info
{
background: url(images/dino-rpg/fond/fond_recompense_centre.png);
}

#intro_info 
{
background: url(images/dino-rpg/fond/fond_recompense_centre.png);
display: none;
}
</style>

</head>
<body>
<div id="informations">
<h2><img src="images/dino-rpg/fond/fond_info_haut.png" alt="Information" title=""></h2>
<div id="intro_info">passez votre souris pour afficher le contenu</div>
<div id="contenu_info">blah blah blah</div>
</div>

<script type="text/javascript">
<!--
intro_info = document.getElementById("intro_info");
intro_info.style.display='block';

contenu_info = document.getElementById("contenu_info"); 
contenu_info.style.display='none';

intro_info.onmouseover = function() {
this.style.display='none';
contenu_info.style.display='block';
}

contenu_info.onmouseout = function() {
this.style.display='none';
intro_info.style.display='block';
}
//-->
</script>
</body>
</html>

oui

ici

tu verra le script complet de la page en dessous
parce que je n'arrive pas a le mettre sur le fofo

si besoin, voici la page ou sera installé le script

La fraternité des Fées

J'avais vu plus haut (cf. mon message édité)

l'erreur provenait du fait que tu avais mis le script dans le head alors que je t'avais dit de le mettre à la fin, mais ta page était foutue tellement bizarrement que d'autres bugs ont dû s'empiler

haaaa super Geoffrey-Zéro

on s'approche du résultat souhaité

voila, j'ai mis a jour la page : ICI

et les <span> fonctionne dedans
mais j'ai cependant encore besoin de toi

voila, j'ai mis un liens hypertexte dans le text caché mes quand on déplace la souris plus bas, il s'en va et on ne sais pas cliquez dessus (voir page ICI)

Ah la poisse, je sais ce qui bloque...
Quand tu passes la souris sur les span ou sur le lien le navigateur pense que tu as quitté le div "contenu_info" et cache donc le contenu.

Le mieux je pense, c'est de mettre un bouton "fermer" dans ton div "contenu_info" et de remplacer le code suivant

contenu_info.onmouseout = function() {
this.style.display='none';
intro_info.style.display='block';
}

par

bouton_fermer = document.getElementById("fermer");

bouton_fermer.onclick = function() {
contenu_info.style.display='none';
intro_info.style.display='block';
}

edit : d'ailleurs je ne trouve pas très agréable que tout une partie s'ouvre au survol. On peut l'ouvrir par mégarde et ça devient agaçant. Je te conseillerais plutôt de demander à ce qu'on clique dessus. (remplacer intro_info.onmouseover par intro_info.onclick dans le code)

Bref tous ça pour dire que c'est un effet inutile qui vas uniquement embêter l'utilisateur, donc on en revient au temps où JS servait à faire des popups qui énervent le client

merci à vous deux, j'ai fais un mélange de tout et voila ca fonctionne nikel

voici le résultat

La fraternite des fées

Encore merci bonne soirée

Je trouve ça pas mal du tout , je ne pensait pas mais en fait l'effet ici est compréhensible, je retire donc ce que j'ai dit dans mon précédent message.
Juste 2 conseil, le mieux serait un évènement onclick sur le texte 'afficher / masquer' plutôt qu'un onmouseover.
Et sinon il serait bien d'afficher un titre (comme Informations)...
Voilà