• CSS (7)
  
• Flash & AS (2)
  
• HTML (19)
  
• Java (5)
  
• JavaScript (52)
  
• Perl (0)
  
• PHP (36)
  
• Protocols (1)
  
• Python (0)
  
• Ruby (0)
  
• SQL (4)
  
• Linux (13)
  
• Misc (9)
  

Diaporama de photos avec effets spéciaux en transition - JavaScript-DHTML (IE Only)

Avec Internet Explorer, des effets spéciaux sont disponibles pour fondre une image dans une autre, et ainsi réaliser des diaporamas avec des effets de transitions surprenants.

Il suffit d'un bout de CSS et de JavaScript :

<img id=MyImg src=image1.jpg style="filter:progid:DXImageTransform.Microsoft.RandomDissolve()">

Et quelques secondes plus tard, déclencher le script suivant :

MyImg.filters[0].apply();
MyImg.src = 'image2.jpg';
MyImg.filters[0].play();

Et ainsi de suite pour les images suivantes ...

Attention : si les images à afficher sont lourdes, il est conseillé d'utiliser un script de préchargement pour ne démarrer l'animation que quand toutes les images ont été préchargées par le navigateur.

Voici une liste non exhaustive des effets disponibles :

filter:progid:DXImageTransform.Microsoft.Wipe(Gradientsize=1.0, wipeStyle=0, motion='forward')
filter:progid:DXImageTransform.Microsoft.Barn(orientation=horizontal, motion=out)
filter:progid:DXImageTransform.Microsoft.Blinds(bands=2, direction='RIGHT')
filter:progid:DXImageTransform.Microsoft.Checkerboard(squaresX=12, squaresY=8, direction='right', duration=1)
filter:progid:DXImageTransform.Microsoft.Inset()
filter:progid:DXImageTransform.Microsoft.Iris(irisStyle='CIRCLE', motion='out')
filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=50, Duration=1, Enabled=false)
filter:progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle='clock')
filter:progid:DXImageTransform.Microsoft.RandomBars(orientation='horizontal')
filter:progid:DXImageTransform.Microsoft.RandomDissolve()
filter:progid:DXImageTransform.Microsoft.Slide(slideStyle='HIDE', bands=1)
filter:progid:DXImageTransform.Microsoft.Spiral(GridSizeX=16, GridSizeY=16)
filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='HIDE')
filter:progid:DXImageTransform.Microsoft.Strips(Duration=5, Motion='leftdown')
filter:progid:DXImageTransform.Microsoft.Wheel(spokes=4)
filter:progid:DXImageTransform.Microsoft.zigzag(GridSizeX=16, GridSizeY=16)

Pour plus d'info sur les transitions :
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/fade.asp

Un script tout fait pour gérer le diaporama (changement d'image toutes les X secondes) :
http://www.miraks.com/index.php?url=print_javascript&id=20026