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

Utilisation de la CSS pour personnaliser vos effets de zoom

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 |

Zoom ou Agrandissement

Clic et glisser pour chnager l'effet du zoom. Agrandir n'est pas diponible.

Agrandir l'image uniquement. Zoom est inactif

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

Le code, zoom ou agrandir:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom Plus: Zoom or Expand</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.        
  14.         <p>Click and drag to move the zoom. Expand is disabled.</p>
  15.         <!-- define Magic Zoom Plus with drag mode, zoom-width and set starting position on the front wheel. This image will not expand on click. -->
  16.         <a href="images/harley1c.jpg" rel="disable-expand: true" class="MagicZoomPlus"><img src="images/harley1b.jpg"/></a>
  17.  
  18.         <p>Expand image. Zoom is disabled</p>
  19.         <!-- define Magic Zoom Plus with only expand function. No zoom window on mouseover. -->
  20.         <a href="images/harley1c.jpg" rel="disable-zoom: true;" class="MagicZoomPlus"><img src="images/harley1b.jpg"/></a>
  21.  
  22.        
  23.     </body>
  24. </html>