CODEWITHSUNDEEP
javascriptimagemerge
Pardo P.
Pardo P.

Reputation: 3

Merging Images in JavaScript

I got a side bar (fixed on the right side) which is made with 3 images, Top.png, Mid.png, Bot.png. I was wondering if there is a way to load those 3 images during runtime and create/merging into a new one (sideBar.png), without saving it to the HD.

The point is, as I don't know the height of the screen, I am placing the Mid image as many times as it is needed to fill the space between the Top.png and the Bot.png.

Using:

EDITED: and the CSS, its the same for all 3 parts... it only changes the url, name and position:

$("#Mid").animate({right: "-230px",}, 500 );
$("#Top").animate({right: "-230px",}, 500 );
$("#Bot").animate({right: "-230px",}, 500 );


#Bot {
        position: absolute;
        top:495; 
        right:0;
        width: 230px;
        height: 35px;
        background-image: url(/images/Bot.png);
    }

Upvotes: 0

Views: 1012

Answers (2)

jfriend00
jfriend00

Reputation: 707328

You haven't shown the HTML markup, but I'm guessing you should put the three images in a container div and animate the container div with one animation, not three. Then, there will not be anything out of sync during the animation.

Upvotes: 1

Levi Morrison
Levi Morrison

Reputation: 19552

This seems truly unnecessary. I'd recommend using CSS attribute repeat-y and building your HTML and CSS structures in such a way the images will mesh. This is not the purpose of JavaScript.

Upvotes: 5

Related Questions