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

Fonction Hotspots avancée

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 |

Hotspots advanced : plusieurs zônes cliquables.

Chaque fonction hotspot a ses propres paramétres. Cliquez dans les zônes pour voir.


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

Le codage:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom Plus: Hotspots advanced</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>Each hotspot has its own settings. Click to see them.</p>
  14.  
  15.         <!-- define Magic Zoom Plus -->
  16.         <a href="images/harley1c.jpg" class="MagicZoomPlus" id="Zoomer" rel="selectors-effect-speed: 600; hotspots: hd1-spots" title="Harley-Davidson Dyna Wide Glide"><img src="images/harley1b.jpg"/></a> <br/>
  17.  
  18.         <!-- define alternate views -->
  19.         <a href="images/harley1c.jpg" rel="zoom-id:Zoomer" rev="images/harley1b.jpg"><img src="images/harley1a.jpg"/></a>
  20.         <a href="images/harley2c.jpg" rel="zoom-id:Zoomer; hotspots: hd2-spots" rev="images/harley2b.jpg"><img src="images/harley2a.jpg"/></a>
  21.  
  22.         <div id="hd1-spots" class="MagicHotspots">
  23.             <a href="images/harley4.jpg" coords="115,145,135,165" title="New Helical-Cut 5th Gear" rel="background-opacity: 50" class="MagicThumb"></a>
  24.             <a href="images/harley5.jpg" coords="130,75,196,110" title="Tank"  rel="background-opacity: 50" class="MagicThumb"></a>
  25.             <a href="images/harley3.jpg" coords="75,120,85,140" title="Rear Shocks"  rel="background-opacity: 50" class="MagicThumb"></a>
  26.         </div>
  27.  
  28.         <div id="hd2-spots" class="MagicHotspots">
  29.             <a href="images/harley7.jpg" coords="205,100,240,160" title="Wide Front Forks" rel="background-color: #303050; background-opacity: 50" class="MagicThumb"></a>
  30.             <a href="images/harley6.jpg" coords="20,90,50,105" title="Tail View" rel="background-color: #303050; background-opacity: 50" class="MagicThumb"></a>
  31.         </div>
  32.  
  33.        
  34.     </body>
  35. </html>

 

| haut de page |

fonds d'écran gratuits