<html>
<head>
<title>Magic Scroll: Text or images</title>
<!-- link to magicscroll.css file -->
<link rel="stylesheet" type="text/css" href="magicscroll/magicscroll.css" media="screen"/>
<!-- link to magicscroll.js file -->
<script src="magicscroll/magicscroll.js" type="text/javascript"></script>
<script type="text/javascript">
MagicScroll.extraOptions.horizontalTextScroll = {
'items': 1,
'height': 50,
'width': 406,
'arrows': false
};
</script>
</head>
<body>
<h3>Images</h3>
<div class="MagicScroll msborder">
<a href="#"><img src="images/shoes1.jpg" /></a>
<a href="#"><img src="images/shoes2.jpg" /></a>
<a href="#"><img src="images/shoes3.jpg" /></a>
<a href="#"><img src="images/shoes4.jpg" /></a>
<a href="#"><img src="images/shoes5.jpg" /></a>
<a href="#"><img src="images/shoes6.jpg" /></a>
<a href="#"><img src="images/shoes7.jpg" /></a>
<a href="#"><img src="images/shoes8.jpg" /></a>
<a href="#"><img src="images/shoes9.jpg" /></a>
<a href="#"><img src="images/shoes10.jpg" /></a>
<a href="#"><img src="images/shoes11.jpg" /></a>
<a href="#"><img src="images/shoes12.jpg" /></a>
</div>
<h3>Images and Text</h3>
<div class="MagicScroll msborder">
<a href="#"><img src="images/shoes1.jpg" />Purple shoes</a>
<a href="#"><img src="images/shoes2.jpg" />Silver shoes</a>
<a href="#"><img src="images/shoes3.jpg" />Pink shoes</a>
<a href="#"><img src="images/shoes4.jpg" />Black shoes</a>
<a href="#"><img src="images/shoes5.jpg" />Cream shoes</a>
<a href="#"><img src="images/shoes6.jpg" />White shoes</a>
<a href="#"><img src="images/shoes7.jpg" />Blue shoes</a>
<a href="#"><img src="images/shoes8.jpg" />Brown shoes</a>
<a href="#"><img src="images/shoes9.jpg" />Zebra shoes</a>
<a href="#"><img src="images/shoes10.jpg" />Checkered shoes</a>
<a href="#"><img src="images/shoes11.jpg" />Tissular shoes</a>
<a href="#"><img src="images/shoes12.jpg" />Gold shoes</a>
</div>
<h3>Text</h3>
<div class="MagicScroll msborder mstext" id="horizontalTextScroll">
<a href="http://magictoolbox.com/magiczoom/"><b>Magic Zoom™</b><br/>Zoom right into an image and see every detail.</a>
<a href="http://magictoolbox.com/magiczoomplus/"><b>Magic Zoom Plus™</b><br/>Zoom on hover, enlarge on click.</a>
<a href="http://magictoolbox.com/magicthumb/"><b>Magic Thumb™</b><br/>Enlarge a small image into a full screen image.</a>
<a href="http://magictoolbox.com/magicmagnifyplus/"><b>Magic Magnify Plus™</b><br/>Magnifying glass on hover and enlargement on click.</a>
<a href="http://magictoolbox.com/magicmagnify/"><b>Magic Magnify™</b><br/>Magnifying glass reveals close-up as you hover over an image.</a>
<a href="http://magictoolbox.com/magictouch/"><b>Magic Touch™</b><br/>If you need to display maximum possible detail.</a>
<a href="http://magictoolbox.com/magicslideshow/"><b>Magic Slideshow™</b><br/>Smooth way to show lots of photos one after another.</a>
</div>
</body>
</html>