[DOM] Javascript onmouseover & span

**cybertj** · 30/08/2008, 09h35

Bonjour � tous,

Je vais vous poser une question qui va peut �tre vous sembler b�te mais voici mon soucis en exemple sur la fonction ci-dessous. En utilisant:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<span id="test" onmouseover="javascript:mafonction('variable_transmise_a_la_fonction',this)>Texte affecté par le omouseover</span>

D�s que la souris survole cette ligne, tout est donc transmis vers la fonction javascript mafonction dont le dexui�me argument coorespint � "this" soit au contenu de la balise span dans un objet.

Voici cette fonction:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
function mafonction('variable_transmise_a_la_fonction',span){
 
if(variable_transmise_a_la_fonction!=null){
var id=span.id   /*récupère l'id du span contenu dans l'objet renvoyé par this*/
}
 
}

Ma question est la suivante, this renvoie t'il le texte contenu entre les deux balises span � savoir dans l'exemple "Texte affect� par le omouseover". Et si c'est le cas comment je recup�re dans l'objet span...

J'ai esssay� des dizaines de truc sans succ�s (span.txt ou encore span.content) mais j'ai pas r�ussi � trouv� d'infos.

Pour vez vous m'aider � attraper ce texte si il est est bien renvoy� par this ?

Merci d'avance et d�sol� si la question peut paraitre b�te pour cerrtains d'entre vous.

**Loceka** · 30/08/2008, 11h51

Non, le javascript est bas� sur DOM.
En gros, ton fichier HTML est un arbre o� chaque �l�ment est un noeud, un noeud pouvant (ou non, tout d�pend de sa nature) poss�der des attributs, un noeud parent et des noeuds enfants.

Ici, le this correspond au noeud <span>. Le texte contenu dans span est un enfant de span.

Dans ton cas il faut faire utiliser les m�thodes firstChild et data :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var tonTexte = this.firstChild.data;

**cybertj** · 30/08/2008, 12h58

Bonjour et merci � toi de bien vouloir m'aider... Je n'ai pas r�ussi avec ce que tu m'as donn� mais j'ai une solution bancale donc qui ne marche pas encore mais c'est d�j� mieux...

Le but de ce script est de faire apparaitre les liens seulement si ils ont �t� survol�s une fois avec la souris... Petit probl�me les liens semblent se cr�er mais impossible de cliquer dessus sous IE ou FF.

Si vous aviez encore l'aimabilit� de jetter un oeil, voici le code complet que j'utilise pour ce test... J'ai mis en commentaire la ligne que vous m'aviez conseill�e d'utiliser pour voir aussi si elle est correctement �crite...

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<SCRIPT language=JavaScript>
<!-- Ajoute un lien sur le texte uniquement si le lien est survolé avec la souris 
 
function fonction(id_contenu,span_content){
 
  var txt = document.getElementById(id_contenu).innerHTML;
  /*var txt = document.getElementById(id_contenu).firstChild.data;*/
  var link ='<a href="/lien-'+id_contenu+'.html">'+txt+'</a>';
  document.getElementById(id_contenu).innerHTML=link;
 
}
//-->
</SCRIPT>
</head>
<body>
<span id="L1" onmouseover="javascript:fonction('L1',this)">titre1</span><br>
<span id="L2" onmouseover="javascript:fonction('L2',this)">titre2</span><br>
</body>
</html>

Merci d'avance

**Loceka** · 31/08/2008, 17h12

chez moi il y'a 2 probl�mes :
-> il cr�� un nouveau lien � chaque fois que tu passes sur le span
-> il n'aime pas le "/" dans l'URL (en local en tout cas)

Pour le premier probl�me, tu as 2 solutions :
-> tester l'existence de ton lien avec un bool�en en variable globale
-> supprimer l'attribut onmouseover

Ou, mieux, tu peux remplacer ton span par le lien :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
function remplacerElement( elem ) {
  var textElem = document.createTextNode(elem.firstChild.data);
  var linkElem = document.createElement("a");
 
  var val = "lien-"+elem.getAttribute("id")+".html";
  linkElem.setAttribute("href", val);
 
  linkElem.appendChild(textElem);
 
  elem.parentNode.replaceChild(linkElem, elem);
}

**cybertj** · 01/09/2008, 18h22

Je te remercie vraiment.

Gr�ce � toi je viens non seulement d'apprendre quelque chose que je ne savais pas mais en plus cette fonction marche parfaitement pour l'usage que j'en ai.

Merci c'est parfait

**Loceka** · 01/09/2008, 19h06

Alors clique sur r�solu.

[DOM] Javascript onmouseover & span

JavaScript

Vue hybride

Discussions similaires

Partager

Partager