Javascript, images et aliasing
Bonjour,
Je suis en train de créer un menu avec Jquery dont le principe est assez simple et inspiré du menu de ce maginifique site:
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
| <!DOCTYPE html>
<html>
<head>
<script src='js/jquery-1.7.2.min.js'></script>
<link type="text/css" rel="stylesheet" href="css/styles.css"/>
<title>En cours</title>
</head>
<body>
<div id="divbout"><img src="image.png" class="logo">
<div id="m0" class="space"><img src="image.png"></div>
<div id="m1" class="space"><img src="image.png"></div>
<div id="m2" class="space"><img src="image.png"></div>
<div id="m3" class="space"><img src="image.png"></div>
<div id="m4" class="space"><img src="image.png"></div>
<div id="m5" class="space"><img src="image.png"></div>
<div id="m6" class="space"><img src="image.png"></div>
</div>
<div id="div2">
<ul id="da-thumbs" class="da-thumbs">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html> |
Au survol de chaque image, les balises <li> sont décalées via le script transit.js via ceci:
Code:
1
2
3
4
5
6
| $(document).ready(function() {
$('#m0').mouseenter(
function (e) {
$('#div2').transition({ x: '0px', duration: '750ms' }, 'linear');
});
}); |
mes fichiers images sont tous des .png ultra-compressés. Jquery et mon code javascript ainsi que le fichier css qui est encore tout maigre sont également tous compressés.
Pourtant, lors du mouvement du menu, mes images (des carrés gris foncés pour le moment) subissent un gros crénelage!
J'ai été jusqu'à mettre un background en noir pour que les carrés gris foncés ne créent pas un gros contraste mais ça ne fait que limiter les dégâts.
Est-ce que j'ai oublié quelque chose? Que dois-je faire?
