Collapsible Scrolls

[redwall_hp]

If you look at www.the-leaky-cauldron.org, you'll see some cool looking scrolls on the right-hand sidebar. If you point to them, they expand and show HTML text and links in them. How do you do this? I haven't managed to build anything that works. Could someone help? I would appreciate a script. I can probably make any scroll images myself.

[jscheuer1]

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:

    <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:

#shop {
background-image:url('filename.jpg');
height:118px;
width:200px;
}

What the mouseover function must be is something like:

function openShop(){
document.getElementById('shop').style.backgroundPosition="0 118px";
document.getElementById('shop').style.height="262px";
document.getElementById('shop-content').style.display="";
}

The mouseout:

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.

[redwall_hp]

yeah im gonna talk to Leaky Cauldron about that.

[redwall_hp]

I still coudln't get it to work, but I just figured out how to make my own. It works by clicking instead and I used by own scroll images.

[jscheuer1]

I made a notation error in my script code. I have corrected it, in the original post.

[redwall_hp]

it sorta works now.

[jscheuer1]

Well, the numbers would have to be fine tuned via trial and error but, the concept should be sound. This is something I intend to play around with when I get some extra time.

[redwall_hp]

it is a cool script. I'm suprised there isn't more out there like it.