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

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

mekal · 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

mekal · 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

Bovino · 21/03/2011, 17h51

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.

21/03/2011, 10h35	#6
mekal Membre chevronné Krusty Inscription : mai 2009 Messages : 472 Détails du profil Informations personnelles : Nom : Krusty Localisation : France Informations forums : Inscription : mai 2009 Messages : 472 Points : 617 Points : 617	la photo est elle en position absolute ? __________________ programmer n'est pas connaitre tous les moindres détails d'un langage mais savoir exploiter sous toutes ses facettes ce que l'on connait.
	00

28/02/2011, 08h24	#2
dukej Membre expérimenté Duke Jikel Inscription : mai 2010 Messages : 340 Détails du profil Informations personnelles : Nom : Duke Jikel Informations forums : Inscription : mai 2010 Messages : 340 Points : 548 Points : 548	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.
	00

20/03/2011, 21h39	#5
ConceptInterWEB Invité régulier Inscription : juin 2009 Messages : 28 Détails du profil Informations forums : Inscription : juin 2009 Messages : 28 Points : 7 Points : 7	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
	00

21/03/2011, 16h53	#7
ConceptInterWEB Invité régulier Inscription : juin 2009 Messages : 28 Détails du profil Informations forums : Inscription : juin 2009 Messages : 28 Points : 7 Points : 7	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
	00

21/03/2011, 17h34	#11
ConceptInterWEB Invité régulier Inscription : juin 2009 Messages : 28 Détails du profil Informations forums : Inscription : juin 2009 Messages : 28 Points : 7 Points : 7	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
	00

21/03/2011, 17h44	#12
ConceptInterWEB Invité régulier Inscription : juin 2009 Messages : 28 Détails du profil Informations forums : Inscription : juin 2009 Messages : 28 Points : 7 Points : 7	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email