Un truc compliqué (créer un a avec href dynamiquement)

**sansamis** · 07/01/2007, 21h20

Si vous avez suivi mes différents problèmes d'aujourd'hui tant mieu, sinon c'est pas grave...

Voila le truc:

J'ai une page qui affiche juste "Salut Roger !", cette phrase se trouvant entre <body> et </body>.

Ce que je veux, c'est un script JS à ajouter entre <head> et </head> uniquement et sans rien ajouter d'autre, qui ferait que, lorsque je passe le curseur sur le mot "Roger", une decription du Roger (ici "Roger est gentil") s'affiche au niveau du curseur.

J'ai donc fait ca:

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
window.onload = pbo;
 
function pbo()
{
var code = document.body.innerHTML;
code = code.replace(/Roger/g, '<a href="#" onmouseover="javascript: over_Roger();">Roger</a>');
document.body.innerHTML = code;
}
 
function over_Roger();
{
document.getElementById("desc").style.left = event.x+document.body.scrollLeft;
document.getElementById("desc").style.top = event.y+document.body.scrollTop;
document.getElementById("desc").innerHTML = "Roger est gentil";
desc.style.display = "";
}
 
document.write('<div id="desc" style="position: absolute; display: none;"></div>');

En revanche si j'enlève ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function over_Roger();
{
document.getElementById("desc").style.left = event.x+document.body.scrollLeft;
document.getElementById("desc").style.top = event.y+document.body.scrollTop;
document.getElementById("desc").innerHTML = "Roger est gentil";
desc.style.display = "";
}

"Roger" est bien remplacé par "<a href="#" onmouseover="javascript: over_Roger();">Roger</a>".

Ma question: pourquoi l'ajout de la fonction "over_Roger();" fait que rien ne marche plus ?

Que faire ?

Merci 'avance...

**Auteur** · 07/01/2007, 23h34

bonjour,

deux questions :
- es-tu sûr que le div id="desc" existe (place un alert dans ta fonction over_Roger et regarde ce que retourne document.getElementById() ) ? La méthode write() pour ajouter un élément dans ta page n'est vraiment pas ce qu'il y a de mieux.

- Compte-tenu de la longueur du texte, pourquoi te casses-tu la tête avec un div ? Tu peux utiliser l'attribut title de la balise a (et ainsi supprimer ta fonction over_Roger) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
code = code.replace(/Roger/g, '<a href="#" title="gentil le Roger">Roger</a>');

et supprime le terme "javascript" après un événement (onclick, onmouseover, onmouseout, onchange, etc...) . Ne l'utilise que pour des pseudo-url. Exemple de pseudo-url :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="javascript: alert('coucou')">Pseudo-url</a>

**SpaceFrog** · 08/01/2007, 08h43

de manière générale mieux vaut éviter les document.write pour ajouter des objets et leur attribuer des évènements... mieux vaut passer par le DOM...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var newObj=document.createElement('a');
newObj.href="javascript:Roger();return false;"
newObj.innerHTML='coucou'

**dingoth** · 08/01/2007, 11h22

... et mieux vaut utiliser un <span> au lieu d'un <a> dans ce cas, sauf si Roger est réellement un lien.

**Gruik** · 08/01/2007, 11h37

... ou créer un <a> sans href ,)

**SpaceFrog** · 08/01/2007, 11h38

avec un onclick et un style="cursor:pointer"

**sansamis** · 09/01/2007, 21h12

heu... up?

**Gruik** · 09/01/2007, 21h42

Ah ça y'est
Quelque part j'ai dit ".style.display = '' " pour "rafficher" un element.
En fait ça remet la propriété display à sa valeur initiale je pense (celle positionnée par CSS).
Ici la valeur initiale était "none"
Il faudrait essayer avec "display = 'block'", je ne connais pas exactement le type de bloc qu'est un div, mais peut etre que c'est 'block'
Voila

**sansamis** · 09/01/2007, 22h22

Salut Gruik et merci d'être encore là pour moi

Ben oui, "block" est bien (avec "inline" qui est sensiblement pareil) la valeur par défait de display, mais ca ne marche toujours pas (j'avais déjà essayé en enlevant le "display: none" par défaut mais ca marchait pas).

Ca peux pas venir du fait que ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.body.innerHTML = ' '+code+'<div id="desc" style="position: absolute; display: none; background-color: #000000;"></div>';

c'est pas correct ? il faut peut-être générer le div autrement, ailleur, à un autre moment, je sais pas...

ca inspire personne ?

Merci d'avance, su ce je vais me coucher et je reprendrai ca demain...

Bonne nuit Gruik et bonne nuit tout le monde

**SpaceFrog** · 10/01/2007, 08h34

créer le au depart su la page avec un style display none ... ?

**sansamis** · 10/01/2007, 20h53

Comment ca ? éxplique un poil plus s'il te plait

Si tu parles de mettre document.write('<div id="desc" style="position: absolute; display: none; background-color: #000000;"></div>'); au début je viens d'essayer ca ne fonctionne pas :'(

Un truc compliqué (créer un a avec href dynamiquement)

JavaScript

Vue hybride

Discussions similaires

Partager

Partager