Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Flash or CSS - Scrolling image with rollover help

LimeiBook86

LimeiBook86

macrumors G3
Original poster
May 4, 2002
8,003
54
Go Vegan
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
 
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).
 
angelwatt said:
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).
Click to expand...

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 :)
 
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_OVER, scroll_R, false, 0, true);
btnL.addEventListener(MouseEvent.MOUSE_OVER, scroll_L, false, 0, true);
stage.addEventListener(MouseEvent.CLICK, stageClick, false, 0, true);

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

function scroll_L(event:MouseEvent):void
{
	TweenMax.to(image_mc, 6, {x:stage.x - stage.stageWidth, ease:Quad.easeOut});
}

function stageClick(event:MouseEvent):void
{
	TweenMax.to(image_mc, .5, {x:stage.stageWidth * .5, ease:Elastic.easeOut});
}
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back