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** · 08/01/2007, 19h32

Merci à tous pour vos réponses, je suis pas chez moi là mais je testerai tout ca dès ce soir je rentre... merci encore

Edit: SpaceFrog j'adore la partie verte de ta signature

**sansamis** · 08/01/2007, 20h47

En fait spacefrog j'ai pas pigé ton truc, son utilité et comment l'utiliser :/

Aussi j'ai essayé ca:

Code :

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

1
2
3
4
5
6
7
8
window.onload = pbo;
 
function pbo()
{
var code = document.body.innerHTML;
code = code.replace(/Roger/g, '<span href="blabla.bla" onclick="window.open(this.href); return false;" style="border-bottom: 1px dotted #000000; cursor: pointer; text-decoration: none;" onmouseover="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</span>');
document.body.innerHTML = ' '+code+'<div id="desc" style="position: absolute; display: none; background-color: #000000;"></div>';
}

"Roger" est bien transformé en lien mais je ne comprend pas pourquoi l'affichage du cadre ne marche pas en mouseover :///

**Gruik** · 08/01/2007, 21h26

C'est tout un parcours du combattant pour recuperer la position de la souris dans la page, je crois que la solution que tu as utilisé est pour IE seulement.
http://www.quirksmode.org/js/events_....html#position

Definis plutot une fonction au lieu de mettre tout le code dans l'attribut onmouseover, c'est serieusement illisbile ^^

Ya un truc qui va pas aussi, c'est qu'à chaque Roger il va yavoir un <div id="desc"> alors qu'un id est sensé etre unique pour toute la page.
En clair ne crée qu'une seule fois ce div

**sansamis** · 08/01/2007, 21h31

1. La position de mon curseur fonctionne très bien sur tout navigateur, la preuve sur mon début de calendrier.

2. Comme on l'a vu avant, dès que je définit une fonction autre que pbo(), plus rien ne marche et j'aai pas compris pourquoi :/

3. Ben non mon id="desc" n'est afficher qu'une fois nan ?

Edit: pour le 1., j'avais oublier un bout de code pour x et y

J'en suis donc là:

Code :

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

1
2
3
4
5
6
7
8
window.onload = pbo;
 
function pbo()
{
var code = document.body.innerHTML;
code = code.replace(/Roger/g, '<span href="blabla.bla" onclick="window.open(this.href); return false;" style="border-bottom: 1px dotted #000000; cursor: pointer; text-decoration: none;" onmouseover="document.getElementById(\"desc\").style.left = (navigator.appName.substring(0,3) == \"Net\") ? p.pageX : event.x+document.body.scrollLeft; document.getElementById(\"desc\").style.top = (navigator.appName.substring(0,3) == \"Net\") ? p.pageY : event.y+document.body.scrollTop; document.getElementById(\"desc\").innerHTML = \"Roger est gentil\"; desc.style.display = \"\";">Roger</span>');
document.body.innerHTML = ' '+code+'<div id="desc" style="position: absolute; display: none; background-color: #000000;"></div>';
}

Edit2: j'aimerais bien fait plus simple en définisant d'autres fonctions, mais comme je l'ai dis dès que je le fait plus rien ne marche, et je ne comprend pas pourquoi

Si je rajoute

Code :

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

1
2
3
4
function test()
{
 
}

ca marche mais si je rajoute

Code :

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

1
2
3
4
5
function pos()
{
document.getElementById(\"desc\").style.left = (navigator.appName.substring(0,3) == \"Net\") ? p.pageX : event.x+document.body.scrollLeft;
document.getElementById(\"desc\").style.top = (navigator.appName.substring(0,3) == \"Net\") ? p.pageY : event.y+document.body.scrollTop;
}

ca ne marche plus

Edit3: J'avais laissé les guillemets

Si je met

Code :

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

1
2
3
4
5
function pos()
{
document.getElementById("desc").style.left = (navigator.appName.substring(0,3) == "Net") ? p.pageX : event.x+document.body.scrollLeft;
document.getElementById("desc").style.top = (navigator.appName.substring(0,3) == "Net") ? p.pageY : event.y+document.body.scrollTop;
}

c'est bon

Mais ca n'empeche pas que ca n'affiche rien :'(

**sansamis** · 08/01/2007, 21h44

j'en suis donc là:

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
window.onload = pbo;
 
function pbo()
{
var code = document.body.innerHTML;
code = code.replace(/Roger/g, '<span href="blabla.bla" onclick="window.open(this.href); return false;" style="border-bottom: 1px dotted #000000; cursor: pointer; text-decoration: none;" onmouseover="show(\"Roger est gentil\");">Roger</span>');
document.body.innerHTML = ' '+code+'<div id="desc" style="position: absolute; display: none; background-color: #000000;"></div>';
}
 
function show(text)
{
document.getElementById("desc").style.left = (navigator.appName.substring(0,3) == "Net") ? p.pageX : event.x+document.body.scrollLeft;
document.getElementById("desc").style.top = (navigator.appName.substring(0,3) == "Net") ? p.pageY : event.y+document.body.scrollTop;
document.getElementById("desc").innerHTML = text;
desc.style.display = "";
}

Rien ne s'affiche :/

Des idées (désolé du bordel que je cause...)

**Gruik** · 08/01/2007, 21h51

1. Ah oui, c'est la bonne methode sur ton site, mais dans ton code precedent, tu utilisais pas pageX et pageY

3. Ah oui, desolé

2. Il faut que tu passe l'objet evenement à ta fonction

Code :

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

1
2
3
4
5
function pos(p) {
 var e = p || window.event;
 document.getElementById("desc").style.left = (navigator.appName.substring(0,3) == "Net") ? e.pageX : e.x+document.body.scrollLeft;
 document.getElementById("desc").style.top = (navigator.appName.substring(0,3) == "Net") ? e.pageY : e.y+document.body.scrollTop;
}

Code :

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

onmouseover="pos(event);"

**sansamis** · 08/01/2007, 21h56

J'en suis donc ici:

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
window.onload = pbo;
 
function pbo()
{
var code = document.body.innerHTML;
code = code.replace(/Roger/g, '<span href="blabla.bla" onclick="window.open(this.href); return false;" style="border-bottom: 1px dotted #000000; cursor: pointer; text-decoration: none;" onmouseover="pos(event); show(\"Roger est gentil\");">Roger</span>');
document.body.innerHTML = ' '+code+'<div id="desc" style="position: absolute; display: none; background-color: #000000;"></div>';
}
 
function pos(p)
{
var e = p || window.event;
document.getElementById("desc").style.left = (navigator.appName.substring(0,3) == "Net") ? e.pageX : e.x+document.body.scrollLeft;
document.getElementById("desc").style.top = (navigator.appName.substring(0,3) == "Net") ? e.pageY : e.y+document.body.scrollTop;
}
 
function show(text)
{
document.getElementById("desc").innerHTML = text;
desc.style.display = "";
}

Roger est bien souligné comme il faut, de ce coté là nickel, mais toujours aucune infobulle qui s'affiche :/

**Gruik** · 08/01/2007, 22h01

Et sans appeler pos(), en mettant des valeurs par defaut pour la position du div (ex: left: 30px; top: 130px), est ce que le div s'affiche?

**sansamis** · 08/01/2007, 22h14

Rien, même si en plus je vire le "display: none;".

Donc ca doit venir de l'affichage, enfin surement du fait que le div ne se place pas, ou pas correctement... mais je vois pas

**Gruik** · 08/01/2007, 22h16

Arf

Code :

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

1
2
3
4
5
6
function show(text)
{
var desc = document.getElementById("desc");
desc.innerHTML = text;
desc.style.display = "";
}

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

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
22
window.onload = pbo;
 
function pbo()
{
var code = document.body.innerHTML;
code = code.replace(/Roger/g, '<span href="blabla.bla" onclick="window.open(this.href); return false;" style="border-bottom: 1px dotted #000000; cursor: pointer; text-decoration: none;" onmouseover="pos(event); show(\"Roger est gentil\");">Roger</span>');
document.body.innerHTML = ' '+code+'<div id="desc" style="position: absolute; display: none; background-color: #000000;"></div>';
}
 
function pos(p)
{
var e = p || window.event;
document.getElementById("desc").style.left = (navigator.appName.substring(0,3) == "Net") ? e.pageX : e.x+document.body.scrollLeft;
document.getElementById("desc").style.top = (navigator.appName.substring(0,3) == "Net") ? e.pageY : e.y+document.body.scrollTop;
}
 
function show(text)
{
var desc = document.getElementById("desc");
desc.innerHTML = text;
desc.style.display = "";
}

Toujours rien

**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

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

JavaScript

Discussions similaires

Partager

Partager