Question

Is it possible to have vector shapes and dynamically change the background image by a button in jquery ?

i.e. i need to have a custom shape and be able to have a button that can change the background image to something else..

for instance:

say a star shape with 3 buttons, one saying sheep, one saying dots and one saying solid colour

these buttons change the background image of the star shape with the pre-set images applying to the button names ?

IF that makes sense ??

Thanks in advance

Lee

Answer 1

I would start with a simple square div area and use this code to change the image.

  $('#btn1').click(function() {
    $('#divBackground').css('background-image', 'stars.jpg');
});

$('#btn2').click(function() {
    $('#divBackground').css('background-image', 'sheep.jpg');
});

$('#btn3').click(function() {
    $('#divBackground').css('background-image', 'dots.jpg');
});

then I would probably lay an image on top of this div with a star shape cut out of the middle to use as a clipping mask. I might be a little difficult with the CSS you will probably need to tinker with positioning and z-index to get it right.

Another option is to explore the HTML5 canvas functionality, might be some easier ways going that route.

here is a conceptual example: http://jsfiddle.net/VTQSM/1/