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.

Magic Zoom Plus DEMO

Position du zoom sur l'image

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 positions: zoom normal interne, cliquable pour agrandissement et navigation dans les images

Inner zoom, expand to top left corner

Bottom zoom position, expand to top right corner

Top zoom position, expand to bottom left corner

Left zoom position, expand to bottom right corner

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

Le code du zoom image:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom Plus: Zoom positions</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.         <table width="100%">
  14.             <tr>
  15.                 <td>
  16.                     <p>Inner zoom, expand to top left corner</p>
  17.                     <!-- define Magic Zoom Plus for inner position of zoom window, expand to to left corner -->
  18.                     <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-position:inner;zoom-fade: true;expand-position: top:0, left:0"><img src="images/harley1b.jpg"/></a>
  19.                 </td>
  20.                 <td>
  21.                     <p>Bottom zoom position, expand to top right corner</p>
  22.                     <!-- define Magic Zoom Plus for bottom position of zoom window, expand to top right corner -->
  23.                     <a href="images/harley2c.jpg" class="MagicZoomPlus" rel="zoom-position:bottom;zoom-height:200px;expand-position: top:0, right:0"><img src="images/harley2b.jpg"/></a>
  24.                 </td>
  25.             </tr>
  26.             <tr>
  27.                 <td>
  28.                     <p>Top zoom position, expand to bottom left corner</p>
  29.                     <!-- define Magic Zoom Plus for top position of zoom window, expand to bottom left corner -->
  30.                     <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="zoom-position:top;zoom-height:200px;expand-position: bottom:0, left:0"><img src="images/harley1b.jpg"/></a>
  31.                 </td>
  32.                 <td>
  33.                     <p>Left zoom position, expand to bottom right corner</p>
  34.                     <!-- define Magic Zoom Plus for left position of zoom window, expand to bottom right corner -->
  35.                     <a href="images/harley2c.jpg" class="MagicZoomPlus" rel="zoom-position:left;zoom-height:200px;expand-position: bottom:0, right:0"><img src="images/harley2b.jpg"/></a>
  36.                 </td>
  37.             </tr>
  38.         </table>
  39.        
  40.     </body>
  41. </html>