Magic Zoom Plus™

Examples

Hotspots

Buy now  £39 Get support

Combine related images using hotspots.

Harley-Davidson Dyna Wide Glide

Here's the 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>