Magic Zoom™

Examples

CSS styling

CSS changed to show blue hover and blue title background. Title position set to bottom

Here's the code:

  1. <html>
  2.     <head>
  3.         <title>Magic Zoom: CSS styling</title>
  4.        
  5.         <!-- link to magiczoom.css file -->
  6.         <link href="magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
  7.         <!-- link to magiczoom.js file -->
  8.         <script src="magiczoom.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>
  26.        
  27.     </head>
  28.     <body>
  29.        
  30.         <p>CSS changed to show blue hover and blue title background. Title position set to bottom</p>
  31.  
  32.         <!-- define Magic Zoom -->
  33.         <a href="images/r1-blue-3.jpg" class="MagicZoom" rel="show-title: bottom" title="Blue Yamaha YZF-R1"><img src="images/r1-blue-2.jpg"/></a>
  34.  
  35.        
  36.     </body>
  37. </html>