Discussion :

[flyeric]

bonjour à tous,

je suis nouveau sur le forum, je m'appelle eric et n'ai quasiment pas de connaissance en javascript.
en revanche, je connais pas trop mal l'as3. j'ai donc une connaissance de la POO.

j'aimerais beaucoup une petite aide sur un tout petit script qui me pose problème et qui marche parfaitement tout seul. en revanche dès que je l'inclus dans une fonction et que j'appelle cette fonction, ça ne marche plus.
je vais être plus précis et vous donner les deux scripts.

le premier qui fonctionne:

Code :

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

1
2
3
4
5
6
7
<span class="socialRssHover">
					<script language=JavaScript>
					document.write ('<a target="_blank "href="');
					document.write('http://www.stumbleupon.com/submit?url='+document.URL+'&title='+document.title.replace(/ /g,'+')+'">');
					document.write ('<img border=0 src=http://localhost/monSite/images/icons/social-stumbleupon-for-footer.png title="Stumbleupon monSite.com" alt="Stumbleupon monSite.com"></a>');
					</script>
				</span>

ça fonctionne donc très bien, le script m'affiche l'icone de stumbleupon et surtout lorsque je click dessus, je suis redirigé vers le site web stumbleupon.

ayant voulu que l'icone stumbleupon soit grise losque le pointeur de la souris n'est pas dessus, j'ai fait ceci:

Code :

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

1
2
3
4
5
6
7
8
9
<span class="socialRssHover" onmouseout="MM_showHideLayers('stumbleupon','','hide')" onmouseover="MM_showHideLayers('stumbleupon','','show')" onclick="stumbleUpon()">
					<script type="text/javascript" language="JavaScript"> 
					function stumbleUpon() {
					document.write('<a target="_blank "href="');
					document.write('http://www.stumbleupon.com/submit?url='+document.URL+'&title='+document.title.replace(/ /g,'+')+'">');
					document.write('<img border=0 src=http://localhost/monSite/images/icons/social-stumbleupon-for-footer-bw.png title="Stumbleupon monSite.com" alt="Stumbleupon monSite.com"></a>');}
					</script>
					<img src="http://localhost/monSite/images/icons/social-stumbleupon-for-footer.png" id="stumbleupon" />
				</span>

et là, ça ne marche plus. ce n'est pas l'affichage qui me pose problème, c'est la redirection sur le site stumbleupon. la fonction stumbleUpon() est bien appelée mais au lieu d'être redirigé sur le site web stumbleupon, la fonction efface la page et m'affiche l'icone de stumbleupon (donc certainement cette ligne de mon script"document.write('<img border=0 src=http://localhost/monSite/images/... etc") et l'adresse figurant dans la barre d'adresse n'est donc pas celle de stumbleupon.com mais l'adresse de mon site en local: http://localhost/monsite.

je précise que le script est exactement le même, je n'ai rien touché sauf que je l'appelle de cette nouvelle fonction et j'imagine qu'il doit y avoir un problème de ciblage?

Si vous pouviez m'éclairer un peu car j'aimerais comprendre pourquoi le script ne marche plus lorsque je l'appelle d'une fonction.

merci beaucoup à tous et bonne matinée.

[SpaceFrog]

bannis le document.write de tes scripts pour au minimum les 5 années à venir ...
Regarde plutot du coté du DOM (document.createElement)
ou au pire un innerHTML
Et pis ça sent le DW à fond
Elle font quoi tes fonctions mousover et mouseout ?
Tu l'appelles à quel moment la fonction ??

Et avoir un id avec le même nom qu'une fonction c'est chercher les ennuis ..

[NoSmoking]

Bonjour et bienvenue au club

comme te la indiqué SpaceFrog, il te faut éviter d'utiliser document.write, qui quand il est exécuté au moment de la construction de la page ajoute dans le flux ce que tu passes en paramètre mais qui lorsque la page est chargée remplace purement et simplement le contenu de celle ci par ce qui est passé en paramètre.

Dans ton cas je pense qu'un simple effet de CSS devrait être suffisant avec le sélecteur :hover.

[flyeric]

bonjour spaceFrog et merci pou ta réponse rapide.

en fait j'ai repris le script de stumbleupon. n'ayant pas d'expérience javascript, je ne savais pas pour le document.write.
d'autre part j'ai essayé avant innerHTML mais ça n'a rien changé.
non en fait j'utilise notpad++ et j'ai intégré ce bout de javascript effectivement extrait des comportements de dreamweaver dans une page php/wordpress.

les fonctions mouseover et mouseout affiche l'icone stumbleupon grisé en louseout et en couleur en mouseover.

Et avoir un id avec le même nom qu'une fonction c'est chercher les ennuis ..

y'a une majuscule tout de même qui différencie le nom de la fonction et l'id mais je reconnais effectivement que c'est risqué et que ça peut très facilement porter à confusion.

merci encore pour les éventuels conseils (à venir)...

bannis le document.write de tes scripts pour au minimum les 5 années à venir ...
Regarde plutot du coté du DOM (document.createElement)
ou au pire un innerHTML
Et pis ça sent le DW à fond
Elle font quoi tes fonctions mousover et mouseout ?
Tu l'appelles à quel moment la fonction ??

Et avoir un id avec le même nom qu'une fonction c'est chercher les ennuis ..

[flyeric]

bonjour noSmoking,

merci pour ta réponse.

Dans ton cas je pense qu'un simple effet de CSS devrait être suffisant avec le sélecteur :hover.

désolé mais pourrais-tu être un peu plus explicite?

tu voudrais dire que je garde le script qui marche au départ et faire afficher l'icone grisée et que j'ajoute dans mes css à ma class socialRssHover: un nouveau sélecteur donc: socialRssHover:hover et que j'y ajouterais aussi une propriété background-image qui contiendrait mon icone en couleur?
c'est ça?

merci et bonne matinée.

[NoSmoking]

un petit exemple rapide

Code html :

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
23
24
25
26
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
span.socialRssHover img{
  border : 0;
  opacity : 0.5;
  filter : alpha(opacity=50); /* pour IE */
}
span.socialRssHover:hover img{
  opacity : 1;
  filter : alpha(opacity=100);
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<span class="socialRssHover">
  <a target="_blank" href="http://www.developpez.net">
  <img src="http://www.developpez.net/template/images/logo.gif" title="Developpez" alt="Developpez"></a>
</span>
</body>
</html>

par contre si tu es obligé d'ajouter à l'URL les paramètres, submit?url='+document.URL+'&title='+document.title.replace(/ /g,'+'), cela ne sera pas suffisant

[flyeric]

super exemple NoSmoking.

merci mille fois.

je vais essayer ça et reviendrais dès que ce sera fait. (probablement demain matin pour vous car je suis à l'autre bout de la planète...)

encore merci et bonne après-midi.

[flyeric]

bonjour à tous et bonjour NoSmoking,

par contre si tu es obligé d'ajouter à l'URL les paramètres, submit?url='+document.URL+'&title='+document.title.replace(/ /g,'+'), cela ne sera pas suffisant

ton css marche très bien, malheureusement je suis obligé d'ajouter les paramètres suivants l'URL...

j'en reviens donc à ma première requête, et me tourne vers ta première réponse:

il te faut éviter d'utiliser document.write, qui quand il est exécuté au moment de la construction de la page ajoute dans le flux ce que tu passes en paramètre mais qui lorsque la page est chargée remplace purement et simplement le contenu de celle ci par ce qui est passé en paramètre

à mon avis c'est par là qu'il faut creuser mais là, je patauge complètement...

si encore une fois tu pouvais m'aiguiller un peu?

merci à toi et je te souhaite une bonne journée ainsi qu'à trous.

[NoSmoking]

si l'on reprend l'exemple mis plus haut, modifies la partie BODY comme suit

Code html :

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

1
2
3
4
5
6
7
8
<span class="socialRssHover">
  <a id="le_lien" target="_blank" href="http://www.developpez.net/">
  <img src="http://www.developpez.net/template/images/logo.gif" title="Developpez" alt="Developpez"></a>
</span>
<script type="text/javascript">
var oLien = document.getElementById('le_lien');
oLien.href = oLien.href + 'submit?url='+document.URL+'&title='+document.title.replace(/ /g,'+')
</script>

et observes le résultat, tu devrais avoir la réponse à ta question.

[flyeric]

Bonjour NoSmoking,

tout d'abord je tiens à m'excuser pour cette réponse très tardive.
j'ai été occupé à une autre tâche durant une dizaine de jours et c'est la raison pour laquelle je n'ai pas répondu plus tôt.

ensuite, je te remercie beaucoup pour ton petit script (qui fonctionne très bien) et qui m'a permis de réaliser l'effet recherché.

je fini par te dire une nouvelle fois merci ainsi qu'à toutes les personnes qui bénévolement aident les autres dans des communautés telles que la votre.
un outil (le forum) indispensable et éminemment utile sans lequel on ne pourrait progresser aussi vite!

je rappelle qu'il ne faut jamais oublier de remercier les gens (même tardivement et j'en suis désolé) qui vous aident et bien évidemment d'aider les autres en retour lorsque l'on peut le faire. c'est le but d'un forum et c'est le juste retour des choses.

bonne journée à tous.