tricky question [How to implement rollover image where car changes colour?]

Report · Feb 26, 2017

i am trying to implement rollover type image(s) on a basic webpage!

Scenario

a picture of an illustration, where there is a car... I give a color pallet though and the visitor is able to mouse over the pallet. as doing so the image changes to match (mouseover) color... say a white car, they run the mouse over the blue on the pallet and the image is now a blue car. If that is what they want to select... they click on it and the default image is now a BLUE car... etc etc... with approx 40 colors to choose from... i cant figure it out, i tried it in Flash and it worked well, but is a ton of work incorporating all image variations into it.,

Im hoping there is an easier way to do it in standard page formats..

I guess very similar to ford and gm sites, where you build your car and it changes images for you

Anyone have any idea?..

I am using Dreamweaver CC2017

thanks in advance!!

Report · Feb 26, 2017

You are best off using an SVG rather than a raster image. For more, have a lokk at How do I make an SVG image change color when hovering over the object tag? | Treehouse Community

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Feb 27, 2017

IF it is a vector illustration you are using (I'm doubtful) and NOT an image then below is the whole solution, not half of one. If you are using actual images this solution would not be suitable.

<!DOCTYPE html>

<head>

<title>SVG Sample</title>

$(document).ready(function() {

$('.color_swatch').click(function() {

var color = $(this).attr('dir');

$('#phone').css('fill', color)

});

</script>

<style>

body {

background: #343434;

}

#phone {

transition: 1s;

}

.page_wrapper {

width: 30%;

margin: 0 auto;

text-align: center;

}

.colors {

display: flex;

justify-content: center;

}

/* colors */

.color_swatch {

width: 30px;

height: 30px;

margin: 20px 4px;

}

.red {

background-color: red;

}

.green {

background-color: green;

}

.blue {

background-color: blue;

}

.yellow {

background-color: yellow;

}

</style>

</head>

<body>

<path fill="#ffffff" id="phone" d="M204.316,0H95.664C83.827,0,74.252,9.595,74.252,21.432v257.146c0,11.816,9.575,21.422,21.412,21.422

h108.652c11.836,0,21.432-9.605,21.432-21.422V21.432C225.748,9.595,216.152,0,204.316,0z M133.214,20.725h34.106

c2.667,0,4.809,2.141,4.809,4.797s-2.142,4.787-4.809,4.787h-34.106c-2.646,0-4.797-2.141-4.797-4.797

S130.568,20.725,133.214,20.725z M149.646,286.941c-7.454,0-13.493-6.061-13.493-13.493c0-7.454,6.04-13.493,13.493-13.493

c7.424,0,13.473,6.039,13.473,13.493C163.119,280.892,157.07,286.941,149.646,286.941z M214.517,246.957H85.453V53.054h129.063

V246.957h0.011H214.517z"/>

</svg>

</div>

</div>

</body>

</html>

Report · Feb 27, 2017

I think you should rethink the entire problem, as no matter what solution you finally decide on, it will not work on mobile devices, which now accounts for over 50% of internet usage.

Mobile devices do not have any method for implementing rollovers, as they do not use a mouse.

Report · Feb 27, 2017

pziecina wrote
I think you should rethink the entire problem, as no matter what solution you finally decide on, it will not work on mobile devices, which now accounts for over 50% of internet usage.
Mobile devices do not have any method for implementing rollovers, as they do not use a mouse.

'click' would work though as my example demonstrates. Unfortunatley I think we a probably talking about photgraphs here or should be if you want to show the car in its best light. I don't think I'm going to be particularly impressed by something that looks like a kids coloring in book.

Report · Feb 27, 2017

One possible solution, (though time consuming) would be -

'cut-out' the car in the image, and use this as a background image.

'cut out' the background of the images for all possible car colors, leaving just the car, and make the background transparent.

Make a 'swap-image' behaviour, so that when a user selects a color, the car image of that color is superimposed over the background image, (over the cut out, so car image should be slightly larger).

Report · Feb 27, 2017

pziecina wrote
One possible solution, (though time consuming) would be -
'cut-out' the car in the image, and use this as a background image.
'cut out' the background of the images for all possible car colors, leaving just the car, and make the background transparent.
Make a 'swap-image' behaviour, so that when a user selects a color, the car image of that color is superimposed over the background image, (over the cut out, so car image should be slightly larger).

Yes, everything is possible its just what result you want to end up with and how much time you want to spend achieving it. Using an svg, just changing its color, could end up looking more like a Noddy book.

Report · Feb 27, 2017

osgood_ wrote
Using an svg, just changing its color, could end up looking more like a Noddy book.

You could do it, but the OP would have to know svg code, and how to find the relevant code in svg from an image.

Convert an image to svg, then find the relevant svg code for the 'car' color, (no easy task). Use css to change the fill color.

EDIT: Scrap this idea. I have just had a look at a few cars drive past, and the variations due to reflection of light hitting the paintwork, would give so many color changes as to make this unworkable.