Diaporama (effet retournement de l'image)

Télécharger le projet
Commenter

Description

Un petit diaporama, on passe à l'image suivante en cliquant dessus. l'image se retourne pour faire apparaitre la suivante.

Dans "tabImage" on met les noms des images dans l'ordre où elles doivent apparaîtres
Dans "tabDesc" on met la description des images, le texte apparait dans l'infobulle.
Dans "vitesse" on met la vitesse à laquelle on veut que l'image tourne (merci JEROMAX pour le conseil ;))

Source / Exemple : 


<script language="javascript">
var largDepart = 0
var hautDepart = 0
var numImg = 0
var timerRe = 0
var timerAg = 0
var vitesse = 15
var tabImage = new Array()
tabImage[0] = "Cathedrale.gif"
tabImage[1] = "Palais - 3 D en Plaine.gif"
tabImage[2] = "zetaJones1.jpg"
tabImage[3] = "EAU.gif"
var tabDesc = new Array()
tabDesc[0] = "Description Cathedrale"
tabDesc[1] = "Description Palais - 3 D en Plaine"
tabDesc[2] = "Description zetaJones"
tabDesc[3] = "Description EAU"

function init(obj) {
  obj.src = tabImage[numImg]
  obj.alt = tabDesc[numImg]
  largDepart = obj.width
  hautDepart = obj.height
  if (vitesse > largDepart) { vitesse = largDepart }
}

function changeImage(obj) {
  if (timerAg != 0) {
    clearTimeout(timerAg)
    timerAg = 0
  }
  if (timerRe == 0) { timerRe = setTimeout("retrecirImage("+obj.name+")",0) }
}

function agrandirImage(obj) {
  if (obj.width < largDepart) {
    if (obj.width+vitesse > largDepart) { obj.width = largDepart }
    else { obj.width += vitesse }

    obj.height = hautDepart
    timerAg = setTimeout("agrandirImage("+obj.name+")",0)
  }
  else {
    clearTimeout(timerAg)
    timerAg = 0
  }
}

function retrecirImage(obj) {
  if (obj.width > 0) { 
    obj.width -= vitesse
    obj.height = hautDepart
    timerRe = setTimeout("retrecirImage("+obj.name+")",0)
  }
  else {
    clearTimeout(timerRe)
    timerRe = 0
    obj.src = tabImage[(numImg+1)%tabImage.length]
    obj.alt = tabDesc[(numImg+1)%tabImage.length]
    numImg++
    timerAg = setTimeout("agrandirImage("+obj.name+")",0)
  }
}
</script>
<BR>
<DIV align="center"><img name="image" onclick="changeImage(image)">
<BR>Cliquez sur l'image pour voir la suivante</DIV>
<script language="javascript">
  init(image)
</script>
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_jerms)