Script fonctionnel en 4:3 et non en 16:9

Version imprimable

Bonjour,

J'ai un script JavaScript qui permet d'afficher une photo en format miniature lorsque on survol un nickname. La photo affiche au bon endroit lorsque je suis avec un écran de PC de bureau format 4:3, mais avec mon portable l'écran est en 16:9 la photo ne s'affiche pas au bon endroit.

La photo est supposé s'affiche à cote du curseur de ma souris, donc à 100 pixels en moins en Y et même chose en X.

J'ai trouvé ce script sur le WEB, donc il n'est pas de moi.
Code:

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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <DIV class=popperlink id=topdecklink></DIV> <SCRIPT language="JavaScript"> domok = document.getElementById; if (domok) { skn = document.getElementById("topdecklink").style; if(navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE); document.onmousemove = get_mouse; } function poplink(msg, texte) { var content ="<img src="+msg+" height='120' width='90'><br><font style='font-size:10px;color:#F00'><div align='center'>"+texte+"</div></font>"; if (domok) { document.getElementById("topdecklink").innerHTML = content; skn.visibility = "visible"; } } function get_mouse(e) { var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; skn.left = x-100; skn.top = y-100; } function closepopup() { if (domok) skn.visibility = "hidden"; } </SCRIPT>
Et voici ce qui se trouve dans le fichier .CSS
Code:

1 2 3 4 5 .popperlink { POSITION: absolute; VISIBILITY: hidden }
Voici la façon dont je l'utilise dans mes liens :
Code:

1 2 <a onMouseOver="poplink('../images/<?php echo $photo; ?>','<?php echo stripslashes($row_sorties['prenom']); ?>')" onMouseOut="closepopup()"><?php echo stripslashes($row_sorties['nickname']); ?></a>
Si vous avez des astuces sur ce qui cloche, merci de m'aider.

Le Script est dans la balise <head></head>

Merci
Sylvain

28/02/2011, 08h24
dukej

Vu le peu de code que tu nous donnes, tu ferais mieux de nous en donner plus, car là ce n'est pas du tout suffisant pour déceler ton problème.

Ton problème ne vient SUREMENT pas du fait que l'écran soit en 4/3 ou 16/9 ou 16/10.
Redimensionne ton navigateur, tu auras le même problème. si tu as callé ta "fleche" pile poil par rapport à ce que tu vois sur ton écran, c'est normal que ça ne marche pas ailleurs.
28/02/2011, 08h52
Bovino

Citation:

J'ai trouvé ce script sur le WEB, donc il n'est pas de moi.

Mouais... et au vu de la qualité du code, il y a fort à parier que son auteur est mort de vieillesse depuis longtemps... :roll:

j'ai apporter les modifs afin d'actualiser le script mais il faudra le faire fonctionner en xhtml et pas en html4

Code:

1
2
3
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Code:

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
27
28
29
30
31
32
33
34
35
 
 
<DIV class=popperlink id=topdecklink></DIV>
<SCRIPT language="JavaScript">
 
 
 
	skn = document.getElementById("topdecklink").style;
 
	if(navigator.appName.substring(0,5) != "Micro"){
		document.addEventListener("mousemove", get_mouse, false)
	}
	else{
	document.onmousemove = get_mouse;
	}
 
function poplink(msg, texte)
{
 
var content ="<img src="+msg+" height='120' width='90'><br><font style='font-size:10px;color:#F00'><div align='center'>"+texte+"</div></font>";
 
	  	document.getElementById("topdecklink").innerHTML = content;
	  	skn.visibility = "visible";
 
}
 
function get_mouse(e)
	{
	var dde=(navigator.vendor) ? document.body : document.documentElement;
	s =(!s) ? window.event : s;
	var x =s.clientX + dde.scrollLeft;
	var y =s.clientY + dde.scrollTop;
	skn.left = x-100+"px";
	skn.top = y-100+"px";;
	}

20/03/2011, 21h39
ConceptInterWEB

Bonjour à vous tous,

Après vérification, le script ne fonctionne pas bien dans FireFox.

La façon dont je fonctionne est la suivante, j'ai dans chacune de mes pages un fichier COLDROIT.PHP et c'Est dans celui-ci qu'est le script dont il est question.

C'est un tableau de 200 pixels, qui contient les informations des usagers en ligne etc...

Cependant, il arrive que dans le tableau de gauche de 800 pixels, la souris soit sur un nick et que la photo apparaisse lorsque la souris est passé dessus.

Avec IE , la photo est affichée la ou se trouve la souris, mais avec FireFox, la photo reste du cote du tableau de 200 pixels, completement en haut a gauche.

Alors j'espère avec été un peu plus clair dabns mes explications.
Je peux vous donnez la structure de mon code si vous le désirez afin de vous éclaircir.

Merci encore
Sylvain
21/03/2011, 10h35
Invité

la photo est elle en position absolute ?
21/03/2011, 16h53
ConceptInterWEB

Bonjour Mekal,

Oui la position est en absolue. J'ai posté dans mon premier message le bout de code inclut dans le .CSS à ce niveau.

MErci
Sylvain

Code:

document.captureEvents(Event.MOUSEMOVE);

Vire cette horreur ! :aie:

En fait, remplace même la portion

Code:

1
2
3
4
5
6
7
8
domok = document.getElementById;
if (domok)
	{
	skn = document.getElementById("topdecklink").style;
	if(navigator.appName.substring(0,3) == "Net")
		document.captureEvents(Event.MOUSEMOVE);
	document.onmousemove = get_mouse;
	}

par

Code:

1
2
var skn = document.getElementById("topdecklink").style;
document.onmousemove = get_mouse;

Hello,

Finalement ca ne change rien.

Revoici ou est rendu le code, après les modifications que vous m'avez demandé de faire.

Dans le .CSS :

Code:

1
2
3
4
5
 
.popperlink { 
	POSITION: absolute; 
	VISIBILITY: hidden;
}

Le code JavaScript

Vous allez noté que il y a un autre fonction WhereMouse que j'ai trouvé sur le net qui me semblait plus complète, mais même avec celle-ci, ca ne fonctionne pas non plus

Code:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<DIV class=popperlink id=topdecklink></DIV>
<SCRIPT language="JavaScript">
 
/*
SCRIPT EDITE SUR L'EDITEUR JAVACSRIPT
*/
 
var skn = document.getElementById("topdecklink").style;
document.onmousemove = get_mouse;
 
function poplink(msg, texte)
{
 
var content ="<img src="+msg+" height='120' width='90'><br><font style='font-size:10px;color:#F00'><div align='center'>"+texte+"</div></font>";
 
	  	document.getElementById("topdecklink").innerHTML = content;
	  	skn.visibility = "visible";
}
 
function get_mouse(e)
	{
	var dde=(navigator.vendor) ? document.body : document.documentElement;
	s =(!s) ? window.event : s;
	var x =s.clientX + dde.scrollLeft;
	var y =s.clientY + dde.scrollTop;
	skn.left = x-100+"px";
	skn.top = y-100+"px";;
 
	}
 
function WhereMouse( e )
	{
  	var DocRef;    // Variable pour IE uniquement
 
 
  	// L'événement est passée à la fonction
  	// donc tous sauf IE…
  	if( e)
	{                     // Dans ce cas on obtient directement la position dans la page
   		Mouse_X = e.pageX;
    	Mouse_Y = e.pageY;
  	}
 	else
	{                      // Dans ce cas on obtient la position relative à la fenêtre d'affichage
    	Mouse_X = event.clientX;
    	Mouse_Y = event.clientY;
 
 
    	//-- Il faut traiter le CAS des DOCTYPE sous IE
    	if( document.documentElement && document.documentElement.clientWidth) // Donc DOCTYPE
      		DocRef = document.documentElement;   // Dans ce cas c'est documentElement qui est réfèrence
    	else
      	DocRef = document.body;                    // Dans ce cas c'est body qui est réfèrence
 
    	//-- On rajoute la position liée aux ScrollBars
    	Mouse_X += DocRef.scrollLeft;
    	Mouse_Y += DocRef.scrollTop;
  }
  skn.left = Mouse_X - 100;
  skn.top = Mouse_Y - 100;
}
 
function closepopup()
	{
	if (domok)
  		skn.visibility = "hidden";
	}
 
</SCRIPT>

Appel dans le HTML dans une balise <a>

Code:

1
2
 
onMouseOver="poplink('../images/<?php echo $photo; ?>','<?php echo stripslashes($row['prenom']); ?>')" onMouseOut="closepopup()"

Je suis surpris, normalement, rien ne fonctionne sous IE, mais super bien sur les autres navigateurs. Mais là c'est le contraire.

Si vous avez quelque chose de semblable disponible ici sur le site, qui fonctionne sous tout les navigateurs, je suis preneur. :-)

Code:

1
2
3
4
function get_mouse(e)
	{
	var dde=(navigator.vendor) ? document.body : document.documentElement;
	s =(!s) ? window.event : s;

:no:

Ta fonction a un paramètre e et tu testes s...

21/03/2011, 17h34
ConceptInterWEB

Est-ce que je remplace le e par s ? Normalement oui, mais plus haut quand on appele la fonction, on ne donne pas de paramètre, est-ce normal ?

Merci
Sylvain
21/03/2011, 17h44
ConceptInterWEB

Merci à tous ceux qui ont participés à cette discussion, grace à vos conseils, et à votre vision meilleure que la mienne, et bien, le script fonctionne correctement maintenant.

Sylvain
21/03/2011, 17h51
Bovino

Citation:

Envoyé par ConceptInterWEB

Est-ce que je remplace le e par s ? Normalement oui, mais plus haut quand on appele la fonction, on ne donne pas de paramètre, est-ce normal ?

N'importe, l'important c'est que les deux aient le même nom ;)
Sinon, effectivement, le paramètre est transmis de façon implicite dans l'appel de la fonction.