[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

Discussions similaires

Partager

Partager