JavaScript Image Class - Merge two images next to each other

Question

is there a way to combine two images in one image class? I don't want to blend them, just put them next to each other...

I'm looking for something like this:

myImg = new Image()
myImg.src = "img1.jpg" + "img2.jpg"

Thanks!

Edit:

I need to combine them before putting them into the canvas for easier scroll-handling... so canvas or div is not an option.

Edit, II.:

I'm using a canvas through which I'm scrolling. But my image is chucked. It thought it would be the easiest way, when I merge my actual image with the following and "scroll" through this one instead of handling two seperate ones.

Answer 1

Not that I know of. An image element only support a single image. Either you would have to create two separate images and float them next to each other, or you could use a canvas element, and draw both images onto it side by side (if you don't have a very rare scenario at hand, the best solution is likely to use two separate images though).

Answer 2

You can't combine images like that using javascript, unless you use canvas or equivalent techniques.

If you just want to place them next to each other, create a container and append the images:

var container = document.createElement('div'),
    createImage = function(src) {
        var img = new Image();
        img.src = src;
    };
 container.appendChild( createImage('img1.jpg') );
 container.appendChild( createImage('img2.jpg') );

Answer 3

use JQuery

$('.container').append('<img algin="left" src="img1.jpg" />');
$('.container').append('<img algin="left" src="img2.jpg" />');