Flash or CSS - Scrolling image with rollover help

Discussion in 'Web Design and Development' started by LimeiBook86, Sep 11, 2008.

  1. LimeiBook86 macrumors 604

    LimeiBook86

    Joined:
    May 4, 2002
    Location:
    Go Vegan
    #1
    Hello guys,

    I've been asked by a friend to make a web page that needs a specific action for an image. Basically there are about 5-10 images (maybe more) stitched together into one JPG file. (I guess it could be split up if need be), but anyway. He wants an image in the center, with a left and right button on each side.

    So when you roll the mouse over the button (or maybe even the image) it starts to scroll to the left or right, revealing more of the image. Now the image will be one big loop (think of a 3D loop, but 2D). Also when you click anywhere I'd like it to return to one spot. Is this possible?

    I have Flash CS3 and some basic knowledge of HTML/CSS, however I've been searching on the web for a while for help, but all I could find are 3D coverflow type things.

    Here is a quick example I made in flash explaining how I need it to work. Any help at all would be great, thanks! :D

    Update: Here's a similar example, except you have to press buttons and it doesn't repeat. And of course I'd like to use the mouse rollover for all of the movement.

    -Steven
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    This could of course be done with Flash (not that I know how specifically), but it could also be done with JavaScript (if you care to go that route, you didn't mention it). I'm confident I could do a JavaScript implementation, but don't really have the time unfortunately, and would take some time to do. Also, CSS wouldn't be of any real help here.

    It might be easier to do with multiple images rather than one image, in part because you're wanting to show the left side and right side at the same time (the repeating part).
     
  3. LimeiBook86 thread starter macrumors 604

    LimeiBook86

    Joined:
    May 4, 2002
    Location:
    Go Vegan
    #3
    JavaScript would be fine if I could actually pull it off. I don't know JavaScript really though, so I guess I'd need to find a tutorial and convert it, or learn a lot of it. Any suggestions? Thanks :)
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
  5. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
    #5
    Here's a basic actionscript that works kinda like the first example.
    TweenMax is a powerful tweening class used here for the tweens and easing. (download it here)
    You need three movieclips on the stage, with instance names: image_mc, btnR, btnL;
    Paste the script in the actions layer on frame1.

    PHP:
    stop();
    import gs.TweenMax;
    import gs.easing.*;

    btnR.addEventListener(MouseEvent.MOUSE_OVERscroll_Rfalse0true);
    btnL.addEventListener(MouseEvent.MOUSE_OVERscroll_Lfalse0true);
    stage.addEventListener(MouseEvent.CLICKstageClickfalse0true);

    function 
    scroll_R(event:MouseEvent):void
    {
        
    TweenMax.to(image_mc6, {x:stage.stageWidth 2ease:Quad.easeOut});
    }

    function 
    scroll_L(event:MouseEvent):void
    {
        
    TweenMax.to(image_mc6, {x:stage.stage.stageWidthease:Quad.easeOut});
    }

    function 
    stageClick(event:MouseEvent):void
    {
        
    TweenMax.to(image_mc.5, {x:stage.stageWidth .5ease:Elastic.easeOut});
    }
     
  6. LimeiBook86 thread starter macrumors 604

    LimeiBook86

    Joined:
    May 4, 2002
    Location:
    Go Vegan
    #6
    Thanks! :D Still working out some tiny kinks, but this is way better than anything I could of hoped for. :)
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    I worked out a JavaScript version over the weekend as I had some time. You'll need to make sure in the HTML to ensure the img tags point to actual images to test it. The code also assumes you're using images of same width and height (though will still work more or less). I test with 1, 2, and 3 images. With 1 image there's no effect. I also tested on Mac: Firefox 3, Safari, and Opera and it worked. I believe it will also work in IE, but didn't test.

    The two colored sides will activate scrolling when the mouse is over them and will stop when it's not. If you click on the image area it will jump back to the starting position. Let me know if it needs any tweaking.

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head><title>Image Carousel</title>
    <script type="text/javascript">
    //<![CDATA[
    ImageCarousel = function()
    {
      var v = {
        //**** User Preferences ****
        id:    'images', // id attribute where images lie
        speed: 25,       // speed of carousel, 1-50
        //**** End user preferences ****
        offset: 0,
        timer: null
      };
      Init = function() {
        v['imgs'] = document.getElementById(v['id']).getElementsByTagName('img');
        // Check if there's at least 2 images
        if (v['imgs'].length < 2) return;
        // Grab width/height of first image
        v['width']  = v['imgs'][0].width;
        v['height'] = v['imgs'][0].height;
        // Use width/height to create image window
        document.getElementById(v['id']).style.width = v['width']+'px';
        document.getElementById(v['id']).style.height = v['height']+'px';
        document.getElementById(v['id']).style.overflow = "hidden";
        document.getElementById(v['id']).onclick = Start;
        // Center marquee
        document.getElementById('carousel').style.width = v['width'] + 80 +'px';
        
        // Style left and right buttons accordingly
        document.getElementById('btn-left'
          ).getElementsByTagName('span')[0].style.height = v['height']+'px';
        document.getElementById('btn-left').style.display = 'block';
        document.getElementById('btn-right'
          ).getElementsByTagName('span')[0].style.height = v['height']+'px';
        document.getElementById('btn-right').style.display = 'block';
        
        // Style each image and position it
        for (var x=0,y=v['imgs'].length; x<y; x++) {
          v['imgs'][x].style.position = 'absolute';
          v['imgs'][x].style.top = 0+'px';
          v['imgs'][x].style.left = x * v['width']+'px';
        }
        // Attach events to buttons
        document.getElementById('btn-left').onmouseover  = Left;
        document.getElementById('btn-left').onmouseout   = Stop;
        document.getElementById('btn-right').onmouseover = Right;
        document.getElementById('btn-right').onmouseout  = Stop;
      };
      Start = function() { v['offset'] = 0; Redraw(); };
      Stop = function()  { clearTimeout(v['timer']);  };
      Left = function() {
        v['offset'] += v['speed']; Redraw();
        v['timer'] = setTimeout(function(){Left()}, 70);
      };
      Right = function() {
        v['offset'] -= v['speed']; Redraw();
        v['timer'] = setTimeout(function(){Right()}, 70);
      };
      Redraw = function() {
        // Check if first image is beyond, if so bring in back
        if (v['offset'] > (v['width'] * (v['imgs'].length-1))
            || v['offset'] < 1 - (v['width'] * (v['imgs'].length-1))) {
          v['offset'] = (v['offset'] < 0) ? v['width']-v['speed'] : 0-(v['width']);
        }
        // Set position for each image
        for (var x=0,y=v['imgs'].length; x<y; x++) {
          v['imgs'][x].style.left = (v['offset'] < 0 || x == 0) ?
            (v['offset'] + (x * v['width']))+'px' :
            (0-((y-x) * v['width']) + v['offset'])+'px';
        }
      };
      window.onload = Init;
    }();
    //]]>
    </script>
    <style type="text/css">
    #images {
     position: relative; float: left;
     margin: 0; padding: 0;
    }
    #carousel {
     margin: 0 auto;
    }
    #btn-left, #btn-right {
     display: none;
    }
    #btn-left span, #btn-right span {
     display: block; float: left;
     width: 40px;
     text-align: center;
     background: #aaf;
    }
    #btn-left span:hover, #btn-right span:hover {
     background: #00f;
    }
    </style>
    </head>
    <body>
    <div id="carousel">
      <div id="btn-left"><span><</span></div>
      <div id="images">
        <img src="image01.jpg" alt="" />
        <img src="image02.jpg" alt="" />
        <img src="image03.jpg" alt="" />
      </div>
      <div id="btn-right"><span>></span></div>
    </div>
    </body>
    </html>
    Late Edit: I've since improved the above script and placed it on my site.
     

Share This Page