Bonjour, je débute totalement dans l'utilisation d'Ajax et de Jquery, cependant
j'ai besoin d'utiliser le plugin cycle pour faire un petit fondu enchainé.

J'ai tenté de reproduire le code des exemples mais sans succés, car les trois
images s'affichent les unes en dessous des autres.
(liens vers le site du plugin : http://malsup.com/jquery/cycle/begin.html)

Voici mon code :

Code html : 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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">$('#s1').cycle('fade');</script>
<style type="text/css">@IMPORT url("cycleTest.css");</style>
<title>Insert title here</title>
</head>
<body>
 
<div class="pics" > 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div> 
 
 
 
</body>
</html>

Côté css :

Code css : 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
@CHARSET "UTF-8";
.pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
} 
 
.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
}

Si quelqu'un pouvait m'expliquer où ça coince...

Merci d'avance.