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 |

CSS styling

La CSS peut être utilisée pour changer par exemple le survol en bleu, le la formation du titre en bleu, ainsi que les positions du titre, fond, place du titre,(en bas ici) placé dans l'exemple à droite de l'image.

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

Le code CSS :

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom Plus: CSS styling</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.         <style type="text/css">
  11.             /* Styles for zoom pup window (that one what move with mouse above small image) */
  12.             .MagicZoomPup {
  13.                 background:     #90a8d6;
  14.                 border:         1px solid #022e6f;
  15.             }
  16.             /* Styles for header on large zoom window */
  17.             .MagicZoomHeader {
  18.                 background:     #90a8d6;
  19.                 font-size: 12px;
  20.             }
  21.             /* Styles for large zoom window */
  22.             .MagicZoomBigImageCont {
  23.                 border:         1px solid #90a8d6;
  24.             }
  25.             /* Style of the expanded image */
  26.             .MagicThumb-expanded {
  27.                 border: 1px solid #90a8d6;
  28.             }
  29.             /* Style of the caption for the expanded image */
  30.             .MagicThumb-caption {
  31.                 background: #90a8d6;
  32.                 color: #fff;
  33.             }
  34.         </style>
  35.        
  36.     </head>
  37.     <body>
  38.        
  39.         <p>CSS changed to show blue hover and the blue background of the title and caption. Title position set to bottom, caption placed to the right of the image.</p>
  40.  
  41.         <!-- define Magic Zoom Plus -->
  42.         <a href="images/harley1c.jpg" class="MagicZoomPlus" rel="show-title: bottom; caption-position: right" title="Harley-Davidson Dyna Wide Glide"><img src="images/harley1b.jpg"/></a>
  43.  
  44.        
  45.     </body>
  46. </html>

 

| haut de page |

fonds d'écran gratuits