<html>
<head>
<title>Magic Zoom: Global options</title>
<!-- link to magiczoom.css file -->
<link href="magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
<!-- link to magiczoom.js file -->
<script src="magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
<script type="text/javascript">
MagicZoomPlus.options = {
'opacity': 30,
'background-opacity': 70,
'show-title': 'bottom'
};
</script>
</head>
<body>
<p>Customise your zoom via the SCRIPT instead of the rel attribute.</p>
<!-- define Magic Zoom Plus -->
<a href="images/harley1c.jpg" title="Low opacity on hover, dark background on click" class="MagicZoomPlus"><img src="images/harley1b.jpg"/></a>
</body>
</html>