fonds d'écran - créations numériques - webmastering - photograhie - création de site - référencement efficace


 

 

Pour tous les webmasters, des effets professionnels de zoom ou d'agrandissement sur les images : Magic Zoom™ est un ensemble d'outils basé sur JavaScriptl. Il vous donne les meilleures possibilités d'affichage pour créer des effets surprenants. Ce script de zoom ou d'grandissement sur image est adopté par les plus grands sites marchands professionnels. La licence, pour un site 'personnel' est gratuite, celle pour un site professionnel est payante.

Webmastering pro : Magic Zoom Plus,effets spéciaux sur les images

les options d'opacité

Réglages possibles: exemples

Zoom sur image | Dimensions de la vue | Multiples images | Hotspots | Hotspots advanced | Zoom positions | Zoom position paramétrable | Fade-in et vitesse d'affichage | Options d'opacité | Personnalisation avec les CSS | Zoom ou agrandissement |

Options de réglage de l'opacité

Opacité reduite à 25%, background fond) opacité 70%:

Opacité inversée en mode zoom, background(fond) opacité 30%:

Voir les explications sur le Blog en cliquant sur ce lien.

Le code à insérer :

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom Plus: Opacity options</title>
  4.        
  5.         <!-- link to magiczoomplus.css file -->
  6.         <link href="magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
  7.         <!-- link to magiczoomplus.js file -->
  8.         <script src="magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
  9.        
  10.     </head>
  11.     <body>
  12.        
  13.         <p>Opacity reduced to 25%, background opacity 70%:</p>
  14.         <!-- define Magic Zoom Plus with square opacity of 25% -->
  15.         <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="opacity:25; zoom-height:200;background-opacity: 70"><img src="images/harley1b.jpg"/></a>
  16.  
  17.  
  18.         <p>Reverse opacity zoom mode, background opacity 30%:</p>
  19.         <!-- define Magic Zoom Plus with reverse opacity option enabled -->
  20.         <a href="images/harley2c.jpg" class="MagicZoomPlus" rel="opacity-reverse:true; zoom-height:200;background-opacity: 30"><img src="images/harley2b.jpg"/></a>
  21.        
  22.     </body>
  23. </html>