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
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/
It does not make sense but here is something to get you started:
$("#button").css("background-image", "stars.jpg")
精彩评论