Hey Baglan first of all - i just saw the figaro site - its great!
next - i have had some success thanks to your tips. i have the BG draggable as well as you suggested. i have had some success with having the big image as a window BG as well as a relatively positioned div within the page. my main issue at the moment, is how to make a minimap and connect it somehow to moving the background image. thanks again! On Oct 20, 2:36 pm, Baglan <[EMAIL PROTECTED]> wrote: > Hi! > > Building such a site shouldn't be hard if you take step-by-step > approach. > > I see the following features: > 1. Scrolling-bars-free page with a big image; > 2. Hotspots with popups; > 3. Sliding menu; > 4. Mini-map; > 5. Scrolling with mouse wheel; > > I'd do (1) by making a DIV with the size of the window, then I'd put > another DIV with a big image as a background, absolute positioning and > absolutely position hotspots within it. I've done something very > similar here: > > http://www.figaro.kz/ > > Here's example HTML: > > <div id="canvas"> > <div id="map"></div> > </div> > > And CSS: > > body,html { overflow-y: auto } /* IE fix for scrollbars */ > > /* Window-sized DIV */ > #canvas { > position: absolute; > left: 0; > top: 0; > width: 100%; > width: expression(documentElement.clientWidth+'px'); /* IE fix */ > height: 100%; > height: expression(documentElement.clientHeight+'px'); /* IE fix */ > overflow: hidden; > background: #EEE; > > } > > /* Map DIV centered on the screen */ > #map { > position: absolute; > width: 5000px; > height: 5000px; > left: 50%; > top: 50%; > margin-left: -2500px; > margin-top: -2500px; > background: url(/images/big.gif); > > } > > (2) Because hotsports are just regular absolutely-positioned elements, > you can bind just about any Lightbox-like library to work with them. > I've last looked at: > > http://livepipe.net/ > > But there seem to be dozens of libraries doing similat stuff. > > (3) Scriptaculous can slide out the menu with Effect.SlideDown/SlideUp > or BlindDown/BlindUp. > > (4) Mini-map can be done with Scriptaculous Draggable. In fact, I > dont' see why the big map shouldn't be draggable as well. > > (5) Wheel can also be easily "intercepted" - here's the very first > link I've fished out of Google: > > http://adomas.org/javascript-mouse-wheel/ > > Good luck with your project > > - Baglan --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
