Le javascript

Voici l’ensemble du javascript, le mieux est de l’intégrer dans un fichier .js et l’inclure dans votre page HTML.

// variables
var imgList = new Array();
var zInterval = null;
var indice=0;

// Change Opacité de l'image
function setOpacity(objet)
{
if(objet.xOpacity>.99)
{
objet.xOpacity = .99;
return;
}

objet.style.opacity = objet.xOpacity;
objet.style.MozOpacity = objet.xOpacity;
objet.style.filter = 'alpha(opacity=' + (objet.xOpacity*100) + ')';
}

// Fonction de changement des images (rotation)
function rotation()
{
cOpacity = imgList[indice].xOpacity;
nIndex = imgList[indice + 1]? indice + 1 : 0;
nOpacity = imgList[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgList[nIndex].style.display = 'block';
imgList[indice].xOpacity = cOpacity;
imgList[nIndex].xOpacity = nOpacity;

setOpacity(imgList[indice]);
setOpacity(imgList[nIndex]);

if(cOpacity<=0)
{
imgList[indice].style.display = 'none';
indice = nIndex;
setTimeout(rotation, 3000);
}
else
{
setTimeout(rotation, 50);
}
}

// Initialisation du rotation
function rotationInit(elementId)
{
if(document.getElementById || document.createElement)
{
imgList = document.getElementById( elementId ).getElementsByTagName('img');

for(i=1;i<imgList.length;i++)
{ imgList[i].xOpacity = 0; }

imgList[0].style.display = 'block';
imgList[0].xOpacity = .99;

setTimeout(rotation, 3000);
};
}

Le xHTML

Pour ce qui est du xHTML il suffit de mettre vos images les unes derrières les autres dans un conteneur auquel vous donnerez un id.

<div id="galerie" class="rotation">

<a href="http://www.dreaminvasion.com/realisations/23-mbolabs.html"><img src="http://www.dreaminvasion.com/images/mini-mbolabs.jpg" alt="Mbolabs" title="Mbolabs" /></a>

<a href="http://www.dreaminvasion.com/realisations/21-4l-trophy-toulouse.html"><img src="http://www.dreaminvasion.com/images/mini-4l-trophy-toulouse.jpg" alt="4L Trophy Toulouse" title="4L Trophy Toulouse" /></a>

<a href="http://www.dreaminvasion.com/realisations/11-dreaminvasion-v2-0.html"><img src="http://www.dreaminvasion.com/images/mini-dreaminvasion.com-v2.jpg" alt="Dreaminvasion v2.0" title="Dreaminvasion v2.0" /></a>

</div>


Enfin lancer la rotation via la fonction rotationInit('galerie');

<script type="text/javascript">
    rotationInit('galerie');
</script>

La feuille de style

La mise en page se fera via votre feuille de style (CSS), vous appliquerez un classe CSS au conteneur des photos.

La classe CSS devra comporter les attributs : width, height qui fixera la taille du conteneur à la dimension d’une image.
Les autres images seront simplement cachées.

.rotation {
    border: 1px solid #000;
    cursor: pointer;
    overflow: hidden;
    margin: 50px auto 10px;
    position: relative;
    width: 155px;
    height: 140px;
}

.rotation img {
    border: 0;
    cursor: pointer;
    width: 155px;
    height: 140px;

}

Cliquez ici pour télécharger le fichier rotation.js (1,6 Ko).