PDA

View Full Version : Newbie__Change colour



jamesand
Jan 17th, 2007, 12:32 AM
I have very recently started web design and JS. I want my users to be able to change the colour of a shape / gif?, (solid fill i.e. RGB 0,0,0) to any one of a number of other colours, i.e. RGB 255,255,255.
Is it possible to change the fill colour of a shape /gif? in JS or do I have to duplicate the shape / gif in every colour and load each as required?
Thanks,
James

chump2877
Jan 17th, 2007, 12:53 AM
With JS, you can change the fill color of an HTML element, but not a gif image file...However, you could change the opacity (transparency) of the .gif image....


in JS or do I have to duplicate the shape / gif in every colour and load each as required?

No, you can use the same HTML element.

Is there a reason why you are using RGB as opposed to HTML color codes (i.e., #000000)?

jamesand
Jan 17th, 2007, 08:36 PM
Hi R J,
I suppose I quoted RGB colours because WebPlus site builder that I am trialing uses RGB.
For an example of what I am trying to do please see :- http://www.bikeatac.com/about%20us/about_atac_sportswear.html.
Click: Semi Custom Design, scroll to bottom of page and click: C. Y. O. PROGRAM under the WEB jersey design on the last row.
Can you tell me how the colour changes are done.
Thanks,
James

jamesand
Jan 17th, 2007, 08:38 PM
Hi R J,
I suppose I quoted RGB colours because WebPlus site builder that I am trialing uses RGB.
For an example of what I am trying to do please see :- http://www.bikeatac.com/about%20us/about_atac_sportswear.html.
Click: Semi Custom Design, scroll to bottom of page and click: C. Y. O. PROGRAM under the WEB jersey design on the last row.
Can you tell me how the colour changes are done?
Thanks,
James

felgall
Jan 17th, 2007, 08:57 PM
Using rgb(0, 0, 0) rather than #000000 in your Javascript makes the calculations easier since that way you can use decimal numbers to set the colours rather than having to convert to hexadecimal.

For example if you set the variables red, green and blue to numbers between 0 and 255 you can set the background of a specific div to the corresponding colour using:


document.getElementById('myid').style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')';

much easier than having to convert the values to hex first.