hello there.

 

i need to create something like the following below but not to sure how to go about it, or what to use.

 

http://www.silikal.com/service-2/mischprogramm/?lang=en

 

I tried using PHP to change the colour of the png but i could only seem to do this once within the code and could not figure out how to link to a button.

<?php 


header('Content-type: image/png');
$floorimg = imagecreatefrompng('images/floor1-1.png');
imageAlphaBlending($floorimg, true);
imageSaveAlpha($floorimg, true);
imagefilter($floorimg, IMG_FILTER_COLORIZE, 230, 42, 69);
imagepng($floorimg);
imagedestroy($floorimg);


?>

 

i seen a few JS examples which meant creating an image in each colour and using an onclick event, not sure if this is the best way to go about it.

 

Simply put its just 4 png's sitting on top of each other each one has the same amount of colour options, you click one and the image changes colour.

 

Anyone got any ideas? bits of code to help me along? was not sure where to post this as it can be done with php or js. i'd like to use PHP and simply have 4 images with a set of pre defined colours when you click a button and it changes to one of the values. (if it can be done)

 

open to suggestions

 

thank you!

not sure how you would do it but how about svg(s) and manipulate it with css via js??

@@davep interesting! i never even thought of css as a solution, how backwards compatible would this be though?

i suppose you could have a class for each colour, then simply change the class with an onclick event? which would change the fill on the svg, in theory

i don't know i'm just saying the first things that pop into my head

 

what about html canvas too?

I've tried the SVG images then a JS button that changes the fill property onclick, Seems to be working a treat!

nice! would be interesting to see, if you can

@@davep Here you go! if you view source you can see the functions for the JS, basically its just loads of onclick functions and buttons there is probably a better,cleaner way to do this, but i'm not a javascript pro then it simply adds a fill to the SVG's.

 

i am stuck on one thing though if you can help? where it says "30% = " i want to display the button value next to the "=" sign, not sure how to do this though?

 

http://www.creativescript.co.uk/floorcolours/

works pretty well!

sorry i know nothing about js so i'm no help there.

works pretty well!

sorry i know nothing about js so i'm no help there.

 

Not to worry, i'll make a post on it

 

Thanks for your help!