Bonjour.

Je suis en train de m'initier au monde du développement web, et je viens d'être confronté à une différence de comportement sur l'exécution d'un Javascript selon que le fichier est ouvert via MAMP (je suis sur Mac) ou bien en direct - et ce uniquement sur Firefox...

Je m'explique.

J'ai une page HTML, contenant une image, et un lien qui exécute un Javascript qui va changer cette image par une autre avec un effet de fading.

Tout fonctionne bien, quand j'ouvre ma page directement avec Firefox par Drag and Drop. Pareil, si j'uploade ma page sur ma page perso chez Free.

Mais quand j'ouvre ma page via MAMP (sur l'URL "http://localhost:8888/test.html"), la nouvelle image est décalée de 2 pixels vers la gauche pendant la transition!

Sans rentrer dans les détails de la fonction crossfade que j'utilise, comment se fait-il qu'il puisse y avoir une différence de comportement entre ouvrir un fichier directement (URL : "file:///Applications/MAMP/htdocs/test.html") et le même fichier ouvert via MAMP (URL : "http://localhost:8888/test.html")?

Pour info, voici le code de la page, mais mon souhait est plus de comprendre pourquoi il peut y avoir une différence, que de débugger ce problème spécifique...

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
 
	<!-- Image transitions by Brothercake - http://www.brothercake.com/ -->
	<script type="text/javascript" src="http://www.brothercake.com/scripts/transitions/crossfade.js"></script>
	<link rel="stylesheet" type="text/css" href="http://www.brothercake.com/scripts/transitions/transitions.css" media="screen, projection" />
 
	<!-- styles unrelated to image cross-fade demo -->
	<style type="text/css" media="screen, projection">
 
		html, body {
			background:#fff;
			color:#000;
			}
 
		img { border:none; }
 
	</style>
 
</head>
 
<body>
	<center>
		<div><img id="diaporama_id" src="images/electricity1.jpg" /></div>
		<div><a href="javascript:crossfade(document.getElementById('diaporama_id'), 'images/electricity2.jpg', '2', '')">Cross Fade</a></div>
	</center>
</body>
</html>
Merci de votre attention!
Daniel