how to fill an image with a pattern

hello,
I want to make a website which I can change the pattern of an area with another one that the user choose.

For example.This is the first:



and I want to apply pattern to make the following picture

I have no problem with selecting a specific area of the image.
is there any way to do it with php or any web platform.How should I do that?

Thanks

 

You can use the slider for it, amazingslider works great in this situations.

 

I understand prefectly want you want for I created a very similar effect some years ago.

You can install a slider and use the first image as the background to then include the pattern as part of an animation (fadeIn for instance) adding also, if you think it fit, a title or text to illustrate and describe the added value or as a way to display different options in terms of colors, patterns or finishes.

On the other hand, the less the better for many reasons. You could also use CCS transitions to get the same effect without installing any slider or extra js coding. The problem is browser compatibility in the case older versions of Internet Explorer.

In any of these two procedures, you will need a png image to apply the pattern over the picture, which will require also a careful optimization process.

png image attached to this post.

 

I found a solution but the first step is to create bump-map from the image which can be done by photoshop.Is there anyway to create bump-map from server side or client side without using photoshop or other software.I need to do that because I'm making a cms for that.
Thanks

 

Perhaps I didn't understand the issue. Are the users to include the patterns themselves or are you to provide a list of patterns to select from?

In any case, I do not see the point in creating a map "from server side or client".

 

Thanks.i provide a list of pattern and the user choose between them.
I need to make something as a template to be able to apply patterns on it an I thought what I need is a map of it.
do you know any other solutuion for that?
thanks

 

Yes, it can be made using Javascript to change the background of the area by clicking on a given option in a select list. There could be a plugin somewhere out there, but most probably you will have to write your own custom solution, or modify some plugin or script to do the trick.