Op un petit code pour faire un genre de diaporama
<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
<!--
var image = new Array();
image[0] = new Image(); image[0].src="livreimages01.gif";
image[1] = new Image(); image[1].src="livreimages02.gif";
image[2] = new Image(); image[2].src="livreimages03.gif";
image[3] = new Image(); image[3].src="livreimages04.gif";
image[4] = new Image(); image[4].src="livreimages05.gif";
var affiche = 0;
var largeur = 300;
var largeur_actuelle = 0;
var ampleur_pas = 6;
var delai_pas = 1;
function feuilleter(direction) {
affiche = affiche + direction;
if(affiche > image.length - 1) affiche = 0;
else if(affiche < 0) affiche = image.length - 1;
if(DOM || MS)
getElem("id","passage_image",null).style.clip="rect(0 0 225 0)";
if(DOM && !MS && !OP) {
var img = document.createElement("img");
var src = document.createAttribute("src");
src.nodeValue = image[affiche].src;
img.setAttributeNode(src);
getElem("id","passage_image",null).replaceChild(img, getElem("id","passage_image",null).firstChild);
}
else if(MS) {
document.all.passage_image.innerHTML = "<img src=\"" + image[affiche].src + "\">";
}
else if(NS) {
getElem("index",0,null).visibility = "hide";
setCont("index",0,null,"<img src=\"" + image[affiche].src + "\">");
getElem("index",0,null).clip.right = 0;
getElem("index",0,null).visibility = "show";
}
construire_image();
}
function construire_image() {
if(largeur_actuelle <= largeur) {
if(DOM || MS && !OP)
getElem("id","passage_image",null).style.clip="rect(0 "+ largeur_actuelle +" 225 0)";
else if(NS)
getElem("index",0,null).clip.right = largeur_actuelle;
largeur_actuelle = largeur_actuelle + ampleur_pas;
window.setTimeout("construire_image()", delai_pas);
}
else {
largeur_actuelle = 0;
if(DOM || MS)
getElem("id","passage_image",null).style.clip="rect(0 "+ largeur +" 225 0)";
else if(document.layers)
getElem("index",0,null).clip.right = largeur;
}
}
function initialiser_page() {
if(DOM && !MS && !OP) {
img = document.createElement("img");
var src = document.createAttribute("src");
src.nodeValue = image[0].src;
img.setAttributeNode(src);
getElem("id","passage_image",null).appendChild(img);
}
else if(document.all)
document.all.passage_image.innerHTML = "<img src=\"" + image[0].src + "\">";
else if(NS)
setCont("index",0,null,"<img src=\"" + image[0].src + "\">");
}
//-->
</script>
<style type="text/css">
<!--
#passage_image {
position:absolute; left:10px; top:140px; padding:0px; clip:rect(0 300 225 0); visibility:show; }
#passage_navigation {
position:absolute; left:320; top:140; width:100; font-size:18pt; }
-->
</style>
</head>
<body bgcolor="#FFFFFF" onLoad="initialiser_page()">
<div id="passage_image">
</div>
<div id="passage_navigation">
[<a href="javascript:feuilleter(-1)"><b><<</b></a>]
[<a href="javascript:feuilleter(1)"><b>>></b></a>]
</div>
</body>
</html>