Programatically Scrolling Over Images in a Website

Question

Hey all,

I'm trying to set up a website using HTML and JavaScript that displays sections of an image at a time and, by clicking buttons or sections of the image, will scroll to a different section of the image.

|-----| |-----| |-----|
|--A-| |--B-| |--C-|
|-----| |-----| |-----|

If an image if formed by the concatenation of A, B and C, I want to display only one section, A B or C, at a time, and by clicking a button, scroll to display the one to the left or the right. So if B is displayed, and I click a button inside B, I want the browser to scroll to the right, displaying C.

I think I can do this by having the three images next to each other, far enough apart that the one to the other side will not show, and use javascript to hide the scroll buttons, and then use javascript to scroll to the html anchor that specifies the location of the image.

However, I'm having trouble getting the images to be off screen. If my little scheme is to work, I need to put A off screen to the left, and C offscreen to the right. How can I do this through HTML? Can I do this through HTML? Is there a better way to get the functionality I want?

Thanks!

Answer 1

This might be possible with pure HTML+CSS using anchors but a more robust way is to inject some JavaScript inside. I presume you are trying to make something visually attractive so having some animations might not hurt either.

You don't need to put the images off screen. A div with overflow set to hidden will do just fine. Just make a div that is as wide as one of your segments. Then you just need to animate the margins of the inner image. If you know jQuery, this might help:

CSS

div {
    width: 300px;
    heigth: 500px;
    overflow: hidden;
}

HTML

The #images div has an image that contains images A, B and C.

<div id="images">
    <img src="abc.jpg" width="900" height="500" />
</div>

jQuery

$('div#images img').click(function() {
    var marginLeft = parseInt($(this).css('margin-left'));
    var newMarginLeft = marginLeft - 300;
    if(newMarginLeft >= $(this).width()) {
        newMarginLeft = 0;
    } 

    $(this).animate({
        marginLeft: newMarginLeft
    }, 500);
    return false;
});

Hope this helps. Note that you don't have to put them all to one image, this is just one way to do it. You might aswell have a inner div and the images separately in there and you could animate that inner div. That's up to you.