<html>
<head>
<title>Magic Magnify: Borders</title>
<!-- link to magicmagnify/magicmagnify.js file -->
<script src="magicmagnify/magicmagnify.js" type="text/javascript"></script>
</head>
<body>
<div class="w50">
<p>Thick outside border, no magnifier border.</p>
<!-- define Magic Magnify -->
<a href="images/shoe_large.jpg" rel="magnifier-border-width:0;border-width:5px;" class="MagicMagnify"><img src="images/shoe_small.jpg"/></a>
</div>
<div class="w50">
<p>Bright green outside border, red magnifier border.</p>
<!-- define Magic Magnify -->
<a href="images/shoe_large.jpg" rel="magnifier-border-width:2px;border-width:2px;magnifier-border-color:#FF0000;border-color:#99CC33;" class="MagicMagnify"><img src="images/shoe_small.jpg"/></a>
</div>
<div class="clear"> </div>
<div class="w50">
<p>No outside border, no magnifier border.</p>
<!-- define Magic Magnify -->
<a href="images/shoe_large.jpg" rel="magnifier-border-width:0;border-width:0;" class="MagicMagnify"><img src="images/shoe_small.jpg"/></a>
</div>
<div class="w50">
<p>Thin red outside border, thin green magnifier border.</p>
<!-- define Magic Magnify -->
<a href="images/shoe_large.jpg" rel="magnifier-border-width:1px;magnifier-border-color:#99CC33;border-width:1px;border-color:#FF0000;" class="MagicMagnify"><img src="images/shoe_small.jpg"/></a>
</div>
<div class="clear"> </div>
</body>
</html>