Change Background Colour Dynamically

I am wondering if the user can change the background colour of the image div.

I have a variety of different colour stickers, and I would like the user to select the colour of their "car" and then the colour of theie desired sticker to see what it would like like roughly against their car.

EG Is there car is RED they would select Red, this would then change the "hikashop_product_main_image" to a red background. Then they would select "White" as the colour and this would bring the White sticker up (I do this by uploading the relevent image to the product obviously).

My images are a transparent png format so you can see the background colour where the transparency is.

If this is possible that would be fantastic.

Alternatively i dont mind uploading several different images, and then having the hikashop_product_main_image" div calling the relevent image.

Any help would be great. Thanks

Hi,
The best solution will probably be to directly add different images with the good background , because if you want to dynamically change the CSS regarding the selected characteristic, you'll have to do some code customization which will require development skills.

I have some basic skills in PHP and jQuery, slightly more advanced in CSS and HTML but upon investigation I found a nifty little colour picker plug-in, see it in action here on my site.

www.thetrailerbox.com/shop/categories/ca...-stick-figure-family

Good job!
Thank you for sharing this with us, don't hesitate to post the name of the plugin you used, it might help other people

www.eyecon.ro/colorpicker/

The way I got this to work was with using the following in the <head> part of my index.php
and then changing line 48 in the layout.js from
$('#colorSelector div').css('backgroundColor', '#' + hex);

to
$('#hikashop_product_image_main').css('backgroundColor', '#' + hex);

You also have to add in the following code to the product / show.php in hikashop display.

<div id="colorSelector">
<div style="background-color: rgb(255, 0, 43);"></div>
</div>

Ohh and dont forget to create some width and height CSS styling for #colorSelector div otherwise you will be swearing like I was as to why it wasnt working!!

Hope this will help someone in the future, If so wouldn't mind a Thank You