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™

Hotspots

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 |

La fonction Hotspots sur image

Combine l'effet zoom normal avec un agrandissement supplémentaire possible en utilisant hotspots.


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

Le code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom Plus: Hotspots</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>Combine related images using hotspots.</p>
  14.  
  15.         <!-- define Magic Zoom Plus -->
  16.         <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="hotspots: hd-spots" title="Harley-Davidson Dyna Wide Glide"><img src="images/harley1b.jpg"/></a> <br/>
  17.  
  18.         <!-- define hotspots. Each hotspot expands with different effect -->
  19.         <div id="hd-spots" class="MagicHotspots">
  20.             <a href="images/harley4.jpg" coords="115,145,135,165" title="New Helical-Cut 5th Gear" class="MagicThumb"></a>
  21.             <a href="images/harley5.jpg" coords="130,75,196,110" title="Tank" class="MagicThumb"></a>
  22.             <a href="images/harley3.jpg" coords="75,120,85,140" title="Rear Shocks" class="MagicThumb"></a>
  23.         </div>
  24.  
  25.        
  26.     </body>
  27. </html>