Question

I’m developing a mobile application using jquery mobile. I am looking for a solution to accomplish the following:

A large image is divided in three seperate clickable images

The images have to look like one big image at all times but have to resize to all available space while keeping the width/height ratio.

Has anyone done something like this before?

I have tried using a table and using the jquery mobile “content grids” without success.

Answer 1

I’d save the images as one image an use the following – working fiddle link at the bottom.
You can change “low_starts_here” and “right_starts_here” to fit your needs.
Also you can switch to “width:auto;height:100%” in the css, if that’s better for you.

html:

<img src="/myimage.jpg" id="myimage" />

css:

#myimage{
 width:100%;
 height:auto;    
}

jquery:

$(function() {    
    $('#myimage').on('click', function(e){
        var area = '';
        var low_starts_here = 0.6;
        var right_starts_here = 0.5;
        var x = Math.round(e.pageX - $(this).offset().left);
        var y = Math.round(e.pageY - $(this).offset().top);
        var w = $(this).width();
        var h = $(this).height();
        if(y/h > low_starts_here){
            // bottom area - do something
            alert('bottom');
        }
        else{
            if(x/w > right_starts_here){
               // top right area - do something
               alert('top right');
            }
           else{
               // top left area - do something
               alert('top left');
            }
        }

    });
});

http://jsfiddle.net/uLHhQ/6/