Note: This could be copyright in whole and/or in part. Do not use this code without determining the legal ramifications and your rights our lack thereof to use it.
This appears to be rather simple and at the same time quite ingenious. Here is the markup for the first scroll:
HTML Code:
<div id="shop" onmouseover="openShop();" onmouseout="closeShop();">
<div id="shop-content" style="display: none;">
<h2>The Cauldron Shop</h2>
<h3>What's New!</h3>
<ul>
<li><a href="http://www.thecauldronshop.com/product.php?cid=53&l=us" target="_blank">Goblet DVDs!</a></li>
<li><a href="http://www.thecauldronshop.com/product.php?cid=7&l=us&p=5" target="_blank">Hermione's Earrings</a></li>
<li><a href="http://www.thecauldronshop.com/product.php?cid=3&l=us&p=12" target="_blank">Lucius's Walking Stick</a></li>
<li><a href="http://www.thecauldronshop.com/product.php?cid=67&l=us&p=5" target="_blank">Chess Set</a></li>
<li><a href="http://www.thecauldronshop.com" target="_blank">and More!</a></li>
</ul>
</div>
</div>
There is only one background image for the division with the id of 'shop':
http://www.the-leaky-cauldron.org/cs...croll-shop.jpg
as you can see, it is both the furled and unfurled versions of the image together in one, with one over the other. The css for #shop would be like:
Code:
#shop {
background-image:url('filename.jpg');
height:118px;
width:200px;
}
What the mouseover function must be is something like:
Code:
function openShop(){
document.getElementById('shop').style.backgroundPosition="0 118px";
document.getElementById('shop').style.height="262px";
document.getElementById('shop-content').style.display="";
}
The mouseout:
Code:
function closeShop(){
document.getElementById('shop').style.backgroundPosition="0 0";
document.getElementById('shop').style.height="118px";
document.getElementById('shop-content').style.display="none";
}
I didn't steal these, and they would need adjustment for other scrolls. They are just my idea of what must be happening.
Bookmarks