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

**ConceptInterWEB** · 27/02/2011, 21h42

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 :

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

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

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

Voici la façon dont je l'utilise dans mes liens :

Code :

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

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

**dukej** · 28/02/2011, 08h24

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.

**Bovino** · 28/02/2011, 08h52

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

Invité · 28/02/2011, 13h36

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

Code :

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

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 :

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
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";;
	}

**ConceptInterWEB** · 20/03/2011, 21h39

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

Invité · 21/03/2011, 10h35

la photo est elle en position absolute ?

**ConceptInterWEB** · 21/03/2011, 16h53

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

**Bovino** · 21/03/2011, 17h04

Code :

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

document.captureEvents(Event.MOUSEMOVE);

Vire cette horreur !

En fait, remplace même la portion

Code :

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

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 :

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

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

**ConceptInterWEB** · 21/03/2011, 17h22

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 :

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

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 :

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

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

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. :-)

**Bovino** · 21/03/2011, 17h27

Code :

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

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

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

**ConceptInterWEB** · 21/03/2011, 17h34

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

**ConceptInterWEB** · 21/03/2011, 17h44

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